Group: группировка объектов

В библиотеке Three.js для организации сцены и управления несколькими объектами одновременно используется класс THREE.Group. Группы позволяют объединять объекты, применяя к ним трансформации, анимацию и эффекты как к единому целому, упрощая управление сложными сценами.

Создание группы

Группа создается с помощью конструктора:

const group = new THREE.Group();

После создания группа может использоваться как контейнер для любых объектов сцены: Mesh, Light, Camera, Line, Points и других групп.

Добавление объектов в группу выполняется через метод add():

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({ color: 0xff0000 })
);

const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(0.5, 32, 32),
    new THREE.MeshStandardMaterial({ color: 0x0000ff })
);

group.add(cube);
group.add(sphere);
scene.add(group);

После добавления объектов в группу любые трансформации, примененные к группе, воздействуют на все её дочерние объекты.

Трансформации группы

Позиция, вращение и масштабирование группы задаются так же, как для одиночного объекта:

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

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

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

Вложенные группы

Группы можно вкладывать друг в друга, создавая иерархию:

const subGroup = new THREE.Group();
subGroup.add(new THREE.Mesh(
    new THREE.BoxGeometry(0.5, 0.5, 0.5),
    new THREE.MeshBasicMaterial({ color: 0x00ff00 })
));

group.add(subGroup);

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

Управление видимостью и состоянием группы

Свойство visible позволяет включать и отключать отображение всей группы:

group.visible = false; // группа и все её объекты скрыты
group.visible = true;  // группа и её объекты снова видимы

Удаление объектов из группы выполняется с помощью метода remove():

group.remove(cube);

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

Анимация группы

Группы особенно полезны при анимации. Например, вращение всех объектов сразу:

function animate() {
    requestAnimationFrame(animate);
    group.rotation.y += 0.01; // вращение всей группы
    renderer.render(scene, camera);
}
animate();

Использование групп позволяет анимировать целые комплексы объектов без необходимости индивидуально управлять каждым элементом.

Полезные методы и свойства

  • group.add(object1, object2, …) — добавление одного или нескольких объектов.
  • group.remove(object) — удаление объекта из группы.
  • group.children — массив всех объектов внутри группы.
  • group.position, group.rotation, group.scale — трансформации всей группы.
  • group.visible — управление видимостью группы.

Практические примеры применения групп

  1. Сборка моделей: для объектов с множеством деталей, например автомобилей, роботов или зданий, все части можно объединить в группы и анимировать их как единое целое.
  2. Сцены с повторяющимися элементами: деревья, здания, враги в игре — группировка облегчает управление и трансформацию всех экземпляров.
  3. Комплексная анимация: движение группы объектов по сцене, вращение, масштабирование или применение эффектов.

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

Оглавление