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

Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Современные веб-технологии позволяют создавать сложные трёхмерные приложения непосредственно в браузере без необходимости установки дополнительного программного обеспечения. Одной из ключевых технологий является WebGL, обеспечивающая аппаратное ускорение графики и высокую производительность визуализации. Использование данной технологии открывает широкие возможности для разработки интерактивных приложений, включая обучающие системы, визуализацию данных и компьютерные игры.

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

Одним из важных методов создания трёхмерных объектов является экструдирование — процесс выдавливания двумерной фигуры в третье измерение. Этот метод широко применяется в компьютерной графике и позволяет быстро создавать объёмные модели на основе простых контуров.

В процессе выполнения работы была разработана трёхмерная сцена с использованием библиотеки Three.js. Для этого была инициализирована камера типа PerspectiveCamera, задающая перспективную проекцию и положение наблюдателя в пространстве. Также были добавлены источники освещения, включая AmbientLight для равномерного освещения сцены и DirectionalLight для имитации направленного источника света. Отрисовка сцены осуществляется с помощью объекта WebGLRenderer, который обеспечивает вывод графики в браузере.

Создание трёхмерного объекта начинается с задания его двумерного контура. Для этого используется класс Shape, позволяющий описывать фигуру с помощью последовательности точек на плоскости. В программной реализации контур задаётся с использованием методов moveTo и lineTo, которые определяют начальную точку и последующие вершины фигуры. Например, следующий фрагмент кода создаёт замкнутый многоугольник:

const shape = new THREE.Shape();

shape.moveTo(2, 3);

shape.lineTo(5, 2);

shape.lineTo(-1, -6);

shape.lineTo(-5, -4);

shape.lineTo(-2, 3);

После задания контура выполняется его преобразование в трёхмерную геометрию с помощью класса ExtrudeGeometry. Для этого задаются параметры экструдирования, включая глубину выдавливания, количество шагов и параметры сглаживания краёв. Пример задания параметров приведён ниже:

const extrudeSettings = {

steps: 2,

depth: 40,

bevelEnabled: true,

bevelThickness: 1,

bevelSize: 1,

bevelOffset: 0,

bevelSegments: 1

};

Создание трёхмерной геометрии осуществляется с помощью следующей команды:

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

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

Для визуализации объекта используются материалы и текстуры. В частности, применяется класс MeshPhongMaterial, позволяющий учитывать освещение и создавать более реалистичное отображение поверхности. Пример создания материала с текстурой:

var textureLoader = new THREE.TextureLoader();

var texture = textureLoader.load(‘textures/4.jpg’);

var material = new THREE.MeshPhongMaterial({ map: texture });

После создания геометрии и материала формируется трёхмерный объект, который добавляется в сцену:

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

scene.add(mesh);

После добавления объекта сцена отображается в браузере. С помощью элементов управления, таких как OrbitControls, пользователь может вращать модель, изменять масштаб и исследовать объект с разных ракурсов.

    
Рисунок 1. Отображение фигуры

В результате выполнения работы была создана трёхмерная модель, полученная методом экструдирования. Разработанное приложение корректно функционирует в браузере и обеспечивает интерактивное взаимодействие пользователя со сценой.

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

Полученные знания позволяют разрабатывать современные веб-приложения, связанные с трёхмерной графикой, визуализацией и интерактивными интерфейсами, а также могут быть использованы в образовательных и практических целях.

1. WebGL Fundamentals [Электронный ресурс]. – Режим доступа: https://webglfundamentals.org/
2. Three.js Documentation [Электронный ресурс]. – Режим доступа: https://threejs.org/
3. Вильданов А.Н. 3D-моделирование на WebGL с помощью библиотеки Three.js. – Уфа, 2014.
4. Mozilla Developer Network. WebGL API [Электронный ресурс]. – Режим доступа: https://developer.mozilla.org/

Все статьи автора «Миннегалиев Тагир Рифатович»