title

Теория

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

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

Чтобы несколько частей вели себя как одна модель, их удобно объединять в THREE.Group(). Группа позволяет перемещать, вращать и масштабировать сразу весь набор объектов. Это значит, что тебе не нужно анимировать каждую деталь отдельно. Получается, что группа превращает набор примитивов в единую систему.

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

const group = new THREE.Group(); // создаём группу
group.add(body); // добавляем тело
group.add(head); // добавляем голову
scene.add(group); // помещаем группу в сцену

Здесь создаётся группа, в которую добавляются отдельные части объекта. После этого вся конструкция помещается в сцену как одна сущность. Если затем повернуть или переместить группу, все вложенные элементы тоже изменят своё положение. Именно это делает группы основой для составных объектов.

Ниже ты сразу увидишь финальный результат: составной объект, собранный из нескольких геометрий. После этого можно будет разобрать, как он построен и почему группа делает его цельной моделью.

Задача

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

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

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

// создаём несколько отдельных объектов

const body = new THREE.Mesh(
new THREE.BoxGeometry(1.5, 2, 1),
new THREE.MeshStandardMaterial({ color: 0x7a7a7a })
);

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

head.position.y = 1.5;

scene.add(body);
scene.add(head);

Здесь части существуют отдельно. Они уже образуют форму, но пока не связаны между собой и не ведут себя как единый объект.

const group = new THREE.Group();
scene.add(group);

group.add(body);
group.add(head);

Теперь объекты объединены в одну систему. Любое действие над группой применяется ко всем её элементам.

function animate() {
group.rotation.y += 0.02;

renderer.render(scene, camera);
requestAnimationFrame(animate);
}

animate();

Вращение применяется к группе, а не к отдельным элементам. Благодаря этому вся конструкция ведёт себя как единая модель.

Вывод

1. Сложный объект можно собрать из простых геометрий
2. Группа объединяет несколько элементов в одну систему
3. Управление группой влияет на все её части сразу
4. Даже простые формы могут создавать сложный визуальный результат
5. Это альтернатива использованию готовых 3D-моделей

Задание

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