浏览具有2个或多个材质的导入三维模型网格的材质-a-Frame/Three JS

Question

我正在使用从Blender导入的3D模型制作A-Frame。此模型的多个网格具有指定给它们的2个或多个材质。

我可以更改只有1种材质的网格的材质属性

然而，当涉及到更改具有多个材质的网格的材质属性时，我会遇到以下问题：

"未捕获的类型错误：无法设置未定义的属性(设置"不透明度"(">

我使用的代码如下：

<script>
AFRAME.registerComponent('modify-materials', {
init: function () {
// Wait for model to load.
this.el.addEventListener('model-loaded', () => {
// Grab the mesh / scene.
const obj = this.el.getObject3D('mesh');
// Go over the submeshes and modify materials we want.
obj.traverse(node => {
if (node.name.indexOf('muros') !== -1) {
node.material.opacity = 1;
}
});
});
}
});
</script>

我以为解决方案会像把材料当作阵列一样简单，但它没有起作用：

node.material[0].opacity = 1;
node.materials[0].opacity = 1;

我也搜索过如何在材料的id之间迭代，但我没有成功。

有人能帮我了解如何访问2,3,4，n材料吗？

Answer 1

每个mesh节点应该只有一个material。因此，您可能应该根据材料名称进行搜索，并修改匹配的名称：

obj.traverse(node => {
if (node.material.name === "material_one") {
node.material.opacity = 1;
} else {
node.material.opacity = 0.5;
}
});

---

我记得做过类似的事情-在这里查看。知道材料名称后，您可以修改其属性(如此处(：

<a-entity gltf-model="./model.gltf" 
material-modifier__MaterialName="emissive: 0xffff00"
material-modifier__AnotherMaterialName="color: 0xff00ff"
></a-entity>