Three.js - Rotating a sphere around a certain axis

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


var quaternion = new THREE.Quaternion();
var object = scene.getObjectByName('xxx');
function render(){
    quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0).normalize(), 0.005);
    object.position.applyQuaternion(quaternion);
}

three.js version is 86, see full example on codepen.


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.set( new THREE.Euler().setFromQuaternion( 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.