Three.js - Set rotation of object from normalized directions of the X, Y and Z-Axis

Question

From a model file object definition the placement a new object is given by a location (a point in space) and the normalized directions of the X-Axis, the Y-Axis and the Z-Axis.

How can i translate this to a THREE.Euler so i can rotate my object correctly in space.

So the axes are off type THREE.Vector3. If the new object is aligned with the world the values would be:

xAxis = new THREE.Vector3( 1, 0, 0 );

yAxis = new THREE.Vector3( 0, 1, 0 );

zAxis = new THREE.Vector3( 0, 0, 1 );

But if for example the whole local UCS of the object is rotated 180 degrees ( or Math.PI ) around the zAxis they would look like this:

xAxis = new THREE.Vector3( -1, 0, 0 );

yAxis = new THREE.Vector3( 0, -1, 0 );

zAxis = new THREE.Vector3( 0, 0, 1 );

So I need to do something like this:

var object3D = new THREE.Object3D();

object3D.position = location;

var euler = new THREE.Euler();

euler.setFromNormalizedAxes( xAxis, yAxis, zAxis );

object3D.rotation = euler;

Or create a rotation matrix from those axes:

var rotationMatrix = new THREE.Matrix4();

rotationMatrix.setFromNormalizedAxes( xAxis, yAxis, zAxis );

object3D.rotation.setFromRotationMatrix( rotationMatrix, "XYZ" );

I am not so good yet with these rotation matrices and euler rotations...

You are way off-base. See lighthouse3d.com/tutorials/glsl-tutorial/the-normal-matrix for a description of what the normal matrix is, and what it is used for. — WestLangley
@WestLangley Okay, you are right, I misinterpreted the function of _normalMatrix totally. I changed the question. When I was digging and I ran into the normalMatrix it looked like this: 1 0 0 0 1 0 0 0 1 Which is exactly like the X, Y and Z-Axis definitions which is why i assumed it had to do with normalized UCS axes. — Wilt

WestLangley WestLangley · Accepted Answer · 2014-04-10T16:05:24

In the example you gave, the answer would be

object.quaternion.setFromRotationMatrix(

    new THREE.Matrix4( -1,  0,  0,  0,
                        0, -1,  0,  0,
                        0,  0,  1,  0,
                        0,  0,  0,  1 )

);

The columns of the upper 3x3 of the Matrix4 are the new x-, y-, and z-axes.

You could set object.rotation instead. It does not matter.

three.js r.66

Three.js - Set rotation of object from normalized directions of the X, Y and Z-Axis

1 Answers