Rotate planets on several orbits at different speed

Question

I'm writing a simple solar system using Three.js. At this time I have added 3 planets, every planet is rotating on its axis. At the middle I have added the sun.

For every planet I create a different group (mesh);
All the planets are in a main group (Object3D);

I can:

rotate every planet on its axis (using planet object/group);
rotate every planets on theirs orbits (using main object/group).

The problem is that when I make a rotation in the main group of for example 1, every planet is moving by 1. For example:

enter image description here

If I rotate a planet by 180 degrees, every planet is rotating by 180 degrees on theirs orbits. So how can I rotate every planet with a different speed?

I suppose that don't need the main group and I must write an algorithm and use it for every planet, but I don't know how algorithms like that works. Can somebody help me?

Important parts of code:

... main loop:

function loop() {
    jQuery.each(planets, function( key, value ) {
        value.rotation.y += 0.005;
        value.rotation.x += 0.005;
    });

    group.rotation.z -= 0.005;

    requestAnimationFrame( loop );
}

... adding a planet:

var data = {
    0: {
        texture:  "images/telos.png",
        radius:   10,
        segments: 20
    },
    1: {
        texture:  "images/ako.png",
        radius:   8,
        segments: 20
    },
    2: {
        texture:  "images/alba.png",
        radius:   21,
        segments: 20
    }
};
var planets = {}
jQuery.each(data, function( key, value ) {
    var planet = creator.planet({
        texture:  value.texture,
        radius:   value.radius,
        segments: value.segments
    });
    planet.position.set( key * 60, 0, 0 );
    planets[ key ] = planet;

    group.add( planets[ key ] );
});

Any tips?

It's just an object with planets informations. I have edited the main message. — user2518044

Damien Black Damien Black · Accepted Answer · 2014-02-19T22:25:08

This line:

value.rotation.y += 0.005;

Is the key. Here is where you are rotating all of the planets by the same angle per 'tick'. Is you want different speeds, each planet needs to hold a different speed value, so first:

var planet = creator.planet({
    texture:  value.texture,
    radius:   value.radius,
    segments: value.segments,
    speed:    value.speed
});

Then you need to access that value:

value.rotation.y += value.speed;

Then make sure to send in a speed value when you create the planets.

If you want actually realistic values of speed, they can be calculated from the radius using Kepler's laws of planetary motion. The ratio is inverse square, so you could do something like this:

var planet = creator.planet({
    texture:  value.texture,
    radius:   value.radius,
    segments: value.segments,
    speed:    1/(value.radius*value.radius) * 100 //change 100 to taste
});

Rotate planets on several orbits at different speed

1 Answers