aframe - 使用 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;
  }
})

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

另外，我注意到您在该实体上同时具有几何图元和 gltf 模型。不确定这两种东西可以共存的程度，如果你想要一个盒子和模型，你可能应该让一个成为另一个的孩子。