用aframe改变glb 3D模型的不透明度

Question

我正在尝试制作一个网络应用程序，我可以使用世界跟踪来查看3D模型。我正在尝试使用a-entity标签的material属性来更改模型的不透明度，但是它似乎不起作用。有关于如何改变我的3D对象的不透明度以使其半透明的想法吗？

<a-entity
    id="model"
    gltf-model="#3dmodel"
    class="cantap"
    geometry="primitive: box"
    scale="0.5 0.5 0.5"
    material="transparent: true; opacity 0.1"
    animation-mixer="clip: idle; loop: repeat"
    hold-drag two-finger-spin pinch-scale>
</a-entity>

Answer 1

GLTF模型在模型文件中包含自己的材质。这些是由THREE.js而不是AFrame处理的，所以为了访问它们的属性，您必须搜索元素object3D，使用如下代码：

this.el.object3D.traverse((child) => {
  if (child.type === 'Mesh') {
    const material = child.material;
    // Do stuff with the material
    material.opacity = 0.1;
  }
})

有关更多详细信息，请参阅Materials和Object3D上的THREE.js文档。

另外，我注意到您在该实体上同时有一个几何图元和一个gltf-model。不知道这两样东西能不能很好地共存，如果你同时想要一个盒子和一个模型，你可能应该让其中一个成为另一个的孩子。