Зажим вращения камеры three.js

Question

После долгой ночи возни с кватернионами я наконец-то заставил мышинку нормально работать в тестовой игре с использованием three.js.

Однако я заметил, что если я продолжу смотреть вверх, камера перевернется. Я поспешно соединил некоторый код, который прекрасно работает, когда пользователь выполняет относительно неторопливую прокрутку, просто он не работает, когда пользователь выполняет прокрутку быстро. Я, вероятно, неправильно фиксирую вращение камеры, так как бы я это сделал? Или я был на правильном пути и просто упустил что-то очевидное?

Ссылка на проект (источник встроен): http://neveronti.me/WalkingSimulator/

Моя функция вращения камеры:

//Rotates camera horizontally
y-=mouseMove.x*.02;
//rotates camera vertically
//checks to see if it's moving camera up or down
if(mouseMove.y<0){
    //checks that it's not at the bottom or top
    if(Math.abs(camera.rotation.y*(180/Math.PI))>2 || camera.rotation.x<=0){
        x-=mouseMove.y*.02;
    }
} else if(mouseMove.y>0) {
    if(Math.abs(camera.rotation.y*(180/Math.PI))>2 || camera.rotation.x>=0){
        x-=mouseMove.y*.02;
    }
}

Моя функция обновления камеры:

function updateCamera(){
    camera.lastRotation=camera.quaternion.clone();
    var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
    euler.x = x;
    euler.y = y;
    euler.z = z;
    mouseMove.x=0;
    mouseMove.y=0;
    camera.quaternion.setFromEuler( euler );
}

Изображение проблемы:

Answer 1

Я знаю, что прошло буквально 7 лет, но я наткнулся на проблему зажима камер в ThreeJS (для камеры в стиле fps), и придумал собственное решение на основе этого поста stackoveflow . Вот что я придумал:

      // make sure to pointer lock for optimal camera feel
const UP_AXIS = new THREE.Vector3(0, 1, 0);
let initialRotation = 0;

this.canvas.addEventListener("mousemove", (e) => {
    let newRotation = this.cameraRotation + e.movementY * -0.00001
    // here is where the clamping takes place
    newRotation = THREE.MathUtils.clamp(newRotation, -Math.PI / 2, Math.PI / 2);

    // rotate the camera horizontally (no clamping)
    this.camera.rotateOnWorldAxis(UP_AXIS, e.movementX * -0.0001 * settings.mouseSensitivity);

    // rotate the camera with clamping
    this.camera.rotateX(newRotation - initialRotation);

    initialRotation = newRotation;
})

Я надеюсь, что люди найдут это полезным.