Mechanics
Render
Before anyhing can be seen the scne has to be rendered. The Render is built using THREE js. Ìf you want to see how the code works, look at the image below.
Making the planets
To render the planets you first have to make them. I made the planets by first determining the size of the planets and the distance from the sun. After that, I made the spheres and applied the textures I had. Finally I placed them in the scene. The planets are now in the scene, but not in the right location. With a little math, I fixed that and now they are on the right track.
If you are interested in how the code works have a look at the pictures below.
Update
Now that the planets are in place, the camera also need to be in place. After putting the camera on its place, it was time to make the planets go around the sun. I made a function that makes updates for everything. I made some calculations on how the planets needed to go around the sun and put them in the update function. Now the planets are spinning around the sun.
Functions
Last but not least, I made the Functions so everything works and the update is called.
The distanceVector function is responsable for calculating the distance between 2 objects.
The fillRingArray function is responsible for making the rings and setting them on the right place.
The addEventListner function is responsible for detecting keyboard input.
Finally we call the animate function to start the whole program.
Now the whole program is done.
Github Page
If you want to see the full project pleas click the link down below to go to the project github page
Github Link