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!

4 Answers 4

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

4
  • 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 1, 2013 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, 2013 at 2: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 9, 2014 at 7: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 Jul 10, 2014 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.

1
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.

3
  • 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. Jul 19, 2017 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 now.
    – luics
    Jul 21, 2017 at 7:34
  • Come on. You did not follow my suggestion. Set quaternion once outside the render loop. Remove euler. Call applyQuaternion(), instead. Jul 21, 2017 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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.