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