Quaternion Rotation

Questions
1

How would I (simultaneously) set an object’s x, y z rotation from a set of initial radian values to target radian values using quaternions?

For example…

var rx_init = object.rotation.x
var ry_init = object.rotation.y
var rz_init = object.rotation.z

var rx_target = rx_init+0.1
var ry_target = ry_init +0.1
var rz_target = rz_init+0.1

// how do I simultaneously set this object’s x, y and z rotation to the target values using quaternions?

2

You can use object.rotation.setFromQuaternion( quaternion )

https://threejs.org/docs/#api/en/math/Euler.setFromQuaternion

You generally don’t need to worry about the optional order parameter, but you do need to ensure that the quaternion is normalized.

3

© looeee

Tried this:

// rx, ry and rz are target radians
var euler = new THREE.Euler(rx,ry,rz);
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(euler);
object.rotation.setFromQuaternion( quaternion )

However, the results are not what we expected. Could be an issue on our end. We’re trying to build a simple keyframe system to change position and rotation over time. Position works great but the rotation is always a mess.

4

What range of values do your radian variables have? Quaternions cannot express >180 degrees, so if you Euler radian values are greater than that, you will lose some information.

BTW with code you are creating an Euler, converting it to a Quaternion, and the converting it back to an Euler (object.rotation):

var euler = new THREE.Euler(rx,ry,rz);
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(euler);
object.rotation.setFromQuaternion( quaternion )

You would be better off using object.quaternion directly.

Without knowing what results you were hoping for and seeing the rest of your code, I can’t help you any more here. Can you please create a minimal working example that demonstrates the issue, using Codepen.io or a similar site?

1 Like
6

The solution was to create keyframes using an object’s quaternion _x, _y, _z and _w values. During video playback, new, normalized quaternions are created with target values that the object’s rotation is set to.

Thank you Looeee.

1 Like