Моделирование стереометрических фигур в браузере с помощью WebGL

author20348 — Wed, 01 Apr 2026 14:58:21 +0000

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

Когда перед разработчиком встает задача отобразить трехмерные объекты в браузере, первое, что приходит на ум — использовать WebGL. Однако писать на чистом WebGL — занятие не для слабонервных. Слишком много деталей приходится контролировать вручную: буферы вершин, шейдеры, матрицы преобразований. Именно поэтому практически любой проект в этой области начинается с подключения библиотеки Three.js. Она берет на себя всю низкоуровневую работу и позволяет сосредоточиться на самом главном — на том, что именно мы хотим показать пользователю.

Задача, которая была поставлена, звучала просто: создать веб-страницу, на которой размещены девять различных стереометрических фигур, включая классический чайник Юты. Все фигуры должны располагаться на общей плоскости, иметь различимые цвета и возможность интерактивного осмотра. Никакой анимации или сложных эффектов не требовалось — только чистая геометрия и удобство восприятия.

Первым делом подготавливается базовая HTML-структура. Здесь важно правильно организовать импорт модулей. Three.js использует модульную систему, поэтому на странице объявляется import map, который указывает, откуда загружать библиотеку и ее дополнения. Сам код пишется внутри тега script type=”module”, что позволяет использовать синтаксис импорта и экспорта прямо в браузере.

9 фигур + чайник на плоскости

Листинг 1 – Базовая структура HTML-документа и импорт зависимостей

Создание любой 3D-сцены в Three.js начинается с трех обязательных компонентов: сцены, камеры и рендерера. Сцена — это контейнер, в который помещаются все объекты, источники света и вспомогательные элементы. Камера определяет точку обзора — в данном случае выбрана перспективная камера с углом обзора 45 градусов, что приближает восприятие к тому, как человеческий глаз видит реальные объекты. Рендерер отвечает за отрисовку: он создает canvas-элемент и выводит на него изображение. Чтобы сцена не выглядела плоской, добавляется освещение. Два направленных источника света располагаются под разными углами, создавая четкие светотеневые переходы, а мягкий фоновый свет предотвращает появление слишком темных участков.

import * as THREE from ‘three’;

import { OrbitControls } from ‘three/addons/controls/OrbitControls.js’;

import { TeapotGeometry } from ‘three/addons/geometries/TeapotGeometry.js’;

const scene = new THREE.Scene();

scene.background = new THREE.Color(0xeeeeee);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(6, 4, 9);

camera.lookAt(0, 1, 0);

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.shadowMap.enabled = false;

document.body.appendChild(renderer.domElement);

const dirLight1 = new THREE.DirectionalLight(0xffffff, 1.0);

dirLight1.position.set(2, 5, 3);

scene.add(dirLight1);

const dirLight2 = new THREE.DirectionalLight(0xffffff, 0.7);

dirLight2.position.set(-3, 4, 4);

scene.add(dirLight2);

const ambientLight = new THREE.AmbientLight(0×404060);

scene.add(ambientLight);

Листинг 2 – Инициализация сцены, камеры, рендерера и освещения

Теперь, когда сцена готова к работе, необходимо создать опорную плоскость, на которой будут стоять фигуры. Для этого используется PlaneGeometry — плоский прямоугольник, который разворачивается горизонтально. Поверх него накладывается GridHelper — сетка, помогающая визуально оценить расположение объектов в пространстве. Эти два элемента создают необходимый контекст: фигуры не висят в пустоте, а имеют четкую привязку к поверхности.

Для удобства добавления фигур написана небольшая функция-обертка addFigure. Она принимает геометрию, цвет и координаты положения, создает материал с заданными свойствами и помещает объект на сцену. Такой подход избавляет от повторяющегося кода и делает добавление новых фигур простым и наглядным.

const planeGeometry = new THREE.PlaneGeometry(14, 14);

const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, side: THREE.DoubleSide });

const plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.rotation.x = Math.PI / 2;

plane.position.y = 0;

scene.add(plane);

const gridHelper = new THREE.GridHelper(14, 20, 0×666666, 0×333333);

gridHelper.position.y = 0.01;

scene.add(gridHelper);

