This software was created using Vibe Coding by a Large Language Model LLM / chatbot
and reworked in look & feel.
Some features had to be implemented manually and
corrections and improvements had to be made.
The following Vibe Coding prompts were used on DeepSeek:
"I want to create a single page websites with 3d animation using three.js. The animations should be
satisfying for people. give 8 ideas"
"create the full implementation of a single webpage using three.js for the Interactive Solar System"
"put it all in one file and use this import map {
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.151.3/build/three.module.js",
"OrbitControls": "https://cdn.jsdelivr.net/npm/three@0.151.3/examples/jsm/controls/OrbitControls.js"
}
}"
"all the planets move into the sun they do not circle around"
"add the moons to the planets"
"add the rings to Saturn. add a fixed legend with all planets below the three.js canvas. Use another
three.js canvas for the legend. When a planet on the legend is clicked, enter the follow mode. In follow
mode zoom to the clicked planet in the solar system and have the camera follow the planet and look
towards the sun. when the user clicks on the solar system stop the camera follow mode."
"the follow mode Does not work attach the camera to the selected planet so it moves with it. Also
change the legend and add the planets images as well."
"Instead of actively moving the camera in follow mode could you instead create a camera for each planet
that is grouped with the planet and automatically moves with it. In follow mode just switch to the
planets camera."
"make sure the sense only takes the space above the legend. add a button that enters fly mode. In fly
mode the camera starts at the outer planet and flies towards the sun I circles so it passes all the
planets in a fly by."
"In fly mode you do not need to always look towards the sun. Let the camera start at the most outer
planet and pass all the planets until the camera reaches the inner planet. Also add two other buttons
one for. horizontal mode and for vertical mode. In horizontal mode turn the color system horizontally
and vice vercy. When the horizontal or vertical mode is clicked zoom towards the sun so it fills the
whole screen then zoom slowly out until all planets are in view."
"for the horizontal and vertical mode do not move the camera just use the orbit controls to have the
view look vertical or horizontal on the solar system. remove the zoom from the horizontal and vertical
modes. In fly mode do not jump from planet to planet instead smoothly fly from planet to planet. Also do
not light the Saturn ring. Instead let the sun cast the correct shadow on the ring."
"you removed all the light, bring it back. Just cast a shadow on the Saturn ring. The modes all do not
work."
"the planets are all dark. The modes do nothing."
"sat2.html:226 Uncaught TypeError: controls.rotateTo is not a function"
At this point, a new chat session was started and the existing code was used as the first prompt.
"make sure the planet speeds are realistic."
"also update the moon speeds and add a slider that lets control the overall speed of the animation"
"the earth moon should revolve around the earth about 12 times when the earth revolves around the sun
one time but it revolves about 5 times. Check all the planet and moon speeds."
"reimplement the fly mode and let the camera fly by each planet one by one smoothly and slowley"
"in fly mode make the transition from on planet to the next smooth by animating the lookout point
between the two consecutive planets. also make sure that in each mode I can press the buttons and
immediately leave the current mode and got to the selected mode. Also make sure I can leave the planet
selection mode because right now I can not leave it once a planet is selected."
"make the transition from one planet to the next smooth. Right now it stops abruptly. Also highlight
the planet that is passed in the legend."
"In fly mode make sure each planet gets a closeup also stay a bit longer at each planet and make the
overall animation of the fly mode slower"
