1

I have a component in react that renders a .glb model using useGLTF, let's call it 3DComponent

But the component reloads the model every time a link is performed to it

Is there a way for 3DComponent to use the same model loaded in the previous render?

The way this component is declared is:

export default function Model({ ...props }) {
==> const { nodes, materials, animations } = useGLTF('/studio.glb');

    const group = useRef();
    const { actions } = useAnimations(animations, group);
    ...
    ...

Every time it renders it performs useGLTB, but I can´t condition useGLTB since it's a hook and can't be conditioned without a compile error

What could I do to avoid reloading the model for every other render?

Thanks in advance

Rafael

Rafael
  • 2,413
  • 4
  • 32
  • 54

1 Answers1

0

I believe this hook is design to be used like that, the re-rendering should not affect your performance.

Epiczzor
  • 377
  • 2
  • 13
  • But, when I switch back to it (I'm using react-router-dom to link to pages), it takes like a couple of seconds to show again, I think it is reloading. I want it to show immediately since it's already loaded the first time I showed it – Rafael Feb 17 '22 at 13:22
  • How long is it taking right now ? does it wait to re-download the model ( Check your network tab in the logs to see what is the behavior right now) ? Ideally the only time it takes from then is to render it, which is determined by how expensive your 3D Model is and how good are the specs of the computer, – Epiczzor Feb 21 '22 at 10:51
  • maybe, it's only the time that it takes to display what's already is in the virtual dom, I don't know. I'll check the network tab, and let you know, ok? – Rafael Feb 21 '22 at 16:11