Координаты и трансформации

Чтобы расставить объекты, нужно понимать систему координат и три способа их преобразовать.

У каждого объекта есть три трансформации: position (где он), rotation (как повёрнут, в радианах) и scale (насколько растянут).

Система координат

Three.js использует правостороннюю систему координат:

X — вправо (положительное направление);
Y — вверх;
Z — на зрителя (из экрана к вам).

Поэтому, когда мы пишем camera.position.z = 5, камера отъезжает к нам, и сцена в начале координат попадает в кадр.

position — перемещение

mesh.position.x = 2;
mesh.position.y = 1;
mesh.position.set(2, 1, 0); // то же одной строкой: x, y, z

rotation — поворот в радианах

Важная ловушка: повороты задаются в радианах, а не в градусах. Полный оборот — это 2π ≈ 6.283. Чтобы перевести градусы в радианы, удобно использовать THREE.MathUtils.degToRad или формулу град × π / 180.

mesh.rotation.y = Math.PI / 2;   // 90 градусов вокруг Y
mesh.rotation.x = THREE.MathUtils.degToRad(45); // 45 градусов

Сделаем перевод градусов в радианы своими руками — это чистая математика, запустим её здесь.

function degToRad(deg) {
  return deg * Math.PI / 180;
}

for (const d of [45, 90, 180, 360]) {
  console.log(d + ' град =', degToRad(d).toFixed(4), 'рад');
}

Вывод:

45 град = 0.7854 рад
90 град = 1.5708 рад
180 град = 3.1416 рад
360 град = 6.2832 рад

scale — масштаб

mesh.scale.set(2, 2, 2); // вдвое больше во все стороны
mesh.scale.x = 3;        // растянуть только по ширине

Масштаб 1 — исходный размер; меньше единицы — уменьшение; отрицательный — зеркальное отражение (используют редко и осторожно).

Локальные координаты

Все три трансформации работают относительно родителя объекта. Если меш лежит внутри группы (следующий урок), его position отсчитывается от группы, а не от центра сцены. Это и есть сила графа сцены: подвигали родителя — подвинулись все дети.

Итог

X — вправо, Y — вверх, Z — на зрителя.
position двигает, rotation поворачивает (в радианах!), scale масштабирует.
Трансформации считаются относительно родителя в графе сцены.