How to assign material to GLTF react-three-fiber

[bolti95]

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

[gsimone]

If you need to change things after loading your gltf, consider converting it to jsx with gltfjsx https://github.com/pmndrs/gltfjsx

[bolti95]

This has worked perfectly, thank you. Although, in the docs it asked for the model to be in the public directory, this is working in my src/components directory. It was not able to recognise my model in public

[drcmda]

it depends on your bundling env. some bundlers require you to write out /public/model.glb some just /model.glb. it can only be part of your src folder if you import it, in which case urlloader will receive a hashed url - which is fine.

[drcmda]

adding to what @gsimone said,

GLTFLoader gives you an object that contains { scene, ... }, r3f adds { nodes, materials }. you're then trying to construct a mesh, which takes geometry and a material with that arbitrary loader object. you also do that smack in the middle of the render function which isn't good.

Either color stuff in blender and use it as is

Can be OK.

const { scene } = useLoader(GLTFLoader, url)
return <primitive object={scene} />

Pick out stuff and render it any way you want

Can be OK, usually not recommended bc you loose transforms.

const { nodes } = useLoader(GLTFLoader, url)
return (
  <mesh geometry={nodes.robot.geometry}>
    <meshStandardMaterial color="#ff0000" transparent opacity={0.5} />
  </mesh>
)

Mutate the material directly

Mutation is usually bad, would not recommend. 👎

const { scene, materials } = useLoader(GLTFLoader, url)
useMemo(() => {
  materials.someMaterial.color.set("#ff0000")
  materials.someMaterial.transparent = true
  materials.someMaterial.opacity = 0.5
}, [materials])
return <primitive object={scene} />

Use gltfjsx, everything is under your control

Usually your best option to always use it. 👍

[bolti95]

hi @drcmda , I used gltfjsx and it's worked well. You've mentioned my structure isn't good, is that referring to where the mesh is in my previous functional component? Can I ask why is this a bad thing to put it in the middle of a render function? I'm still quite a newbie with React.js & r3f , thanks :)
** I missed some of your comment, is this because I mutated directly? Why is that bad practice?

This is how I put my material in using gltfjsx:

export default function Model(props) {
  const { nodes } = useGLTF('models/FEshape.glb')
  return (
      <mesh material={nodes.pTorus1.material} geometry={nodes.pTorus1.geometry}> 
           <meshStandardMaterial
              attach="material"
              color="white"
              roughness={0.3}
              metalness={1.0}
         />
      </mesh>
  )
}

I put the Model component into my scene like:

            <Suspense fallback={null}>
                <Model /> 
            </Suspense>

[drcmda]

thats correct.

as for your previous code, you should not have any of the following in your render function

side effect

❌ fetch(url).then(...)
✅ useEffect(() => fetch(url).then(...), [url])

object creation

❌ const foo = new Foo()
✅ const [foo] = useState(() => new Foo())

mutation, if you absolutely must

❌ foo.bar = 123
✅ useMemo(() => foo.bar = 123, [])