Threejs相机旋转问题

Threejs camera rotation problems

本文关键字：问题 旋转 相机 Threejs      更新时间：2023-09-26

我知道这是一个有据可查的问题，我已经到处寻找，尝试了我找到的所有解决方案，但我无法完成最后一步。我有一个添加了相机的3D对象，正在尝试进行第一人称设置（相机的顺序设置为YXZ），当我尝试在x轴上旋转对象时，产生的移动……很奇怪。y旋转（即向左/向右看）效果很好。如果我在模拟开始时更改x旋转，向上和向下看也很好，但只要我向左或向右看，然后尝试向上/向下看，它就会以最奇怪的角度旋转，使场景呈螺旋状。以下是一些代码：

                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旋转？

如何为颈部创建另一个节点（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
}

希望能有所帮助。

相关文章：