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

Question

我正在尝试制作一个网络应用程序，我可以在其中使用世界跟踪来查看 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>

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 模型。不确定这两件事能共存得如何，如果你想要一个盒子和模型，你可能应该让一个成为另一个的子对象。

Answer 2

E Purwanto 的上述答案对我有用，还添加了将透明度设置为 true 的功能：

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

Answer 3

在我将这条额外的线添加到遍历中之前，它对我不起作用：

material.needsUpdate = true;

所以这有效：

this.el.object3D.traverse((child) => {
  if (child.type === 'Mesh') {
    const material = child.material;
    // Do stuff with the material
    material.transparent = true; // enable to modify opacity correctly
    material.opacity = 0.1;
    material.needsUpdate = true;
  }
})