javascript - 三个js 3D旋转

Question

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

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

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

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

Answer 2

对于围绕 z 轴的旋转：

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

对于翻译，其中 z 是您的 delta ：

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