三个js 3D旋转答案

【问题标题】：Three js 3D rotation三个js 3D旋转
【发布时间】：2013-11-12 19:33:06
【问题描述】：

我有 2 个网格对象。锚和杆。如图所示，Anchor 围绕 z 轴旋转。杆应该只前后移动。这是图片：http://imageshack.us/photo/my-images/841/7a83.png/。

但我一直在试图弄清楚矩阵计算。例如，如果锚旋转 45 度，因此它面向 x 轴，我怎样才能使杆仍然前后移动？

【问题讨论】：

你使用 gl-matrix.js 吗？

【解决方案1】：

正如scooby37 注意到的，Troopers 提供的组合示例无效。您应该不：

new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);

改为您可以尝试以下方法：

let rotation = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), Math.PI / 6.0);
let transformation = new THREE.Matrix4().makeTranslation(0, this.height, 0);
this.mesh.applyMatrix(rotation.multiply(transformation));

它引入了矩阵乘法——应该结合通常的变换方式。

【讨论】：

【解决方案2】：

绕z轴旋转：

var rotation = new THREE.Matrix4().makeRotationZ(Math.PI/2);

对于翻译，z 是您的增量：

var translation = new THREE.Matrix4().makeTranslation(0, 0, z);

您可以在翻译开始时结合这两种转换：

~~var transformation = new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI/2);~~

var transformation = rotation.multiply(translation);

然后将变换应用到您的几何体：

geometry.applyMatrix(transformation);

【讨论】：

我对 Three.js 很陌生，所以我真的不知道我在这里缺少什么。我让围绕 z 轴的旋转开始工作，但仍然无法弄清楚当方向改变时如何使“杆”前后移动。我不能用 makerotationX 来做，因为它并不总是围绕 x 轴旋转，如果你知道我的意思的话。
您的变换是围绕 z 的旋转和围绕 X 的旋转，因此通过乘以矩阵将两者结合起来： var rotationZ = new THREE.Matrix4().makeRotationZ(angleZ); var rotationX = new THREE.Matrix4().makeRotationX(angleX); var transformation = rotationZ.multiply(rotationX);
这行得通，但问题是对象需要移动，并且应用矩阵将其围绕世界原点旋转。所以当它移动时，旋转变得越来越大。我不确定如何将旋转绑定到单个块自己的原点。
这个答案不应该被接受或至少纠正你不能通过以下方式组合转换： var transformation = new THREE.Matrix4().makeTranslation(0, 0, z).makeRotationZ(Math.PI /2) - 它会覆盖它们！！！使用类似： var rotation = new THREE.Matrix4().makeRotationZ(this.toolMeshes[index].rotation.z); var translation = new THREE.Matrix4().makeTranslation(this.toolMeshes[index].position.x, this.toolMeshes[index].position.y, 0); var matrix = rotation.multiplyMatrices(translation, rotation);