Three.js предоставляет широкий набор встроенных геометрий для создания сложных объектов с минимальными усилиями. Среди них особое место занимают TubeGeometry, LatheGeometry и ExtrudeGeometry, которые позволяют формировать объемные объекты на основе кривых и профилей.
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 создаёт объекты вращением профиля вокруг оси 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 превращает 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).bevel и steps для реалистичных эффектов,
особенно для текста и декоративных элементов.MeshStandardMaterial и
MeshPhysicalMaterial, что позволяет достигать качественного
освещения и отражений.Использование этих геометрий позволяет создавать сложные 3D-модели без необходимости вручную строить каждую вершину, упрощает генерацию объектов с криволинейной и симметричной структурой и открывает возможности для динамического моделирования в Three.js.