Inclined rotation between an object in Three.js

Question

I'm trying to reproduce a solar system like in Three.js, but I don't manage to make planet rotate in an inclined way around the star :

Here is a fiddle sample but with the wrong rotation : http://goo.gl/MzcwI

I tried this solution : How to rotate a 3D object on axis three.js? without success.

If someone have a clue to help me, Thanks

Answer 1

I had to add an element at the root position of the pivot, it creates a sort of new plan that you can rotate.

Solution here .

jsfiddle

Answer 2

Have you tried?

function animate() {

  pivot.rotation.y += 0.01;
  pivot.rotation.x += 0.01;
  requestAnimationFrame(animate);
  render();

}

Answer 3

If you want to rotate just using the position vectors of the mesh you can simply do something like

theta = 0;/* Global variable */
function render(){ 

    orbiter = /* Get the planet you want to rotate*/;

    orbiter.mesh.position.x = Math.cos( theta ) *100;
    orbiter.mesh.position.z =  Math.sin( theta ) *25;
    orbiter.mesh.position.y  =  Math.cos( theta ) * -60;
    theta +=.02; 

    renderer.render( scene, camera );
}

function animate(){ animation_id = requestAnimationFrame( animate ); render(); }
animate();

Your going to have to play around with the values to get the desired rotation angles - especially for the position.y value. Increasing theta should increase the speed.