浏览具有 2 种或多种材质的导入 3D 模型网格的材质 - A 框架/三个 JS

发布于 2025-01-13 01:53:24 字数 990 浏览 2 评论 0原文

我正在使用从 Blender 导入的 3D 模型制作 A 型框架。该模型的多个网格分配有 2 个或更多材质。

我可以更改仅具有 1 种材质的网格体的材质属性

但是，当涉及更改具有多种材质的网格体的材质属性时，我遇到了以下问题：

“未捕获类型错误：无法设置未定义的属性（设置'opacity')"

我使用的代码如下：

    <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 材料吗？

原文

I am working on A-Frame with a 3D model imported from Blender. Multiple meshes of this model have 2 or more materials assigned to them.

I can change the material properties of meshes that have only 1 material

However, when it comes to changing the material properties of meshes that have more than one material, I run into the following problem:

"Uncaught TypeError: Cannot set properties of undefined (setting 'opacity')"

The code I am using is the following:

    <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>

I was assuming the solution was going to be as simple as treating the materials as an array, but it didn't work:

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

I have also searched how to iterate between the id's of materials but I have not been successful.

Could someone help me understand how I can access the 2,3,4,n materials?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与酒说心事 2025-01-20 01:53:24

每个网格节点应该只有一种材质。因此，您可能应该按材质名称进行搜索，并修改匹配的内容：

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>

Each mesh node should have only one material. So you should probably search by the material name, and modify the ones that match:

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

I remember doing something similar - check it out here. Knowing the material name, you can modify its properties (like here):

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

回复收藏 0 原文

~没有更多了~