Проблемы с вращением камеры в Three.js - PullRequest
Новая
       40

Проблемы с вращением камеры в Three.js

0 голосов
/ 09 января 2019

Я не могу повернуть камеру в сцене Three.js в определенной степени.

Цель состоит в том, чтобы камера поворачивалась вдоль траектории, построенной с использованием положений и вращений сеток. Скручивание по позициям работает отлично, но повороты работают только так. Повороты камеры работают нормально до определенного диапазона градусов, около 90 - 270. Я вращаю камеру только вокруг своей оси Y, поэтому я не думаю, что gimbal-lock вызывает проблему, если я не разбираюсь в gimbal. блокировка неправильная.

Смотрите желаемый путь здесь: Example Camera Path
Это показывает, что камера начинается с ячейки 1 и изменяет свое местоположение вдоль каждой ячейки. Он также пытается вращаться до поворота ячеек, что прекрасно работает до третьего или четвертого узла, где вращение, кажется, прерывается и кажется зеркальным или смещенным.

См. Еще один пример, показывающий направления камеры: Camera Direction visualized along another path
Красные линии указывают направление усеченной камеры, а конусы указывают направление, в котором оно должно быть направлено. Значения в верхней части - это значения поворота ячеек вдоль их оси Y. Вы можете видеть, что при поворотах 135 и 260 красные линии не совпадают с направлением конусов.

В коде не так уж много - он использует tween.js для простого поворота значения y камеры, используя массив в качестве значений для интерполяции. Я пытался не использовать интерполяцию и просто переключаться на несовпадающие повороты напрямую, и это тоже кажется неправильным. 

let r = new TWEEN.Tween(common.camera.rotation, this.tweens)
    .to({
        y: path.rotations.y
    }, 5000)
    .easing(TWEEN.Easing.Linear.None);

Где path.rotations.y - массив значений Y [0.0174, 0.436, -1.047, -1.570, -0.806] (эти значения соответствуют поворотам первого изображения, а не второго).

Следует также отметить, что вращения от Blender, похоже, не совпадают с вращениями в Threejs. Например. Вращение конуса 6 составляет 226 градусов, что составляет 3,94444 радиана. Но вращение в Threejs указано как -0,806 радиан. Однако визуально они появляются прямо в сцене. Я экспортирую сцены, используя Blender и плагин GLTF Exporter.

Ожидаемый результат состоит в том, что вращение камер соответствует вращению конусов, но на самом деле они просто совпадают, когда находятся в определенной степени.

Живой пример: http://davidpuetter.com/games/threejs-test/
Нажмите на игру, чтобы начать анимацию. Как только это будет сделано, нажмите Q, чтобы просмотреть его сверху. Вы можете увидеть в правом верхнем углу, линии не совпадают.

Код доступен здесь: https://github.com/davidpox/threejs-test
Извините за очень грязный код, он был удален из проекта под NDA.

...