旋转，然后在three.js中翻译答案

【问题标题】：Rotate, then translate in three.js旋转，然后在three.js中翻译
【发布时间】：2011-11-24 09:06:49
【问题描述】：

我想旋转一个用 THREE.PlaneGeometry 创建的平面，但我遇到了一些问题。

FirstPersonCamera 相机前面的轴是什么？
我自己的测试显示了 X 前/后、Y 上/下、Z 左/右，对吗？
为了用这些平面制作立方体，我使用以下代码（剪切以仅显示 X 轴面）。由于我不明白的原因，块和正交基之间有一个小空间。似乎在翻译后应用了旋转。我该如何解决？

function lol() {
    var mesh = new THREE.Mesh(xFacesGeometry, material);
    mesh.matrix.setRotationFromEuler(new THREE.Vector3(0, ath.PI / 2),  'XYZ');
    mesh.matrix.setPosition(new THREE.Vector3(x * 20 + 10, y * 20 + 10, z * 20 + 10));
    mesh.matrixAutoUpdate = false;
}
lol(0, 0, 0);
lol(1, 0, 0);

完整代码在这里（使用 ctrl+click 向后移动）：http://jsfiddle.net/u8ZHC/

【问题讨论】：

标签： 3d three.js

【解决方案1】：

只是回答这个问题：指定必须应用平移/旋转的顺序的最佳方法是使用多个节点。

var pitchNode = new THREE.Object3D( );
var yawNode = new THREE.Object3D( );
var rollNode = new THREE.Object3D( );
var positionNode = new THREE.Object3D( );

// here come the order
scene.add( pitchNode );
pitchNode.add( yawNode );
yawNode.add( rollNode );
rollNode.add( positionNode );

【讨论】：

【解决方案2】：

在转换位置之前尝试更新矩阵：

mesh.matrix.setRotationFromEuler(new THREE.Vector3(0, Math.PI / 2),  'XYZ');
mesh.updateMatrix();
mesh.translate(...);

【讨论】：