В данной работе для создания трёхмерной фигуры используется метод экструдирования, реализованный средствами Three.js. Моделирование начинается с определения плоского замкнутого контура (профиля) на плоскости XY, координаты вершин которого задаются относительно начала координат. Затем этот контур выдавливается вдоль оси Z (или иной заданной нормали) на определённую высоту, формируя объёмное тело. Ключевым преимуществом является полный контроль над топологией: процесс создаёт боковые грани, соединяющие исходный и конечный контуры, а также при необходимости закрывает торцы полученного объекта. Такой подход позволяет быстро генерировать сложные архитектурные элементы, технические детали или абстрактные формы, демонстрируя стандартный пайплайн для задач параметрического моделирования в среде WebGL.

Рисунок 1. Исходный 2D-профиль фигуры в плоскости XY

Алгоритм создания трёхмерной модели методом экструдирования с использованием Three.js включает следующие последовательные шаги.

• Импортируем необходимые библиотеки: Three.js, а также, при необходимости, вспомогательные модули для управления кривыми (CurvePath) и геометрией (ExtrudeGeometry);
• Определяем форму (Shape) — массив двумерных точек (Vector2), описывающих замкнутый контур будущего профиля. Координаты задаются относительно центра (0,0);
• Создаём геометрию выдавливания (ExtrudeGeometry), передавая в неё объект Shape и параметры экструзии: depth (глубина/высота выдавливания), bevelEnabled (скос кромок) и другие;
• Настраиваем материал (например, MeshStandardMaterial) для визуализации модели;
• Создаём объект Mesh, объединяя полученную геометрию и материал, и добавляем его на сцену (Scene);
• Настраиваем освещение (AmbientLight, DirectionalLight) и камеру (PerspectiveCamera) для корректного отображения объекта;
• Инициируем рендерер (WebGLRenderer) и запускаем цикл анимации для отрисовки сцены;
• При необходимости добавляем элементы управления (OrbitControls) для интерактивного вращения и масштабирования модели;

Этот алгоритм является типовым для создания простых экструдированных объектов в Three.js и демонстрирует ключевые этапы работы с геометрией и материалами.

Ниже приведен фрагмент кода, реализующий ключевые шаги алгоритма:

import * as THREE from ‘three’;

import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const shape = new THREE.Shape();

const radius = 2;

const sides = 6;

for (let i = 0; i <= sides; i++) {

const angle = (i / sides) * Math.PI * 2;

const x = Math.cos(angle) * radius;

const y = Math.sin(angle) * radius;

if (i === 0) shape.moveTo(x, y);

else shape.lineTo(x, y);

}

const extrudeSettings = {

depth: 5,

bevelEnabled: true,

bevelThickness: 0.5,

bevelSize: 0.5,

bevelSegments: 3

};

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

const material = new THREE.MeshStandardMaterial({ color: 0x00aaff, metalness: 0.2, roughness: 0.7 });

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

directionalLight.position.set(10, 20, 5);

scene.add(directionalLight);

camera.position.z = 15;

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {

requestAnimationFrame(animate);

controls.update();

renderer.render(scene, camera);

}

animate();

Процесс выдавливания, описанный в коде, визуально представлен на Рисунке 1 и Рисунке 2. На первой иллюстрации показан исходный профиль, а на второй — итоговая трёхмерная модель после применения экструзии:

Рисунок 2. Результат экструдирования профиля вдоль оси Z

Заключение

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