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 :

Rotating angle

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

Unitech · Answer 1 · 2012-12-02T06:27:08.973

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

edited Dec 02 '12 at 06:27

answered Nov 30 '12 at 17:17

Unitech

5,781
5
40
47

score 0 · Answer 2 · answered Nov 30 '12 at 15:55

0

Have you tried?

function animate() {

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

}

answered Nov 30 '12 at 15:55

TalesTk

181
3

Nop it does a strange movement at the end of the rotation I linked the solution on the next post – Unitech Nov 30 '12 at 17:23

score 0 · Answer 3 · answered Feb 19 '14 at 00:47

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.

Inclined rotation between an object in Three.js

3 Answers3