three.js: 限制相机的旋转

Question

我正在使用 three.js，试图为真实世界的相机建模。因此，我想将其旋转轴沿 x 轴和 y 轴限制为 90 度。

有没有简单的方法可以做到这一点？我当前的代码运行得不是特别好（当您尝试将相机同时移过 X 和 Y 边界时会变得疯狂）

if(xRot != null && xRot != undefined){
    camera.rotateX(xRot);            
}

if(yRot != null && yRot != undefined){
    camera.rotateY(yRot);
}

if(camera.rotation.x < minCameraRotX){
    camera.rotation.x = minCameraRotX;
}else if (camera.rotation.x > maxCameraRotX){
    camera.rotation.x = maxCameraRotX;
}     

if(camera.rotation.y < minCameraRotY){
    camera.rotation.y = minCameraRotY;
}else if(camera.rotation.y > maxCameraRotY){
    camera.rotation.y = maxCameraRotY;
}

任何建议将不胜感激！！！

Answer 1

我实际上设法找到了解决方案，方法是检查 Three.js 演示中的一些现有代码，以查找名为 PointerLock 的库。这个想法实际上是将多个对象堆叠在彼此内部：从一个水平移动的对象（偏航对象）开始，将另一个对象放入垂直移动的偏航对象（俯仰对象），然后将实际的相机放在俯仰内对象。

然后，您只需沿各自的轴旋转外部物体（偏航和俯仰），因此如果同时旋转两者，它们将自我纠正。例如，如果您沿 y 轴将偏航角旋转 45 度（使其向右转），然后将俯仰角旋转 45 度（使其向下转），则俯仰角将向下 45 度 偏航已经旋转的位置。

鉴于相机在两者内部，它只指向偏航和俯仰指向的任何地方。

这是代码

/*
 * CAMERA SETUP
 *
 * Root object is a Yaw object (which controls horizontal movements)
 * Yaw object contains a Pitch object (which controls vertical movement)
 * Pitch object contains camera (which allows scene to be viewed)
 *
 * Entire setup works like an airplane with a 
 * camera embedded in the propellor...
 *
 */

// Yaw Object
var yawObject = new THREE.Object3D();

// Pitch Object
var pitchObject = new THREE.Object3D();    

// Camera Object
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

// Max Camera angles (in radians)
var minCameraRotX = 0.5;
var maxCameraRotX = 0.5;
var minCameraRotY = 1;
var maxCameraRotY = 1;


// Setup
yawObject.add( pitchObject );
pitchObject.add( camera );

scene.add(yawObject);

...

var rotateCamera = function(xRot, yRot, zRot){
    yawObject.rotation.y += yRot;
    pitchObject.rotation.x += xRot;

    // Enforce X-axis boundaries (rotates around y-axis)
    yawObject.rotation.y = Math.max( minCameraRotY, Math.min( maxCameraRotY, yawObject.rotation.y ) );

    // Enforce Y-axis boundaries (rotates around x-axis)
    pitchObject.rotation.x = Math.max( minCameraRotX, Math.min( maxCameraRotX, pitchObject.rotation.x ) );
}

这里是我引用的源代码：https://github.com/mrdoob/three.js/blob/acda8a7c8f90ce9b71088e903d8dd029e229678e/examples/js/controls/PointerLockControls.js

此外，这有点俗气，但是这个小飞机卡通帮助我清楚地看到了我的设置中发生的事情

three.js: 限制相机的旋转

three.js: Limiting camera's rotation

quaternions

three.js