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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.