React-Three-Fiber / How to replace textures of gltf file?

Viewed 12

Hello

I would like to replace all textures of my gltf file inside my react three fiber component.

What I did :

1/ I have used https://github.com/pmndrs/gltfjsx to generate a RTF file from my gltf

2/ I have passed the props (list of the files) to my react three fiber components.

export default function HeartGl(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF("/Heart.gltf");
  const { actions } = useAnimations(animations, group);

  return (
    <group ref={group} {...props} dispose={null}>
      {props.images.map((index, i) => {
          console.log(`./images/${myjson.images[index].name}`)
      } )}
      <group name="Scene">
         <mesh name="myPlane263Shape_Mash_heart_instancer_1" geometry=                                         
             {nodes.myPlane263Shape_Mash_heart_instancer_1.geometry} material= materials.aiStandardSurface3} 
              position={[-1.95, 11.86, -35.32]} rotation={[1.91, 0.91, -1.28]} scale={0.07} />

the tag <mesh ...> is duplicated 38 times (same number as the props.image ) as they are the ones I need to change.

I saw there is possibility to use gltf.scene.traverse( function( object ) { but I don't get how to use it with my configuration

0 Answers
Related