I'm working on an interactive educational platform using Next.js, Three.js, and a custom backend. The biggest challenge I'm facing right now is optimizing the loading of multiple 3D models during lessons. I have a few questions:
• Would it be better to lazy-load everything?
• Is preloading assets a poor choice?
• What caching strategies do you recommend? I'd love to get insights from anyone with experience in this area!
1 Answer
Are you using React Three Fiber? If not, one great approach is to store your assets in the public directory, which will help with standard web caching. Consider using GLB/GLTF files with the useGLTF hook from Drei for easier management. This method simplifies the process significantly. I recently did something similar with Vite and imported JSON/GLTF directly for type-safe scene data.
No, I’m actually using vanilla Three.js with GLTFLoader. I’ve got my GLB files in the public directory for caching, and I'm also using DRACOLoader for compressed models. I opted for the vanilla approach since I wanted more control over animations using GSAP and custom raycasting. My setup is pretty streamlined!