ТРЕХМЕРНОЕ МОДЕЛИРОВАНИЕ МЕТОДОМ ЭКСТРУДИРОВАНИЯ В СРЕДЕ THREE.JS

Метод экструдирования (выдавливания) остаётся одним из фундаментальных и наиболее интуитивно понятных инструментов в арсенале 3D-моделлера. Этот процесс, преобразующий двумерные контуры в трёхмерные объёмные объекты, десятилетиями используется как в профессиональных пакетах (Blender, Maya, 3ds Max), так и в веб-ориентированных фреймворках, таких как Three.js. В эпоху повсеместного распространения интерактивной 3D-графики в браузерах, веб-приложениях и играх освоение базовых техник моделирования сохраняет свою практическую ценность. Оно позволяет наглядно демонстрировать переход от абстрактной геометрии к визуальному объекту: от задания вершин на плоскости и формирования профиля до управления параметрами выдавливания и получения готовой модели. Использование доступных библиотек, таких как Three.js, делает процесс создания 3D-контента достижимым даже для новичков, а сама техника экструзии служит отправной точкой для понимания более сложных методов моделирования, скульптинга и анимации.

В данной работе для создания трёхмерной фигуры используется метод экструдирования, реализованный средствами 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, как показано в работе, позволяет эффективно создавать объёмные объекты из плоских контуров, демонстрируя типичный пайплайн для параметрического моделирования в веб-среде. Ключевыми этапами являются корректное задание профиля, настройка параметров выдавливания и управление материалами с освещением. Освоение этого метода формирует прочную основу для перехода к более сложным техникам, таким как булевы операции, модификация геометрии, скелетная анимация и работа с воксельными данными, что открывает путь к решению современных задач в разработке игр, симуляций и интерактивных визуализаций.

1. Terentyev, A.V. АНАЛИЗ ТЕХНОЛОГИЙ ДЛЯ ОТОБРАЖЕНИЯ ТРЕХМЕРНЫХ ОБЪЕКТОВ В ИНТЕРНЕТЕ / A. V. Terentyev, А. В. Терентьев // Молодой исследователь Дона. — 2020. — № 1 (22). — С. 101-105. — ISSN 2500-1779. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/journal/issue/372691 (дата обращения: 26.12.2025).
2. Коичи, М. WebGL: программирование трехмерной графики / М. Коичи, Л. Роджер ; перевод с английского А. Н. Киселев. — Москва : ДМК Пресс, 2015. — 494 с. — ISBN 978-5-97060-146-4. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/63189 (дата обращения: 26.12.2025).
3. HTML5 Полный курс : учебно-методическое пособие / М. Р. Богданов, Л. В. Вахидова, И. Н. Думчикова, Л. В. Миниярова. — Уфа : БГПУ имени М. Акмуллы, 2015. — 168 с. — Текст : электронный // Лань : электронно-библиотечная система. — URL: https://e.lanbook.com/book/72507 (дата обращения: 26.12.2025).

Все статьи автора «Хасанов Даниэль Рустамович»