title

Теория

В Three.jsлюбой объект собирается из двух основных частей:геометриии материала. Геометрия задаёт форму, а материал определяет, как эта форма выглядит. Вместе они создают видимый объект в сцене. Это одна из самых базовых конструкций в 3D-графике.

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

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

const geometry = new THREE.BoxGeometry(1, 1, 1); // форма куба
const material = new THREE.MeshNormalMaterial(); // материал поверхности
const mesh = new THREE.Mesh(geometry, material); // готовый объект

Сначала создаётся геометрия, затем материал, а после этого они объединяются в Mesh. ИменноMeshуже можно добавить в сцену. Получается, что объект в Three.js — это не одна сущность, а сборка из нескольких частей. Такая логика лежит в основе почти всей работы с 3D-формами.

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

Задача

Начнём с самого простого варианта — соберём куб. Это базовая форма, на которой удобно понять связь геометрии и материала. Здесь важно не движение, а сама конструкция объекта.

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

Теперь поменяем только форму. Материал останется тем же, поэтому будет хорошо видно, что визуальные изменения связаны именно с геометрией.

Здесь используется другая геометрия, но материал остаётся прежним. За счёт этого объект выглядит иначе по форме, но сохраняет тот же принцип отображения поверхности. Так становится ясно, что геометрия отвечает именно за тело объекта.

Теперь наоборот: оставим форму прежней, но изменим материал. Так ты увидишь, как один и тот же объём может выглядеть по-разному в зависимости от поверхности.

Здесь форма остаётся кубом, но меняется материал. За счёт этого объект получает другой визуальный характер. Даже без света и текстур уже видно, что материал сильно влияет на восприятие формы.

Вывод

1. Геометрия задаёт форму объекта
2. Материал определяет, как эта форма выглядит
3. Объект в Three.jsсобирается из отдельных частей
4. Даже простая замена геометрии или материала заметно меняет результат

Задание

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

1. Раскомментируй замену геометрии, чтобы вместо куба появился шар
2. Попробуй включить каркасный режим, чтобы увидеть структуру формы
3. Измени цвет материала и сравни более тёмный и более светлый варианты
4. Попробуй заменить куб на цилиндр и посмотреть, как меняется характер объекта