Вращение, перемещение и масштабирование объекта в зависимости от направления и положения камеры в 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. Локальный: каждый объект в сцене имеет свою собственную систему координат. Набор из 3 невидимых осей, которые центрированы в объекте и всегда указывают на одни и те же части объекта, независимо от того, какое преобразование вы применяете.
2. Глобальный: также известный как мировые координаты, сцена имеет глобальную систему координат, которая используется для описания положения объектов в сцене. Две красные линии в вашей демонстрации - это глобальные координатные оси X и Z.
3. Камера: камера имеет свою собственную систему координат. Опять же, это 3 невидимых оси, одна направлена ​​влево, одна вверх и одна указывает на сцену.

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

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

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

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

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