How to optimize graphics in three js?

Question

JavaScript

Wondering how to optimize graphics in 3d applications? Now I made a simple scene on which I made a lot of stars (I made stars from spheres, maybe someone has other suggestions? stars are points, so the sphere, of course, I think is too redundant) The total is about 500 spheres. + spheres constantly change their size and color. In general, even now there is some slowdown. Who knows how to optimize this whole thing and what good practices there are.
What problems do I see? Firstly, now when creating a scene, all the stars that are needed now and that will be needed later are drawn at once. (in the future, you need to move through them, so I draw all the stars at once). How correct is this and what is another solution? Simply, if you draw them later, then there will be a problem with the transition to other stars.
2. Again.. I change the parameters of visible and invisible stars. I also think that no one does it =) But I don’t see an effective way and a convenient way to change the parameters of only those stars that are in the field of view.
Can you please tell me how to solve these problems?

Answer 1

1.Firebug and CromeDevTools - we look at resource consumption.
2. Without a code, it is impossible to say anything for sure.
3. "how to optimize graphics in 3d applications" - in different ways. you can also write in pure WebGL)
4. "so the scope, of course, I think it's too redundant" - rewrite look in the profiler.
5. "But I do not see an effective way and a convenient way to change the parameters of only those stars that are in the field of view" - the camera is looking somewhere. you just need to determine what gets into the camera and what does not.