I am currently working on creating a solar system animation using Three.js. So far, I have successfully added 3 planets, each rotating on its own axis. In the center, I have placed the sun.
- Each planet is represented by a separate group (
mesh); - All the planets are contained within a main group (
Object3D).
As of now, I am able to:
- Rotate each planet on its own axis (using the planet object/group);
- Rotate all the planets along their orbits (using the main object/group).
The issue arises when I rotate the main group by an angle, say 1, causing every planet to move by the same angle. For instance:
If I rotate one planet by 180 degrees, all the planets rotate by 180 degrees along their respective orbits. How can I make each planet rotate at a different speed?
I believe that I may not need the main group and instead should write a specific algorithm for each planet, but I am unsure how such algorithms operate. Can anyone provide guidance?
Main parts of the 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 suggestions or tips?