Трансформации: position, rotation, scale

В Three.js каждый объект сцены (THREE.Object3D и его наследники, например THREE.Mesh) обладает свойствами position, rotation и scale, которые управляют его положением, ориентацией и размерами в 3D-пространстве. Эти свойства формируют локальную систему координат объекта, относительно которой выполняются все последующие преобразования.

Позиция (position)

Свойство position задаётся экземпляром THREE.Vector3 и определяет координаты объекта вдоль осей X, Y и Z:

mesh.position.set(1, 2, -5);
  • X — горизонтальное смещение.
  • Y — вертикальное смещение.
  • Z — глубина (приближение/удаление).

Также можно изменять координаты по отдельности:

mesh.position.x += 0.1;
mesh.position.y = 3;
mesh.position.z -= 0.5;

Важно понимать, что position действует в локальной системе координат родителя. Если объект вложен в другой объект, его координаты рассчитываются относительно позиции родителя.

Вращение (rotation)

Свойство rotation задаётся экземпляром THREE.Euler и определяет поворот объекта вокруг локальных осей:

mesh.rotation.set(Math.PI / 4, Math.PI / 2, 0);
  • rotation.x — вращение вокруг оси X (наклон вперёд/назад).
  • rotation.y — вращение вокруг оси Y (поворот влево/вправо).
  • rotation.z — вращение вокруг оси Z (вращение по часовой стрелке/против часовой стрелки).

Повороты в Three.js задаются в радианах, но для удобства часто используют функцию THREE.MathUtils.degToRad(degrees):

mesh.rotation.y = THREE.MathUtils.degToRad(45);

Для сложных анимаций лучше использовать quaternion, что предотвращает проблему “Гимбал-лок”:

mesh.quaternion.setFromEuler(new THREE.Euler(0, Math.PI / 4, 0));

quaternion хранит поворот в виде кватерниона, что обеспечивает корректное смешение вращений и анимаций.

Масштаб (scale)

Свойство scale также является THREE.Vector3 и управляет размерами объекта по каждой оси:

mesh.scale.set(2, 1, 0.5);
  • scale.x — растяжение/сжатие по X.
  • scale.y — растяжение/сжатие по Y.
  • scale.z — растяжение/сжатие по Z.

Единица (1) означает оригинальный размер. Значение меньше 1 уменьшает объект, больше 1 увеличивает. Отрицательный масштаб инвертирует объект по соответствующей оси:

mesh.scale.x = -1; // отражение по оси X

Комбинация трансформаций

Трансформации выполняются в следующем порядке: scale → rotation → position. Порядок критически важен, так как изменение последовательности приводит к другим результатам:

mesh.scale.set(2, 2, 2);
mesh.rotation.y = Math.PI / 4;
mesh.position.set(5, 0, 0);

В данном примере объект сначала увеличится, затем повернётся, и только потом будет смещён.

Методы для упрощённых трансформаций

Three.js предоставляет ряд методов, упрощающих работу с трансформациями:

  • translateX/Y/Z(distance) — перемещает объект вдоль локальной оси:
mesh.translateZ(2); // перемещает объект вперёд по локальной оси Z
  • rotateX/Y/Z(angle) — вращение относительно локальной оси:
mesh.rotateY(Math.PI / 2); // поворот на 90 градусов вокруг Y
  • lookAt(vector) — поворачивает объект, чтобы “смотреть” на указанную точку в мировой системе координат:
mesh.lookAt(new THREE.Vector3(0, 0, 0));

Родительские трансформации

Если объект вложен в другой объект, его трансформации комбинируются с трансформациями родителя. Например:

parent.position.set(5, 0, 0);
child.position.set(1, 0, 0);
scene.add(parent);
parent.add(child);

В этом случае мировой координатой child будет (6, 0, 0), так как локальная позиция child складывается с позицией родителя.

Полезные советы по оптимизации

  • Для частых анимаций лучше напрямую модифицировать position, rotation и scale, чем пересоздавать объекты.
  • Использование кватернионов предотвращает глюки при сложных вращениях.
  • Для анимаций можно использовать THREE.Clock или сторонние библиотеки вроде GSAP для плавного изменения свойств.
  • Проверка порядка трансформаций позволяет избежать неожиданного перемещения и вращения объектов.

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

Оглавление