Введение

Современные веб-технологии открывают новые возможности для визуализации трёхмерных объектов непосредственно в браузере без необходимости установки дополнительного программного обеспечения. WebGL (Web Graphics Library) представляет собой JavaScript API, позволяющий создавать интерактивную 3D-графику, работающую в любом современном браузере. Эта технология особенно актуальна для образовательных целей, где наглядная демонстрация стереометрических фигур помогает студентам лучше понимать пространственные отношения и геометрические свойства объектов.

Моделирование куба, пирамиды, сферы и других тел вращения с помощью WebGL и библиотеки Three.js (рисунок 1) открывает широкие возможности для создания виртуальных лабораторий, интерактивных учебных пособий и демонстрационных материалов. В условиях дистанционного обучения такие инструменты становятся незаменимыми для наглядного представления абстрактных математических концепций.

Алгоритм моделирования стереометрических фигур

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

• импортируем библиотеку Three.js в HTML-документ;
  
• создаём сцену, камеру и рендерер для отображения графики;
  
• устанавливаем позицию камеры и настраиваем перспективу;
  
• добавляем источники света для реалистичного отображения теней;
  
• создаём геометрические объекты (куб, пирамиду, сферу) с заданными размерами;
  
• определяем материалы и текстуры для поверхностей фигур;
  
• добавляем созданные объекты на сцену;
  
• реализуем анимацию вращения фигур с помощью requestAnimationFrame;
  
• обрабатываем изменения размеров окна браузера.
  

Этот алгоритм позволяет создавать интерактивные 3D-сцены с возможностью вращения, масштабирования и изменения параметров объектов в реальном времени. Для стереометрических фигур важно правильно настроить освещение, чтобы подчеркнуть их объём и грани.

Реализация на JavaScript с Three.js

Ниже приведён фрагмент кода, демонстрирующий создание трёх стереометрических фигур (куба, пирамиды и сферы) с анимацией вращения:

javascript

import * as THREE from ‘https://cdn.skypack.dev/three@0.132.2′;
const scene = new THREE.Scene();
scene.background = new THREE.Color(0×111122);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 10);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

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

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7);
directionalLight.castShadow = true;
scene.add(directionalLight);

const cubeGeometry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshStandardMaterial({

color: 0x44aa88,
emissive: 0×112233,
roughness: 0.4,
metalness: 0.1

});
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-3, 1, 0);
cube.castShadow = true;
cube.receiveShadow = true;
scene.add(cube);
const pyramidGeometry = new THREE.ConeGeometry(1.2, 2.5, 4);
const pyramidMaterial = new THREE.MeshStandardMaterial({

color: 0xaa44aa,
emissive: 0×221122,
roughness: 0.3,
metalness: 0.2

});
const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
pyramid.position.set(0, 1.25, 0);
pyramid.castShadow = true;
pyramid.receiveShadow = true;
scene.add(pyramid);
const sphereGeometry = new THREE.SphereGeometry(1.3, 32, 32);
const sphereMaterial = new THREE.MeshStandardMaterial({

color: 0xaa4444,
emissive: 0×221111,
roughness: 0.2,
metalness: 0.3

});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(3, 1.3, 0);
sphere.castShadow = true;
sphere.receiveShadow = true;
scene.add(sphere);
const planeGeometry = new THREE.PlaneGeometry(15, 10);
const planeMaterial = new THREE.MeshStandardMaterial({

color: 0×335577,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.7

});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = Math.PI / 2;
plane.position.y = 0;
plane.receiveShadow = true;
scene.add(plane);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
function animate() {

requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
pyramid.rotation.y += 0.02;
sphere.rotation.x += 0.005;
sphere.rotation.y += 0.01;
renderer.render(scene, camera);

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

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);

});

Заключение

WebGL и библиотека Three.js предоставляют мощные инструменты для создания интерактивных трёхмерных моделей непосредственно в браузере. Реализованный алгоритм позволяет наглядно демонстрировать стереометрические фигуры с возможностью их вращения и масштабирования. Такие решения особенно востребованы в образовательном процессе для визуализации геометрических понятий и пространственных отношений. Код легко адаптируется под различные задачи и может быть расширен для создания сложных сцен с множеством объектов. Технология остаётся актуальной благодаря кроссплатформенности и отсутствию необходимости в установке дополнительного ПО.

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

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

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

<!DOCTYPE html>

<html lang=”ru”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

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

    <style>

        body { margin: 0; overflow: hidden; background-color: #111; }

    </style>

</head>

<body>

    <script type=”importmap”>

        {

            “imports”: {

                “three”: “https://unpkg.com/three@0.128.0/build/three.module.js”,

                “three/addons/”: “https://unpkg.com/three@0.128.0/examples/jsm/”

            }

        }

    </script>

    <script type=”module”>

        // весь код приложения

    </script>

</body>

</html>

Листинг 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-сцена включает девять геометрических объектов, реализованных с помощью стандартных примитивов библиотеки. Обеспечена интерактивность за счет подключения контроллера камеры, позволяющего пользователю вращать и масштабировать сцену. Разработанное приложение может быть использовано в образовательных целях для изучения основ стереометрии и демонстрирует возможности современных веб-технологий в области трехмерного моделирования.