Three.js - Rotating a sphere around a certain axis

Question

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 1

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

Answer 2

You need to use quaternions for this. This video explains what quaternions are and how they are used in 3D graphics.

You can construct a quaternion like this:

quaternion = new THREE.Quaternion().setFromAxisAngle( axisOfRotation, angleOfRotation );

Then you apply it to your object by:

object.rotation.setEulerFromQuaternion( quaternion );

You can also achieve this by using object hierarchies. For example, you can make an Object3D() instance and tilt it by 23.5 degs, then create a sphere (Earth) and add it to the tilted object. The sphere will then rotate around the tilted Y axis. Quaternions however, are the best tool for solving this.