function addFigure(geometry, color, position) {

const material = new THREE.MeshStandardMaterial({ color: color, roughness: 0.5, metalness: 0.0 });

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

mesh.position.set(position[0], position[1], position[2]);

scene.add(mesh);

}

addFigure(new THREE.BoxGeometry(1, 1, 1), 0x3366ff, [-3.5, 0.5, -3.0]);

addFigure(new THREE.ConeGeometry(0.7, 1.4, 4), 0xff9933, [-1.0, 0.7, -3.0]);

addFigure(new THREE.SphereGeometry(0.8, 32, 16), 0xaa66ff, [2, 0.8, -3.0]);

addFigure(new THREE.CylinderGeometry(0.7, 0.7, 1.4, 32), 0xf5deb3, [-2.6, 0.7, -0.5]);

addFigure(new THREE.ConeGeometry(0.8, 1.5, 32), 0x33cc33, [0.9, 0.75, -0.5]);

addFigure(new THREE.CylinderGeometry(0.7, 0.7, 1.2, 3), 0x99ff99, [-3.5, 0.6, 1.5]);

addFigure(new THREE.BoxGeometry(1.2, 0.8, 0.8), 0xff4444, [-1, 0.4, 1.8]);

addFigure(new THREE.CylinderGeometry(0.8, 0.8, 1.2, 6), 0xffdd44, [2, 0.6, 1.5]);

const teapotGeo = new TeapotGeometry(0.9, 12, true, true, true, true);

const teapotMat = new THREE.MeshStandardMaterial({ color: 0×222222, roughness: 0.3, metalness: 0.2 });

const teapot = new THREE.Mesh(teapotGeo, teapotMat);

teapot.position.set(-1.0, 1, 4);

teapot.rotation.set(0, 0.2, 0);

scene.add(teapot);

const controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = false;

controls.autoRotate = false;

controls.target.set(0, 0.8, 0);

function animate() {

requestAnimationFrame(animate);

controls.update();

renderer.render(scene, camera);

}

animate();

window.addEventListener(‘resize’, () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

Листинг 3 – Создание опорной плоскости, сетки, геометрических фигур и чайника

Восемь основных фигур размещаются в два ряда, чтобы их можно было легко рассмотреть как по отдельности, так и в сравнении. Куб, сфера, цилиндр и конус — это стандартные геометрические примитивы, которые в Three.js создаются соответствующими классами. Интереснее обстоит дело с призмами. Треугольная и шестиугольная призмы реализованы с помощью цилиндра, у которого количество сегментов уменьшено до трех и шести соответственно. Этот прием работает благодаря тому, что цилиндр с малым числом сегментов превращается в многогранник, а сглаживание граней делает его визуально похожим на призму.

Отдельного внимания заслуживает чайник. Это не просто случайная фигура, а объект с историей. Чайник Юты был создан в 1975 году Мартином Ньюэллом как тестовая модель для систем трехмерной графики. Его форма содержит криволинейные поверхности, отверстия и сложные изгибы, что делает его отличным индикатором качества рендеринга. В Three.js чайник доступен через TeapotGeometry из дополнений, и его подключение занимает всего несколько строк кода.

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

Каждая фигура получила свой цвет, что не только делает сцену более наглядной, но и помогает быстро идентифицировать объекты. Синий куб, оранжевая пирамида, фиолетовая сфера, бежевый цилиндр, зеленый конус, салатовая треугольная призма, красный параллелепипед, желтая шестиугольная призма и черный чайник — все они четко различимы даже при беглом взгляде на сцену.

Производительность приложения остается высокой благодаря нескольким решениям. Отключение теней (shadowMap.enabled = false) существенно снижает нагрузку на видеокарту, а разумный выбор количества сегментов у сферы (32×16) дает хорошее качество без избыточной геометрической сложности. Конечно, для более реалистичной сцены тени были бы полезны, но в учебно-демонстрационных задачах они часто оказываются излишними.

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

Рисунок 1. Финальный вид сцены с возможностью вращения камеры

Заключение

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

Электронный научно-практический журнал «Современные научные исследования и инновации» » интерактивная визуализация

Моделирование стереометрических фигур в браузере с помощью WebGL