Warm tip: This article is reproduced from serverfault.com, please click

Change Material in React Three Fiber using FBX Loader

发布于 2020-11-27 16:39:16

I'm trying to change the material of my imported FBX-file. I can easliy change attributes of the material, that is already attached to my FBX file, but I can't change the material to my predefined "matAluMedium". I did this before in another project, but can't figure out, what I did wrong this time.

Hope you can help

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>)
};
Questioner
tinytree
Viewed
0
tinytree 2020-11-30 19:28:13

So I did a workaround to solve my problem. I don't know why, but when I replace "traverse" with "foreach" it works. However...? Maybe someone can explain me why.

This is my working code:

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