微信小程序中使用three.js显示不正常

Question

微信小程序中使用three.js加载出来的半透明模型不正常

这张图是浏览器中查看的

下面这张是在小程序中加载出来的 同一个模型

loader.load('https://资源地址手动屏蔽1313689111.tcb.qcloud.la/%E9%80%8F%E6%98%8E.glb', function (gltf) {
      model = gltf.scene;
      createGUI(model, gltf.animations)
      model.traverse(function (child) {
        if (child.isMesh) {
          child.material.transparent = true;
          child.material.opacity = 0.5; 
        }
      });
      scene.add(model);
    }, undefined, function (e) {
      console.error(e);
    });
    renderer = new THREE.WebGLRenderer({ antialias: true },{ alpha: true });
    renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
    renderer.setSize(canvas.width, canvas.height);
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;

    const { OrbitControls } = registerOrbit(THREE)
    controls = new OrbitControls( camera, renderer.domElement );

    camera.position.set( 5, 5, 10 );
    controls.update();

Answer 1

引自强大而免费的微信小程序：皆我百晓生。如有帮助，还望采纳。

---

根据您提供的代码和描述，我看到您在微信小程序中使用了Three.js加载半透明模型，在浏览器中正常显示，但在小程序中显示不正常。

首先，确保您的微信小程序配置文件app.json中包含了webgl能力，如下所示：

{
  "usingComponents": {
    "webgl": "/path/to/webgl-component"
  }
}

然后，在webgl-component中引入Three.js库，并创建一个Canvas元素：

import * as THREE from '/path/to/three.js';

Component({
  properties: {
    // ...
  },

  attached() {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('webgl');
    const renderer = new THREE.WebGLRenderer({ canvas: canvas, context: context });
    // ...
  },

  methods: {
    // ...
  }
})

注意：确保引入的Three.js库路径是正确的。

另外，请确保您的微信小程序版本支持WebGL，可以在微信开发者工具中检查版本并更新到最新版本。

如果您仍然有问题，请提供更多的信息，比如运行代码时的报错信息或控制台输出，以便更好地帮助您解决问题。