18

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!

karlosss
  • 2,816
  • 7
  • 26
  • 42

4 Answers4

35

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Thank you for your help, but I am a beginner in three.js and I am not able to use Object3D yet...I believe you that it works well, but I used quaternions. – karlosss May 01 '13 at 21:43
  • 1
    @karlosss Object3D is a base class that many objects in Three.js descend from. If your object has a rotation attribute, then it's probably a subclass of Object3D. – Joel Sep 27 '13 at 02:32
  • @RamyAlZuhouri It's a normalized vector, so each of the axis has a length of **one**. Though a 3D vector does indeed has three axises ;) – Tim S. Apr 09 '14 at 07:15
  • 3
    any idea how to make this work on an object locally? At the moment it's rotating around the world axis instead the object axis. Thanks – James Milner Jul 10 '14 at 18:19
22

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.

richy
  • 2,716
  • 1
  • 33
  • 42
Aki
  • 761
  • 5
  • 9
  • 11
    Since threejs r59 `setEulerFromQuaternion()` was removed (see: https://github.com/mrdoob/three.js/wiki/Migration#r58--r59). The second line should now be: `object.rotation = new THREE.Euler().setFromQuaternion( quaternion );` – kontur Oct 15 '14 at 07:24
3
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.

luics
  • 85
  • 6
  • 1
    How many times per second are you instantiating a `Quaternion`, `Vector3`, and `Euler`? Instead create one instance of the quaternion outside the render loop. In the render loop, do this: `planet.position.applyQuaternion( quaternion );` Also, call scene.getObjectByName() once outside the loop. – WestLangley Jul 19 '17 at 17:21
  • Nice suggestion. It's simple to express how to rotate around any axis using the code above. I optimize it in the [full example](https://codepen.io/luics/pen/GEbOYO) now. – luics Jul 21 '17 at 07:34
  • Come on. You did not follow my suggestion. Set `quaternion` once outside the render loop. Remove `euler`. Call `applyQuaternion()`, instead. – WestLangley Jul 21 '17 at 15:02
0

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

Alberto Piras
  • 517
  • 6
  • 8