Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
WebGL – это программная библиотека для JavaScript, которая позволяет создавать 3D графику, функционирующую в браузерах. Данная библиотека основана на архитектуре OpenGL. WebGL использует язык программирования шейдеров GLSL, имеющий C-подобный синтаксис. Особенность WebGL заключается в том, что код моделируется непосредственно в браузере с использованием элемента canvas, введенного в HTML5.
Работа с WebGL и шейдерами в частности — довольно трудоемкий процесс, требующий описания каждой точки, линии и грани. Для визуализации необходимо прописывать объемные фрагменты кода. Чтобы ускорить разработку, была создана библиотека Three.js, которая представляет собой набор готовых классов для создания и отображения интерактивной 3D графики. Three.js для WebGL — это как jQuery для JavaScript: библиотека предлагает декларативный синтаксис и абстрагирует разработчика от сложностей, связанных с 3D в браузере.
Для создания сцены с геометрическими фигурами мы использовали современный подход с импортом модулей:
javascript
import * as THREE from ‘three’;
import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;
Такой способ подключения (с использованием import maps) является более чистым и предпочтительным в современных веб-приложениях.
Инициализация сцены и основных компонентов
Первым шагом мы создаем сцену, камеру и рендерер:
javascript
const container = document.createElement(‘div’);
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(300, 500, 1200);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
Камера установлена на оптимальном расстоянии (1200 единиц), чтобы хорошо видеть оба ряда фигур. Параметр antialias включает сглаживание для более плавных краев объектов.
Освещение сцены
Для корректного отображения цветов и теней мы добавили два типа освещения:
javascript
ambientLight = new THREE.AmbientLight(0×404040, 2.0);
light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.set(1, 2, 1);
Фоновый свет (AmbientLight) обеспечивает базовое освещение всех поверхностей, а направленный свет (DirectionalLight) создает объем и подчеркивает форму объектов.
Управление камерой
Для интерактивного взаимодействия с пользователем подключены контроллеры OrbitControls, позволяющие вращать камеру вокруг сцены, приближать и отдалять изображение:
javascript
controls = new OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.enableZoom = true;
controls.minDistance = 300;
controls.maxDistance = 2000;
controls.enableDamping = true;
Размещение фигур в пространстве
Для организации фигур мы использовали Декартову систему координат и расположили объекты в два ряда. Каждая фигура имеет свои координаты position.set(x, y, z):
javascript
// Параметры расположения
const spacingX = 300; // расстояние между фигурами по X
const startX = -450; // начальная координата X
const row1Z = -200; // координата Z для первого ряда (задний)
const row2Z = 200; // координата Z для второго ряда (передний)
Создание геометрических фигур
В нашей сцене представлены различные типы геометрических тел, созданные с помощью встроенных классов Three.js:
1. Прямоугольник (BoxGeometry)
javascript
const geomBox = new THREE.BoxGeometry(300, 200, 220);
const box = new THREE.Mesh(geomBox, new THREE.MeshPhongMaterial({ color: 0xFFFF00 }));
2. Цилиндры и призмы (CylinderGeometry)
Класс CylinderGeometry универсален и позволяет создавать различные фигуры путем изменения параметров:
- Цилиндр (равные радиусы сверху и снизу, много сегментов)
- Треугольная призма (равные радиусы, 3 сегмента)
- Пятиугольная и шестиугольная призмы (равные радиусы, 5 и 6 сегментов)
3. Пирамиды и конусы
Установка верхнего радиуса в 0 превращает цилиндр в пирамиду или конус:
- Четырехугольная пирамида (верхний радиус 0, 4 сегмента)
- Шестиугольная пирамида (верхний радиус 0, 6 сегментов)
- Конус (верхний радиус 0, много сегментов для гладкости)
Цветовое оформление
Для каждой фигуры подобран индивидуальный цвет, делающий композицию яркой и наглядной:
- Желтый прямоугольник (0xFFFF00)
- Синий цилиндр (0x0000FF)
- Красная треугольная призма (0xFF0000)
- Зеленая шестиугольная пирамида (0x00FF00)
- Голубая пятиугольная призма (0x87CEEB)
- Салатовая четырехугольная пирамида (0x90EE90)
- Розовая шестиугольная призма (0xFFC0CB)
- Золотой конус (0xFFD700)
Визуализация и анимация
Для непрерывной отрисовки сцены используется цикл анимации:
javascript
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
Обработчик изменения размера окна обеспечивает корректное масштабирование сцены:
javascript
window.addEventListener(‘resize’, onWindowResize, false);
Результат
В результате выполнения кода мы получаем интерактивную 3D-сцену с двумя рядами геометрических фигур (всего 8 объектов), расположенных на сером фоне со вспомогательной сеткой. Пользователь может свободно вращать камеру, приближать и рассматривать каждую фигуру с разных ракурсов, что делает данное решение отличным демонстрационным материалом для изучения возможностей Three.js и WebGL.
