CODEWITHSUNDEEP
reactjsobjectthree.jsgltfreact-three-fiber
ib95
ib95

Reputation: 129

How to assign material to GLTF react-three-fiber

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]} />
  }

Upvotes: 3

Views: 4224

Answers (2)

ib95
ib95

Reputation: 129

I found a way, it's necessary to change things after loading your gltf, convert it to jsx with gltfjsx https://github.com/pmndrs/gltfjsx

Upvotes: 1

Mugen87
Mugen87

Reputation: 31086

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;

    }

} );

Upvotes: 4

Related Questions