I have a functional react component and initial load a gltf model - the path gets passed through the props - this works fine.
But if the props change the component rerenders - I checked that - the path is changed and a new Model should be loaded - but I does not.
How can one achieve this?I want to swap/replace the object that is rendering if the state is updated.
I tried different loaders, set the gltf it self as a state but none of this wokred. I think I miss an underlying concept. Pls Help
function Character(props) { const spinner = useRef(); console.log(props.model, "from modelpreviewer"); const gltf = useLoader(GLTFLoader, props.model); return gltf ? ( <primitive ref={spinner} object={gltf.scene} /> ) : null; }The Character Component is rendered like this:
<Canvas camera={{ position: [0, 0, 10] }}> <ambientLight intensity={0.8} /> <spotLight intensity={0.7} position={[300, 300, 400]} /> <Suspense fallback={null}> <Character model={props.model} /> </Suspense> </Canvas>1 Answer
I test the problem of useLoader when render the texture and it works fine to me.
This a simple example which shows the texture will change whenever the props changed.
I guess you're miss the correct path point to props.model. Maybe you can hard code a value of props.model to make sure the file path is correct or not.
Edited
I find the reason why gltf just render once. The answer is here.
You can't reuse meshes or put the same object into the scene twice in webgl/threejs, it will just unmount and remount.
An alternatively solution is to clone the scene.
const { scene } = useLoader(GLTFLoader, url)
const copiedScene = useMemo(() => scene.clone(), [scene])I also provide a fixed example on codesandbox.
7
