Loading Models only when needed?

[oak pagoda]

Hi everyone,

I'm working on a 3D fashion editor. We're loading exactly one model into the scene and allow users to customise it.

To build this, I set up a scene and am loading the model based on the URL (i.e. there's a ModelProvider component on the Canvas that checks the URL and then either loads the regular sweater or the oversized model, etc).

While this is working as it should on a functional level, I did notice that it comes with a large network payload because the ModelProvider loads all 26 models in the background.

I recently posted about this problem on the forums. Please have a look at this thread to see my code and read some details about the approaches I've tried to solve the problem: https://discourse.threejs.org/t/lazy-loading-glb-files-on-as-needed-basis/55457

Since there are no responses on the forums yet, I was hoping that maybe someone here had an idea about how this can be restructured to load more efficiently.

Thank you!

• Daniel

[urban phoenix]

it looks like you're using next.js
in the react-three-next template they dynamically import like this:
const Thing = dynamic(() => import('@/components/canvas/Thing').then((mod) => mod.Thing), { ssr: false })