使用 FBX 加载器更改 React 三纤维中的材料答案

【问题标题】：Change Material in React Three Fiber using FBX Loader使用 FBX 加载器更改 React 三纤维中的材料
【发布时间】：2021-03-10 10:36:40
【问题描述】：

我正在尝试更改我导入的 FBX 文件的材质。我可以轻松更改已附加到我的 FBX 文件的材料的属性，但我无法将材料更改为我预定义的“matAluMedium”。我以前在另一个项目中这样做过，但不知道这次我做错了什么。

希望你能帮忙

init();

function init() {
  const cubeTexureloader = new CubeTextureLoader();

  envMap = cubeTexureloader.load([
    "assets/models/textures/envMap/px.jpg",
    "assets/models/textures/envMap/nx.jpg",
    "assets/models/textures/envMap/py.jpg",
    "assets/models/textures/envMap/ny.jpg",
    "assets/models/textures/envMap/pz.jpg",
    "assets/models/textures/envMap/nz.jpg",
  ]);

  matAluMedium = new MeshStandardMaterial({
    color: 0x98720b,
    roughness: 0.2,
    metalness: 1,
    envMap: envMap,
  });
}

function newFBX(props) {

  const fbx = useLoader(FBXLoader, "assets/models/" + props.path + ".fbx");
  fbx.traverse( function ( child ) {
    if ( child instanceof Mesh  ) {

      child.material = matAluMedium;
    }
    
  } );

  return 
        (<mesh>
          <primitive object={fbx} dispose={null} />
        </mesh>)
};

【问题讨论】：

路径是否正确，您确定收到“fbx”吗？你试过console.log吗？你正在遍历它的孩子并且你改变了材料，我从来没有使用过 fbx，但我不明白它是如何工作的。除此之外，我建议使用 gltf 和 gltfjsx 工具。遍历和变异是不好的，并且能够以声明方式写出场景会产生很大的不同。
路径是正确的，我可以看到我的对象带有 fbx 提供的默认材质。我记录了它，并分配了正确的材料，但它在我的画布上不可见......有没有关于如何使用 gltf 的好教程？我无法让它工作，而且大多数简单的沙盒示例也不起作用。

标签： reactjs three.js fbx react-three-fiber

【解决方案1】：

所以我做了一个解决方法来解决我的问题。我不知道为什么，但是当我用“foreach”替换“traverse”时，它可以工作。然而...？也许有人可以解释一下原因。

这是我的工作代码：

const fbx = useLoader(FBXLoader, "assets/models/" + props.path + ".fbx");
fbx.children.forEach((mesh, i) => {
  mesh.material = matAluBright;
});

【讨论】：