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 plete 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.

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 plete 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.

• javascript
• vector
• three.js

• 3 Is this an assignment you are supposed to do yourself? – WestLangley Commented Mar 23, 2016 at 16:57
• Please use spaces and new lines. For both your sake and ours. – Thomas Francois Commented Mar 23, 2016 at 16:59
• It's an exercise I'm doing and since my professor always makes questions about vectors I thought this would've helped me, instead it's driving me crazy @WestLangley – someCoder Commented Mar 23, 2016 at 17:07

2 Answers 2

why don't you try out the

http://www.html5rocks./en/tutorials/casestudies/100000stars/

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

https://www.chromeexperiments./?q=solar%20

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

http://stemkoski.github.io/Three.js/

http://mrdoob.github.io/three.js/examples/canvas_geometry_earth.html

http://oos.moxiecode./blog/index.php/experiments/javascript-webgl/

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 acplished 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;