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

Omkar Rajam · Accepted Answer · 2023-03-13 18:21:33Z

0

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>

answered Mar 13, 2023 at 18:21

Omkar Rajam

7917 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically change textures in three js for imported gltf model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related