使用框架更改 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 and Object3D 上的 THREE.js 文档。

此外，我注意到您在该实体上同时具有几何图元和 gltf-model。不确定这两件事有多好co-exist，如果你既想要盒子又想要模型，你应该把一个变成另一个的child。

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

Change opacity of glb 3D model with aframe

aframe

opacity

gltf

8thwall-web