Группы и единицы измерения

Когда объектов много, их удобно объединять в группы и двигать вместе. И заодно решим, что такое «единица» в нашей сцене.

Group — это пустой узел-контейнер: сам по себе не виден, но его трансформации применяются ко всем вложенным объектам.

Зачем группировать

Представьте машинку из кузова и четырёх колёс. Если вы захотите повернуть всю машинку, поворачивать каждую деталь по отдельности — мучение. Положите все детали в одну группу — и поворот группы повернёт машинку целиком, сохраняя взаимное расположение деталей.

const car = new THREE.Group();
car.add(body);
car.add(wheelFL);
car.add(wheelFR);
car.add(wheelBL);
car.add(wheelBR);
scene.add(car);

// двигаем и вращаем всю машинку разом
car.position.x = 3;
car.rotation.y = Math.PI / 4;

Вложенность и локальные координаты

Колесо внутри группы имеет position относительно группы, а не сцены. Поставили колесо в (1, 0, 1) — это «правее и ближе относительно машинки». Сдвинули машинку — колесо поехало вместе с ней, сохранив своё место в кузове. Группы можно вкладывать друг в друга, выстраивая иерархию любой глубины.

Этот же приём решает классическую задачу — вращение вокруг чужого центра. Допустим, нужно, чтобы луна крутилась вокруг планеты. Просто поворачивать луну не выйдет — она завертится вокруг себя. Решение: положить луну в группу, сдвинуть луну внутри группы на радиус орбиты, а вращать саму группу. Группа крутится вокруг своего центра (планеты), и луна описывает окружность. Так из простых поворотов собираются сложные орбитальные движения.

Кстати, загруженные модели (glTF из пятого раздела) приходят именно как группы — это иерархия из множества вложенных мешей. Понимание групп напрямую помогает работать с реальными моделями: подвигать модель целиком, найти и подсветить отдельную её деталь, прицепить к ней дочерний объект.

Единицы измерения

В Three.js расстояния — это условные единицы. Движок не знает про метры или сантиметры: 1 — это просто 1. Договоритесь с собой о смысле единицы и держитесь его. Популярный выбор — 1 единица = 1 метр, потому что так же по умолчанию экспортируют модели из Blender, и масштаб сходится сам собой.

Почему это важно: если человек в сцене высотой 1.8, а дом — 4000, что-то не так с масштабом, и камера с near/far будут вести себя странно. Согласованный масштаб экономит часы отладки.

ОбъектРазумный размер (1 ед. = 1 м)
человек~1.8
дверь~2
машина~4.5
комната~5 × 3

Итог

  • Group объединяет объекты — трансформация группы двигает всех детей разом.
  • Координаты детей локальны относительно группы.
  • Единицы условны; договоритесь (часто 1 ед. = 1 м) и будьте последовательны.
Проверьте себя
1. Зачем нужен THREE.Group?
AЧтобы ускорить рендер вдвое
BЧтобы объединить объекты и двигать/вращать их как единое целое
CЧтобы поменять цвет всех объектов
DЧтобы загрузить модель
2. В чём измеряются расстояния в Three.js?
AСтрого в метрах
BВ пикселях экрана
CВ условных единицах — вы сами решаете, что значит 1
DВ дюймах
3. Что произойдёт с дочерним объектом, если повернуть группу?
AНичего, дети независимы
BДочерний объект повернётся вместе с группой вокруг её центра
CДочерний объект исчезнет
DПоменяется только его цвет
Поддержать проект