Dynamically change textures in three js for imported gltf model

Question

No matter what I do, I cannot get a texture to update after importing a GLTF model using react-three fiber.

const { nodes, materials } = useGLTF("/glb4.glb");
const newtexture = useLoader(TextureLoader, "texture1.jpg");
newtexture.flipY = false;

Now I can do

let newmaterial = new THREE.MeshPhysicalMaterial({ map: newtexture});

to import it into the scene with

<mesh
    geometry={nodes.Body_Front_Node.geometry}
    material={newmaterial}
  />

However it results in a grey material without the texture. Even modifying the original gltf material with the new texture gives the same result.

Is there a way to update the texture of a gltf mode dynamically? Here is the full codesandbox: https://codesandbox.io/p/github/Mazzz-zzz/fabrigen/main?file=%2Fsrc%2FApp.js

score 0 · Answer 1 · answered Mar 13 '23 at 18:21

You can try rendering meshStandardMaterial under mesh as follows and provide newmaterial as map prop to meshStandardMaterial. That worked for me. -

  <mesh geometry={nodes.Body_Front_Node.geometry}>
    <meshStandardMaterial map={newmaterial} />
  </mesh>

Dynamically change textures in three js for imported gltf model

1 Answers1