How to assign material to GLTF react-three-fiber

user_14334195 0
Viewed 1442

I have managed to load a gltf object into my react-three-fiber scene. Now I want to attach a material to my model. Is it possible to use standard material on this model? Here's what I tried:

const Shape = (props) => { const gltf = useLoader(GLTFLoader, GLTFfe)

    const material = new THREE.MeshStandardMaterial({
          color: 0xff0000, 
          transparent: false, opacity: 0.5
     });

    const object = new THREE.Mesh(gltf, material)

    return <primitive object={object.scene} position={[0, 0, 0]} />
  }
gltf react-three-fiber three.js reactjs object
2 Answers

Is it possible to use standard material on this model?

MeshStandardMaterial is the default material when loading objects with GLTFLoader. You probably don't have to create a new material but just modify the existing ones.

Since a glTF asset always consist of a hierarchy of objects, you need to do this:

gltf.scene.traverse( function( object ) {

    if ( object.isMesh ) {

        object.material.color.set( 0xff0000 );
        object.material.transparent = true;
        object.material.opacity = 0.5;

    }

} );
user_52508470
user_143341950
Related