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.