Simple solar system with three.js

I have to create a small solar system (1 star, 2 planets, 1 moon orbitating per planet) with three.js This is my first time programming something with three.js (and JavaScript in general) so I'm a complete newbie.

I managed to create my static system, so that I have the Sun, Mars, Phobos, the Earth and the Moon.

Now I have no idea how to make the planets orbit around the Sun, and the moons orbiting around their planets.

This is what I've done so far

 //global variables declaration function init(){ /*starting code: cameras, declaring variables and so on*/ function celestialBodiesSetup(){ var geometry,material,image; var celestialBodies=[sun,mars,phobos,earth,moon]; //sun, mars etc are declared as global variables before the init function for(var i=0;i<celestialBodies.length;i++){ switch (celestialBodies[i]){ case sun: material=new THREE.MeshPhongMaterial(); geometry =new THREE.SphereGeometry(35,32,32); image="mysun.png"; sun=createSphere(geometry,material,image); sun.position.set(0,0,20); var pointLight = new THREE.PointLight( 0xFDFDFD, 2, 1800,70 ); sun.add(pointLight); break; case mars: material=new THREE.MeshPhongMaterial(); geometry =new THREE.SphereGeometry(17,32,32); image="mars.jpg"; mars=createSphere(geometry,material,image,sun); mars.position.set(150,-15,0); break; /*repeat process for the remaining celestial bodies*/ function createSphere(geometry,material,image,celBody){ var sphere = new THREE.Mesh(geometry, material); material.map= THREE.ImageUtils.loadTexture(image); if(celBody) celBody.add(sphere); /*I set that all the planets are added to the sun, and all the moons are added to their planet. Only the sun is added to the scene itself*/ else scene.add(sphere); return sphere; } celestialBodiesSetup(); } 

At this point I have to work on the animate() function but I have no clue about vectors, rotations and so on.

Only thing I can do is setting something like earth.rotation.y+=0.1 so that the planet starts rotating on its axis, but that's it.

2 Answers

why don't you try out the

case study, this is good plus there are lots example on the

For good reference to threejs library starter go on with the sample visualization

At the abstraction level of the library interface these tutorial could help you to make the project. You need to spent time on the rotation vector, quaternion and shader to get in-depth.

You can also look into the unity 3d engine to built a quick overnight prototype for your stuff to get stuff for demonstration.

I did something similar and accomplished the rotations and orbits with the following:

//Earth rotation and orbit earthMesh.rotation.y = Date.now() * -0.001; earthMesh.position.x = Math.sin( Date.now() * 0.001 ) * 219.15; earthMesh.position.z = Math.cos( Date.now() * 0.001 ) * 219.15; //Moon rotation and orbit moonMesh.rotation.y = Date.now() * -0.001; moonMesh.position.x = Math.sin( Date.now() * 0.001 ) * 219.15 + Math.cos( Date.now() * -0.007 ) * -10; moonMesh.position.z = Math.cos( Date.now() * 0.001 ) * 219.15 + Math.sin( Date.now() * -0.007 ) * -10;