How to use gltfjsx to create a jsx file to load a glb file but change material colors from each call to the transformed file/model?

Question

The best example is this sandbox

https://codesandbox.io/p/sandbox/re-using-gltfs-forked-nl2mm9?file=%2Fsrc%2FApp.js%3A18%2C1

It loads a glb model within a function that allows the properties to be dynamically changed from each call... Change the colors to two colors that are very different (blue and red) and both models will show up red (whatever is last).

Even added a debug console.log to show the prop.colors are being received, however they are only taking whatever the last color was used.

gltfjsx creates this file

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const { nodes, materials } = useGLTF('/shirt_baked.glb')
  console.log(props.color)
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.T_Shirt_male.geometry} material={materials.lambert1} material-color={props.color} />
    </group>
  )
}

useGLTF.preload('/shirt_baked.glb')

Which pulls in the color from the passed props... from their call in App.jsx

import { Canvas } from '@react-three/fiber'
import { BakeShadows, OrbitControls, Stage } from '@react-three/drei'
import Shoe from './Shoe'
import Shirt from './Shirt'

export default function Viewer() {
  return (
    <Canvas shadows camera={{ position: [0, 0, 150], fov: 40 }}>
      <Stage environment="city" intensity={0.6}>
        <Shirt color="blue" position={[0, 0, 0]} />
        <Shirt color="red" scale={-1} rotation={[0, 0.5, Math.PI]} position={[0, 0, -2]} />
      </Stage>
      <BakeShadows />
      <OrbitControls makeDefault autoRotate />
    </Canvas>
  )
}

Which seems like it should work and the console.log shows alternative red/blue...

Is there a better way to load the same model once and then be able to change ALL the properties including the material colors? I assume it is because react 3 fiber doesn't really load a model twice? and/or doesn't keep them separated...

Thanks for the negative vote, please let me know how could I have improved this question? The code I posted is located in quite a few places with the distinct verbiage that it should create 2 different color models, which the code does not... I was simply trying to find a way to do that. — Biaspoint
– Biaspoint, Commented Aug 29 at 20:26

Biaspoint · Accepted Answer · 2025-08-29 01:21:47Z

-1

The materials need to be separated within the function call...

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const { nodes, materials } = useGLTF('/shirt_baked.glb')
  return (
    <group {...props} dispose={null}>
      <mesh geometry={nodes.T_Shirt_male.geometry} material={materials.lambert1}>
        <meshLambertMaterial color={props.color} />
      </mesh>
    </group>
  )
}

useGLTF.preload('/shirt_baked.glb')

answered Aug 29 at 1:21

Biaspoint

5813 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to use gltfjsx to create a jsx file to load a glb file but change material colors from each call to the transformed file/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