I'm currently developing an interactive educational platform that uses Next.js, Three.js, and a custom backend. The challenging part for me is optimizing the loading process for multiple 3D models in my lessons. I'm wondering if I should implement lazy loading for everything, whether preloading the models is advisable, and what caching strategies you would recommend. I have a link in the comments where you can test the beta performance.
2 Answers
Have you considered using R3F (React Three Fiber)? It allows you to put your assets in the public directory, which helps with web caching automatically. I suggest using GLB/GLTF formats together with the useGLTF hook from Drei for easier handling. It's often the simplest solution, but if you import directly, you can get more control over your assets. Recently, I worked with a Vite setup, where using JSON/GLTF gave me type-safe access to scene data.
I'm not using R3F either. Instead, I'm sticking with vanilla Three.js and utilizing GLTFLoader for my models. I keep the GLB files in the public directory for browser caching. I'm also using DRACOLoader for compressed models and FBXLoader as a backup. My scene setup involves THREE.Scene and THREE.PerspectiveCamera components along with OrbitControls. vanilla Three.js gives me extra control for animations and custom raycasting.
Related Questions
How To: Running Codex CLI on Windows with Azure OpenAI
Set Wordpress Featured Image Using Javascript
How To Fix PHP Random Being The Same
Why no WebP Support with Wordpress
Replace Wordpress Cron With Linux Cron
Customize Yoast Canonical URL Programmatically