so I recently created this project to render a 3D model. But when I deployed it to netlify, it took some time (40s to 1min) for the 3D model(s) to actually fully load while other stuff in the background was already fully loaded ( only took 2s). Then the model is fully loaded, and if I refresh the page, close the browser and redeploy the project again, it would load much quicker (about 2-3 seconds). any suggestion on what I should do? or is this normally how 3D models render on production?
Files over ~5MB are not cached by CDN nodes and are instead served from the origin server. The further away from the server a visitor is, the longer it will take to load.
I realise you need/want high-quality image data for the rendering. It is possibly a better idea to render the 3D models before deploying, but take note of the file size still. If you still wish to render with the current method, have a look at image optimisation tools to try reducing the file size of each image without sacrificing quality.
JPEG are lossy, PNG are lossless. There is a definite advantage in JPEG as the filesize is smaller, but quality will decrease, though there are various levels. There is also WebP which can reduce filesize without the loss of JPEG. Image dimensions also play a big part as well as colour and complexity of detail.
There are tools such as Sqoosh (also has a CLI) which is worth exploring in terms of image compression/format.
Sorry to spam on your answers, I reduced the images from 17MB+ to roughly 2MB. It seems a lot faster but still takes quite than usual time to load the model. what you said " better idea to render the 3D models before deploying" could you dumb it down for me This is literally the first time I am deploying this type of application in production so I am not familiar with what you meant by that. Much appreciated. (P.S again reducing the image size helps a lot already, I am just looking to see if I could further improve the load time)
My knowledge and understanding of three.js is limited.
Looking at the examples they all use .glb files. The Littlest Tokyo example with all the detail it contains (including animation) is only around 4 MB.
The biggest difference (from what I can see with a somewhat untrained eye) is you are mapping specific sections of multiple JPEG images to the various parts of the rendered model whereas Littlest Tokyo uses binary data (looking at a .glb file most of it is simply text) to render the model onscreen.
More specific advice on how to make/render your model in such as way I cannot provide.
Thank you so much. That is very helpful and it is enough.
Updates: converted .glft to .glb, the load time is still the same (roughly 3s) but I think it might be because I duplicate (clone) each model 3x and I have 3 different models so That is probably why it took 3s. But it is much much better than before where it took about 1 minute to load. Thank you so much @coelmay for all the suggestions. I am about to split my head open but you just save me from doing that (sarcasm) lol
This is literally the first time I am deploying this type of application in production so I am not familiar with what you meant by that. Much appreciated. (P.S again reducing the image size helps a lot already, I am just looking to see if I could further improve the load time)
! Thanks for the suggestions,