Блог

В Three.js Я пытаюсь реализовать орбитальную камеру, которую можно вращать вокруг осей x и y. Я использую эти две функции:

     function rotateX(rot) {
        var x = camera.position.x,
            y = camera.position.y,
            z = camera.position.z;

        camera.position.x = x * Math.cos(rot)   z * Math.sin(rot);
        camera.position.z = z * Math.cos(rot) - x * Math.sin(rot);

        camera.lookAt(scene.position);
    }

    function rotateY(rot) {
        var x = camera.position.x,
            y = camera.position.y,
            z = camera.position.z;

        camera.position.z = z * Math.cos(rot)   y * Math.sin(rot);
        camera.position.y = y * Math.cos(rot) - z * Math.sin(rot);

        camera.lookAt(scene.position);     
    }
 

Теперь поворот x работает нормально, а поворот y — нет. Как только я перехожу к верхней части модели, так как положение z камеры становится отрицательным, то внезапно метод LookAt поворачивает камеру на величину PI по оси Z, и внезапно левая сторона модели оказывается справа, и наоборот. Теперь я могу исправить это, проверив отрицательный Z, а затем просто зафиксировав поворот камеры, но это приводит к сбою при одновременном использовании поворота x и y, затем x внезапно получает это инвертирующее поведение.

Как мне это исправить?

Проблема , с которой вы столкнулись , называется Gimbal lock . Вам нужно использовать кватернионы, чтобы решить эту проблему. Вы можете прочитать об этом здесь https://gamedev.stackexchange.com/questions/45292/how-is-the-gimbal-locked-problem-solved-using-accumulative-matrix-transformation