Three.js - 从 X、Y 和 Z 轴的标准化方向设置对象的旋转 [英] Three.js - Set rotation of object from normalized directions of the X, Y and Z-Axis

问题描述

从模型文件对象定义中，新对象的位置由 location(空间中的一个点)和 X 轴、Y 轴和 Z 轴的归一化方向给出轴.

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.

我如何将其转换为 THREE.Euler 以便我可以在空间中正确旋转我的对象.

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

所以轴是关闭类型THREE.Vector3.如果新对象与 world 对齐，则值将是:

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 );

但是，例如，如果对象的整个本地 UCS 围绕 zAxis 旋转 180 度(或 Math.PI)，它们将如下所示:

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

推荐答案

在你给出的例子中，答案是

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 )

);

Matrix4 上方 3x3 的列是新的 x、y 和 z 轴.

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

您可以改为设置 object.rotation.没关系.

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

three.js r.66

three.js r.66

这篇关于Three.js - 从 X、Y 和 Z 轴的标准化方向设置对象的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！