Встроенные примитивы: BoxGeometry

В библиотеке Three.js примитивы предоставляют базовые геометрические формы, которые могут использоваться для построения сложных 3D-сцен. Одним из наиболее часто применяемых примитивов является BoxGeometry — куб или прямоугольный параллелепипед. Он создаётся с помощью конструктора:

const geometry = new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);
  • width, height, depth — размеры по осям X, Y, Z соответственно.
  • widthSegments, heightSegments, depthSegments — число сегментов по каждой оси, влияющее на детализацию поверхности.

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

Координаты вершин и порядок индексов

BoxGeometry создаёт шесть граней (faces) куба, каждая из которых состоит из двух треугольников. В Three.js геометрия описывается через массив вершин (geometry.attributes.position) и массив индексов (geometry.index). Для куба с дефолтными сегментами порядок индексов задаёт каждую грань как два треугольника:

  • Левая грань (X−)
  • Правая грань (X+)
  • Верхняя грань (Y+)
  • Нижняя грань (Y−)
  • Передняя грань (Z+)
  • Задняя грань (Z−)

Каждая вершина хранит координаты (x, y, z). Дополнительно можно создавать массив нормалей (geometry.attributes.normal) для корректного освещения и массив UV-координат (geometry.attributes.uv) для наложения текстур.

Сегментация и её применение

Сегментация (widthSegments, heightSegments, depthSegments) критически важна для анимации и эффектов. Примеры применения:

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

Пример создания куба с высокой детализацией:

const detailedBox = new THREE.BoxGeometry(2, 2, 2, 4, 4, 4);

Каждая грань теперь состоит из 16 маленьких квадратиков, что позволяет работать с геометрией на уровне вершин.

Применение материалов

Для визуализации BoxGeometry используется объект Mesh:

const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Ключевые особенности работы с материалами:

  • MeshBasicMaterial — не реагирует на свет, идеально для прототипов.
  • MeshStandardMaterial — учитывает физическое освещение, отражения, металлическость и шероховатость.
  • MeshPhongMaterial — классический материал для блеска и бликов.

Комбинация геометрии с материалом даёт возможность создавать объекты, готовые к рендерингу и анимации.

Трансформации куба

BoxGeometry сама по себе не содержит информации о позиции, вращении или масштабе. Эти свойства задаются через объект Mesh:

cube.position.set(1, 2, -3);
cube.rotation.x = Math.PI / 4;
cube.scale.set(2, 1, 0.5);
  • position — смещение объекта в пространстве.
  • rotation — поворот по осям X, Y, Z в радианах.
  • scale — масштабирование по каждой оси.

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

Применение текстур

Для наложения текстуры на куб используется объект TextureLoader и UV-координаты геометрии:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

UV-координаты по умолчанию равномерно распределены по каждой грани куба. Это упрощает стандартное наложение текстур, но для более сложных текстур может потребоваться ручная корректировка UV-координат.

Анимация и интерактивность

Кубы на основе BoxGeometry легко анимируются с помощью встроенных возможностей Three.js:

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

С помощью событий мыши или касания можно создавать интерактивные сцены, например, изменять цвет или масштаб куба при наведении или клике.

Оптимизация

При работе с большим количеством кубов важно учитывать оптимизацию:

  • Использование InstancedMesh для множества одинаковых кубов, что снижает нагрузку на GPU.
  • Минимизация сегментов для объектов, которые не требуют высокой детализации.
  • Использование BufferGeometry, что обеспечивает эффективное хранение данных вершин и индексов.

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

Оглавление