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 whe

Answer 1

You can rotate your sphere using th 'ObjectControls' module for ThreeJS that allows you to rotate a single OBJECT (or a Group), and not the SCENE.

Include the libary:

then

var controls = new THREE.ObjectControls(camera, renderer.domElement, yourMesh);

You can find here a live demo here: https://albertopiras.github.io/threeJS-object-controls/

Here is the repo: https://github.com/albertopiras/threeJS-object-controls.

Hope this helps

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.

Answer 3

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 4

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.