Hello there! I am new to Three.js and I am tying to build some kind of landscape that will be a landing page to direct to different poetry-pages (that are not build with Three.js). I have been working on this quite some time but now that I am almost ready to share the first “episode” it feels as if I missed a lot of stuff since the website really heats up my computer. Initially I had more moving pointlights that I’ve now removed because it seemed to help and those weren’t as essential. How do more professional sites handle their code? I would minify everything once I am sure of everything but I doubt that would help my fans blowing this hard. I would like to add more objects to the scene in the future but if it gets heavier the page is not really accessible…
https://scammingtime.org/fullscene.html
So help me out, what am I missing? What don’t I know and should I know?
Thank you!
Minifying your code will help the site to load faster but probably won’t do anything for performance.
If you don’t know already, this is probably good time to learn how to profile you app in the browser dev tools. For example, it looks to me like you might be calling render in the animation loop and also whenever the user clicks and drags with the mouse.
Thank you for your answer, I didn’t know that about minifying!
I checked developer tools already and yes, I am calling render in the animation loop because the squares in my scene need to keep animating. I thought it was necessary to have an animation loop with render() in it for constantly animated objects in your scene? And also, within that loop I have added a function to constantly check intersection for a hover effect.
You are right: I was calling render onchange of my controls, that was not necessary. I forgot to comment that out but still my problem occurs…
You need to keep profiling to identify which parts of your app are taking a long time and fix all of them.