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

问题描述

我正在尝试制作一个网络应用程序，我可以在其中使用世界跟踪来查看 3D 模型。我正在尝试使用 a-entity 标签的材料属性更改模型的不透明度，但它似乎不起作用。关于如何更改 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>

解决方法

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 模型。不确定这两种东西可以共存的程度，如果你想要一个盒子和模型，你可能应该让一个成为另一个的孩子。