CODEWITHSUNDEEP
javascriptthree.js
shoes
shoes

Reputation: 25

Rotating earth on its axis

I am trying to rotate earth about it's tilted axis in three js. I found this solution, and I am trying to use it on my code, but it doesn't do anything.

When I execute this code the planet just sits there and doesn't rotate at all. I don't really have a firm grasp of what a quaternion is or how it works, so I am not sure what is going wrong.

function rotateAroundAxis(object, axis, radians) {
    var vector = axis.normalize();
    var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, radians);
    object.rotation = new THREE.Euler().setFromQuaternion( quaternion );
}

earthAxis = new THREE.Vector3(Math.cos(23.4*Math.PI/180), Math.sin(23.4*Math.PI/180), 0);

function render() {
    stats.update();
    step += 0.02;
    rotateAroundAxis(earth, earthAxis, step);
}

Upvotes: 1

Views: 1341

Answers (1)

WestLangley
WestLangley

Reputation: 104823

First, you need to tilt your sphere's geometry by 23.4 degrees by applying a transformation to it.

var radians = 23.4 * Math.PI / 180; // tilt in radians
mesh.geometry.applyMatrix( new THREE.Matrix4().makeRotationZ( - radians ) );

Then, to rotate your earth on its axis in object space, first normalize the axis you are rotating around.

earthAxis = new THREE.Vector3( Math.sin( radians ), Math.cos( radians ), 0 ).normalize();

Then in your render function, do this:

earth.rotateOnAxis( earthAxis, 0.01 ); // axis must be normalized

three.js r.69

Upvotes: 4

Related Questions