Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Введение. Развитие веб-технологий привело к возможности использования трёхмерной графики непосредственно в интернет-браузерах. Стандарт WebGL обеспечивает доступ к аппаратному ускорению графики, однако его использование требует глубоких знаний в области компьютерной графики. В связи с этим широкое распространение получили высокоуровневые библиотеки, упрощающие процесс создания 3D-сцен.
Одной из наиболее популярных библиотек является Three.js, предоставляющая удобные средства для создания и визуализации трёхмерных объектов. Целью данной работы является демонстрация применения библиотеки Three.js для визуализации простого геометрического объекта и анализа основных этапов построения трёхмерной сцены.
Для реализации трёхмерной визуализации были использованы следующие технологии:
- Язык гипертекстовой разметки HTML5;
- Язык программирования JavaScript;
- Библиотека Three.js версии r128;
- Графический API WebGL;
- Модуль OrbitControls для управления камерой.
Использование CDN-подключений позволяет обеспечить корректную работу приложения на различных платформах без дополнительной установки программного обеспечения.
Приложение построено по классической архитектуре Three.js и включает следующие основные элементы:
-
Сцену (THREE.Scene), содержащую все объекты визуализации;
-
Перспективную камеру (THREE.PerspectiveCamera);
-
Рендерер (THREE.WebGLRenderer), осуществляющий вывод изображения;
-
Источники освещения;
-
Трёхмерную модель объекта;
-
Средства пользовательского управления камерой.
Подобная структура обеспечивает модульность и возможность дальнейшего расширения функциональности.
Построение трёхмерной модели. Модель креста формируется из двух параллелепипедов, созданных с использованием класса BoxGeometry. Вертикальный элемент имеет размеры 6×60×3, горизонтальный — 40×6×3 и смещён относительно центра по оси Y.
Для объединения элементов используется объект THREE.Group, позволяющий рассматривать модель как единое целое. В качестве материала применяется MeshPhongMaterial, обеспечивающий корректное освещение и визуальное восприятие формы объекта.
Освещение сцены реализовано с помощью двух источников света: рассеянного (AmbientLight) и направленного (DirectionalLight). Такое сочетание позволяет добиться равномерной освещённости и визуального подчёркивания формы объекта.
Для управления камерой используется модуль OrbitControls, обеспечивающий вращение сцены, масштабирование и плавное перемещение точки наблюдения. Это повышает интерактивность и удобство работы с трёхмерной моделью.
HTML код приложения:
<!DOCTYPE html>
<html lang=”ru”>
<head>
<title>three.js — Простой крест</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
<body>
<div id=”info”>Простой крест</div>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js”></script>
<script>
var camera, scene, renderer;
var controls;
init();
animate();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 100);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
createSimpleCross();
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
window.addEventListener(‘resize’, onWindowResize, false);
}
function createSimpleCross() {
var group = new THREE.Group();
var verticalGeometry = new THREE.BoxGeometry(6, 60, 3);
var verticalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });
var vertical = new THREE.Mesh(verticalGeometry, verticalMaterial);
group.add(vertical);
var horizontalGeometry = new THREE.BoxGeometry(40, 6, 3);
var horizontalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });
var horizontal = new THREE.Mesh(horizontalGeometry, horizontalMaterial);
horizontal.position.y = 8;
group.add(horizontal);
scene.add(group);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
В результате выполнения программы в браузере отображается интерактивная трёхмерная модель простого креста. Пользователь может изменять ракурс обзора и масштаб, что позволяет детально рассмотреть объект с различных сторон.
Рисунок 1. Интерактивная трёхмерная модель простого креста
Полученные результаты подтверждают, что библиотека Three.js является эффективным инструментом для визуализации простых и сложных трёхмерных объектов в веб-приложениях, включая образовательные и демонстрационные системы.
Заключение. В работе рассмотрен пример использования библиотеки Three.js для создания интерактивной трёхмерной визуализации. Показано, что применение высокоуровневых средств позволяет существенно упростить процесс разработки 3D-графики в веб-среде. Рассмотренный пример может служить основой для дальнейших исследований и разработки более сложных визуальных моделей.
Библиографический список
- Cabello R. Three.js documentation [Электронный ресурс]. — Режим доступа: https://threejs.org (дата обращения: 27.12.2025).
- Khronos Group. WebGL Specification [Электронный ресурс]. — Режим доступа: https://www.khronos.org/webgl (дата обращения: 27.12.2025).
- Dirksen J. Learning Three.js: The JavaScript 3D Library for WebGL. — Birmingham: Packt Publishing, 2018. — 432 p.