Встроенные геометрии

Не нужно лепить формы вручную — в Three.js десятки готовых геометрий. Разбираем самые ходовые.

Встроенные геометрии задают форму парой-тройкой чисел: размеры и сегментацию (насколько форма детализирована).

Базовый набор

Как создавать

const box = new THREE.BoxGeometry(2, 1, 1);          // ширина, высота, глубина
const sphere = new THREE.SphereGeometry(1, 32, 16);  // радиус, сегменты по ширине/высоте
const floor = new THREE.PlaneGeometry(10, 10);       // пол 10x10
const cyl = new THREE.CylinderGeometry(0.5, 0.5, 2); // верх, низ, высота

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

Сфера на самом деле собрана из плоских треугольников. Чем больше сегментов, тем больше треугольников и тем круглее она выглядит. Но за это платит видеокарта. Грубая сфера с 8 сегментами похожа на гранёный кристалл, а с 64 — на идеальный шар, зато треугольников в ней в разы больше.

Прикинем, как растёт число треугольников у сферы при росте сегментации. Для UV-сферы их примерно 2 × widthSegments × (heightSegments − 1).

function triCount(w, h) {
  return 2 * w * (h - 1);
}

console.log('Грубая 8x6:', triCount(8, 6), 'треуг.');
console.log('Средняя 32x16:', triCount(32, 16), 'треуг.');
console.log('Гладкая 64x32:', triCount(64, 32), 'треуг.');

Вывод:

Грубая 8x6: 80 треуг.
Средняя 32x16: 960 треуг.
Гладкая 64x32: 3968 треуг.

Вывод практический: детализацию подбирают под размер объекта на экране. Для главного героя в центре — высокая, для фоновых шариков — низкая.

Когда геометрий не хватает

Встроенные формы хороши для прототипов и простых сцен. Для сложных объектов — персонажей, мебели, машин — формы делают в редакторах (Blender) и загружают как модели через GLTFLoader. Об этом в пятом разделе.

Итог

• Box, Sphere, Plane, Cylinder, Torus — рабочий набор на каждый день.
• Сегменты задают гладкость ценой числа треугольников.
• Детализацию подбирают под размер объекта на экране.