javascript - Threejs相机旋转问题

Question

我知道这是一个有据可查的问题，我进行了广泛的搜索，尝试了我找到的所有解决方案，但是，我无法完成最后一步。我有一个添加了相机的 3D 对象，并且正在尝试使第一人称设置正常工作(相机的顺序设置为 YXZ)，当我尝试在 x 轴上旋转对象时，产生的运动是。 ..奇怪的。 y 旋转(即向左/向右看)效果很好。如果我在模拟开始时更改 x 旋转，向上和向下看也可以正常工作，但是一旦我向左或向右看，然后尝试向上/向下看，它就会以最奇怪的 Angular 旋转，从而使场景螺旋。这是一些代码:

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );             

                neck = new THREE.Object3D();
                neck.rotateOnAxis(new THREE.Vector3(1, 0, 0), degInRad(90));
                neck.up = new THREE.Vector3(0, 0, 1);
                neck.position.z = 10;
                neck.position.y = -5;
                neck.add(camera);
                scene.add(neck);

                if (leftPressed) {
                        neck.rotation.y += degInRad(1);  //look left
                } else if (rightPressed) {
                    neck.rotation.y -= degInRad(1);      //look right
                }
                if (upPressed) {
                    neck.rotation.x += degInRad(1);      //look up
                } else if (downPressed) {
                    neck.rotation.x -= degInRad(1);      //look down
                }

编辑 我已经阅读了关于这个问题的更多 github 问题，并理解了顺序轮换的问题。我想或更尖锐的问题是:如何更改lookAt()(或使用任何其他方法)以便更改x旋转不会影响y旋转？

Answer 1

为颈部创建另一个节点(Object3D)怎么样。这个想法是使用两个独立的坐标进行旋转。然后您可以在 y 轴旋转新节点并在 x 轴旋转颈部。提示:不要忘记将颈部添加到新的 Object3d 节点。

.......
var neckNode = new THREE.Object3D();
neckNode.add(neck);
scene.add(neckNode);
.......
if (leftPressed) {
    neckNode.rotation.y += degInRad(1);  //look left
} else if (rightPressed) {
    neckNode.rotation.y -= degInRad(1);  //look right
}
if (upPressed) {
    neck.rotation.x += degInRad(1);      //look up
} else if (downPressed) {
    neck.rotation.x -= degInRad(1);      //look down
}

希望有帮助。