An interactive video of the earth-sun system explaining our definition of days

First time posting a project here. I build interactives for educational purposes under the project name “Minute Labs”.



Just stumbled on your post. Nice to see what other people are doing. This is a great usecase for threejs! Gonna take a closer look when I have a little more time. The only thing I noticed right away is that it takes a pretty long time to load between each page. I think that could be decreased quite a lot by some optimisation here and there. And I’m interested (without diving into the code): why do you use the CSS renderer next to the WebGL renderer?

Keep up the great work!

I used css renderer in order to show the labels and more easily change the text in them. I used vue.js to assemble everything, and it may have been a bit complicated, and unoptimal at times, but in some cases makes things easier to code and update.

If you have optimization suggestions, i’m very open to them. I’m still wrapping my head around working with Three.js

There are different ways to optimize things, but these are mostly not threejs specific. I see you already did some great optimizations yourself already, like using chunks and minimizing, which is great. Just after a quick look I think I would start by not re-loading everything while moving to another page, but make everything a single page and use the same three instance to just change the objects in it. But please understand, this was only my view on it and what came to my mind on first view. Do whatever you like. If you think it’s fine it’s fine! :slightly_smiling_face:

1 Like