Вращение, перемещение и масштабирование объекта в зависимости от направления и положения камеры, в Three.js

Question

Я работаю над основным редактором для Three.js. Я хочу иметь возможность вращать, перемещать и масштабировать объекты.

Использование базовой функции работает, но отлично, но иногда немного запутывает.

cube.rotation.z = Math.PI * val; 
cube.rotation.x = Math.PI * val; 
cube.position.z = val * -1; 
cube.scale.y = val; 

То, что я хочу сделать, это повернуть объект в направлении вместо оси и от угла камеры.

Вот код, иллюстрирующий это. https://codepen.io/arpo/pen/LxyoRJ

Он отлично работает, пока другие входы нетронуты. Если вы перетащите диапазон «Повернуть влево вправо», он вращает куб на оси z. Но если вы перетащите диапазон «Повернуть задний фронт» до упора вправо, а затем снова переверните «Повернуть влево», поворот выглядит так, как будто он находится на оси Y. То же самое касается других входов.

Я понимаю, почему это происходит, но я не знаю, как добиться желаемого эффекта. Я также хотел бы, чтобы это работало с точки зрения камер. Чтобы переместить камеру влево и перетащить диапазон «Переместить назад», куб должен отойти или приблизиться.

Так что я хочу, чтобы при повороте куба с помощью поворота влево/вправо я хочу, чтобы он качался влево или вправо с точки зрения пользователей. Если вы используете диапазон перемещения, я хочу, чтобы куб отталкивался от пользователя.

Answer 1

Ответ на ваш вопрос требует, по крайней мере, базового понимания того, как работают системы координат в 3D. Есть три системы вы должны знать о координате:

1. Local: Каждый объект в сцене имеет свою собственную систему координат. Набор из 3 невидимых осей, которые центрированы в объекте и всегда указывают на те же части объекта независимо от того, какое преобразование вы применяете.
2. Глобальный: Также известный как мировые координаты, сцена имеет глобальную систему координат, которая используется для описания положения объектов внутри сцены. Две красные линии в вашей демонстрации - это глобальные координатные оси X и Z.
3. Камера: Камера имеет собственную систему координат. Опять же, это 3 невидимые оси, один указывает влево, один вверх и один, указывающий на сцену.

Эти 3 системы координат не выровнены. Ну, они выровнены по умолчанию, но не после поворота объекта или камеры.

При повороте объекта по его объекту rotation вы вращаете его вокруг своих местных осей. Ваш куб начинается с оси Z, идентичной мировой оси Z. Представьте это как линию, выступающую из ее передней грани, выровненную с глобальной красной линией. Затем вы поворачиваете куб на 90 градусов назад, а его ось Z теперь направлена ​​вниз.

Естественно, ваше вращение «слева направо», которое фактически является вращением оси Z, теперь поворачивает куб вокруг этой оси Z, обращенной к оси.

Чтобы повернуть куб вокруг оси, совмещенной с системой координат камеры, вам необходимо выполнить несколько преобразований вращения и трансляции.

Я рекомендую немного узнать о системах координат, трансформации модели, преобразовании вида и связанных с ними основах 3D. В противном случае все будет очень запутанным.