Three.js - Rotating a sphere around a certain axis

javascript vector rotation three.js axis
karlosss picture karlosss · May 1, 2013 · Viewed 27.8k times · Source

I have a problem. In Three.js, I want to rotate a sphere (Earth) around axis tilted by 23.5 degs. I found sphere.rotation.x, sphere.rotation.y and sphere.rotation.z, but when I combine them in the correct ratio, the sphere's rotation is quite weird - it has no permanent rotation axis. I think I need a function like sphere.rotation.vector(1,0,-1). Does anyone know how this function is called and how the correct syntax is?

Many thanks for answers!

Answer

WestLangley picture WestLangley · May 1, 2013

You do not have to understand how Euler angles or quaternions work to do what you want. You can use

Object3D.rotateOnAxis( axis, angle );
Object3D.rotateOnWorldAxis( axis, angle );

Make sure axis is a unit vector (has length 1), and angle is in radians.

Object3D.rotateOnAxis( axis, angle ) rotates on an axis in object space.

Object3D.rotateOnWorldAxis( axis, angle ) rotates on an axis in world space.

three.js r.104

Related questions

How to rotate a Three.js Vector3 around an axis?

How to rotate a Three.js Vector3 by a certain angle around an axis?

Read More
How to draw a vector path progressively? (Raphael.js)

How to animate a vector path like it's being drawn, progressively? In other words, slowly show the path pixel by pixel. I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming …

Read More
Three.js: Get the Direction in which the Camera is Looking

I'm creating game in using html5 and THREE.js, and I have a camera that rotates with the euler order of 'YXZ'. This is so the camera rotation up, down, left and right like a head. As in first person …

Read More