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

Построение объекта с группировкой в three.js
1. Подготовка окружения

Обязательно подключите библиотеку three.js. Например, взяв с этого сайта минимизированную версию:

<script src="https://cgraph.ru/files/lib/three.min.js"></script>

2. Создание сцены, камеры и рендера

// Создаем сцену
const scene = new THREE.Scene();
 
// Настраиваем камеру (например, PerspectiveCamera)
const camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth / window.innerHeight, 
  0.1, 
  1000
);
camera.position.z = 10;
 
// Создаем рендерер и добавляем его в DOM
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. Создание группировки объектов

В three.js используется объект THREE.Group(), который служит контейнером для других объектов.

// Создаем группу
const group = new THREE.Group();

Например, создадим несколько кубов разного цвета и сгруппируем их в домик с трубой:

const geometry = new THREE.BoxGeometry(1, 1, 1);

// Первый куб (корпус)
const material1 = new THREE.MeshPhongMaterial( {
color: 0xdaa520,
specular: 0x333333,
 } );
const cube1 = new THREE.Mesh(geometry, material1);
group.add(cube1);
 
// Второй куб (крыша)
const cube2 = new THREE.Mesh(geometry, material1);
cube2.position.y = 0.5;
cube2.rotation.x = Math.PI /4;
group.add(cube2);
 
// Третий куб (труба)
const cube3 = new THREE.Mesh(geometry, material1);
cube3.position.y = 0.8;
cube3.position.x = 0.2;
cube3.position.z = 0.3;
cube3.scale.x = .3;
cube3.scale.z = .3;
group.add(cube3);

scene.add(group);

6. Анимация и управление группой

Теперь вы можете вращать или перемещать всю группу целиком:

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

Добавим освещение, чтоб улучшить визуализацию и получим итоговый пример:

Итог:

THREE.Group() — контейнер для объектов.
Можно добавлять объекты (например, меши) в группу с помощью group.add().
Управляя группой, можно перемещать, вращать или масштабировать все объекты одновременно.