Встроенные примитивы: PolyhedronGeometry и производные

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

Основные параметры PolyhedronGeometry

Создание объекта происходит через конструктор:

const geometry = new THREE.PolyhedronGeometry(vertices, indices, radius, detail);
  • vertices — массив чисел, представляющих координаты вершин в формате [x1, y1, z1, x2, y2, z2, …]. Каждая тройка чисел описывает одну вершину.
  • indices — массив индексов, определяющих треугольники. Каждая тройка индексов ссылается на вершины из массива vertices.
  • radius — радиус, на который масштабируются вершины, чтобы фигура была ограничена сферой.
  • detail — уровень детализации: целое число ≥ 0. Увеличение этого параметра приводит к рекурсивному делению граней треугольников, создавая более гладкую сферическую поверхность.

Пример создания простого тетраэдра:

const vertices = [
   1, 1, 1,
  -1, -1, 1,
  -1, 1, -1,
   1, -1, -1
];

const indices = [
  0, 1, 2,
  0, 3, 1,
  0, 2, 3,
  1, 3, 2
];

const geometry = new THREE.PolyhedronGeometry(vertices, indices, 1, 0);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Уровень детализации (detail) и его влияние

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

  • detail = 0 — базовая фигура с оригинальными гранями.
  • detail = 1 — каждая грань делится на 4 треугольника.
  • detail = 2 — каждое последующее деление делает поверхность ещё более гладкой.

Важно учитывать, что увеличение detail резко повышает количество полигонов, что может повлиять на производительность.

Производные геометрии

Three.js предоставляет готовые классы, основанные на PolyhedronGeometry, для наиболее часто используемых многогранников:

TetrahedronGeometry

Создает тетраэдр — четырехгранник. Конструктор:

const geometry = new THREE.TetrahedronGeometry(radius, detail);
  • radius — масштаб тетраэдра.
  • detail — уровень детализации, аналогично PolyhedronGeometry.

OctahedronGeometry

Создает октаэдр — восьмигранник. Конструктор:

const geometry = new THREE.OctahedronGeometry(radius, detail);

IcosahedronGeometry

Создает икосаэдр — двадцатигранник. Часто используется как основа для сферических объектов с высокой степенью гладкости.

const geometry = new THREE.IcosahedronGeometry(radius, detail);

DodecahedronGeometry

Создает додекаэдр — двенадцатигранник с правильными пятиугольными гранями.

const geometry = new THREE.DodecahedronGeometry(radius, detail);

Все эти производные автоматически определяют массивы вершин и индексов, необходимые PolyhedronGeometry, что упрощает использование.

Применение в сцене

Для визуализации необходимо использовать Mesh с материалом. PolyhedronGeometry и производные поддерживают любые стандартные материалы Three.js, включая MeshStandardMaterial, MeshPhongMaterial и MeshNormalMaterial.

Пример с анимацией вращения:

const geometry = new THREE.IcosahedronGeometry(1, 2);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, flatShading: false });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

Использование flatShading позволяет сохранить четкость граней, даже при высоком уровне детализации.

Практические советы

  1. Оптимизация деталей: при использовании detail > 2 количество треугольников растет экспоненциально. Для интерактивных сцен рекомендуется ограничивать детализацию.
  2. Смешивание геометрий: PolyhedronGeometry можно комбинировать с другими геометриями через BufferGeometry.merge для создания сложных объектов.
  3. UV-развертка: по умолчанию PolyhedronGeometry не генерирует сложные UV-координаты. Для текстурирования необходимо использовать методы computeVertexNormals() и UVGenerator.
  4. Анимация граней: изменение массива вершин через geometry.attributes.position.needsUpdate = true позволяет создавать динамические, деформируемые полиэдры.

PolyhedronGeometry и её производные предоставляют мощный инструмент для создания как простых, так и сложных геометрических форм, обеспечивая высокую гибкость в управлении формой и уровнем детализации. Их использование является фундаментальной практикой при построении трехмерных сцен в Three.js.

Оглавление