Встроенные примитивы: TubeGeometry, LatheGeometry, ExtrudeGeometry

Three.js предоставляет широкий набор встроенных геометрий для создания сложных объектов с минимальными усилиями. Среди них особое место занимают TubeGeometry, LatheGeometry и ExtrudeGeometry, которые позволяют формировать объемные объекты на основе кривых и профилей.


TubeGeometry

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

Синтаксис создания:

const path = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(10, 10, 0),
    new THREE.Vector3(20, 0, 0)
]);

const tube = new THREE.TubeGeometry(path, 64, 2, 8, false);

Параметры:

  • path — объект типа THREE.Curve, задающий путь.
  • tubularSegments — количество сегментов вдоль пути.
  • radius — радиус трубы.
  • radialSegments — количество сегментов по окружности.
  • closed — замкнута ли труба (true/false).

Особенности:

  • Поддерживает сложные кривые, включая CatmullRomCurve3 и SplineCurve.
  • Автоматически строит нормали, обеспечивая корректное освещение.
  • Может использоваться для создания шлангов, тросов, арок и динамических трасс.

LatheGeometry

LatheGeometry создаёт объекты вращением профиля вокруг оси Y. Это удобно для моделирования симметричных объектов вроде ваз, бокалов, колонн и колес.

Синтаксис создания:

const points = [];
for (let i = 0; i < 10; i++) {
    points.push(new THREE.Vector2(Math.sin(i * 0.2) * 5 + 5, i));
}

const lathe = new THREE.LatheGeometry(points, 32);

Параметры:

  • points — массив объектов THREE.Vector2, задающих профиль.
  • segments — количество сегментов вокруг оси вращения.
  • phiStart — начальный угол вращения (по умолчанию 0).
  • phiLength — длина вращения в радианах (по умолчанию 2π, полный круг).

Особенности:

  • Позволяет создавать как полные, так и частичные вращения.
  • Позволяет генерировать гладкие поверхности при достаточном количестве сегментов.
  • Поддерживает динамическое изменение массива точек для интерактивного моделирования.

ExtrudeGeometry

ExtrudeGeometry превращает 2D-профиль в 3D-объект путём выдавливания. Идеально подходит для создания сложных плоских форм с глубиной, таких как буквы, панели, рамки или декоративные элементы.

Синтаксис создания:

const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(0, 10);
shape.lineTo(10, 10);
shape.lineTo(10, 0);
shape.closePath();

const extrudeSettings = {
    steps: 2,
    depth: 5,
    bevelEnabled: true,
    bevelThickness: 1,
    bevelSize: 1,
    bevelSegments: 2
};

const extrude = new THREE.ExtrudeGeometry(shape, extrudeSettings);

Параметры:

  • shape — объект THREE.Shape, задающий 2D-контур.

  • extrudeSettings:

    • steps — количество сегментов по глубине.
    • depth — глубина выдавливания.
    • bevelEnabled — включение скосов.
    • bevelThickness — толщина скоса.
    • bevelSize — размер скоса.
    • bevelSegments — количество сегментов скоса.

Особенности:

  • Позволяет создавать сложные формы с отверстиями (используется holePaths внутри Shape).
  • Совместим с кривыми Bezier и Arc, что расширяет возможности дизайна.
  • Поддерживает настройку фасок и скруглений, улучшая визуальное качество.

Практические рекомендации

  • Для TubeGeometry важно выбирать кривую без резких углов, иначе нормали могут искривляться, что приведёт к артефактам при освещении.
  • При работе с LatheGeometry количество сегментов влияет на плавность модели: слишком мало сегментов создаёт «гранёную» поверхность.
  • В ExtrudeGeometry следует комбинировать bevel и steps для реалистичных эффектов, особенно для текста и декоративных элементов.
  • Все три геометрии совместимы с MeshStandardMaterial и MeshPhysicalMaterial, что позволяет достигать качественного освещения и отражений.

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