如何解决使用 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 模型。不确定这两种东西可以共存的程度,如果你想要一个盒子和模型,你可能应该让一个成为另一个的孩子。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。