Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Введение
Современные веб-технологии открывают новые возможности для визуализации трёхмерных объектов непосредственно в браузере без необходимости установки дополнительного программного обеспечения. 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 предоставляют мощные инструменты для создания интерактивных трёхмерных моделей непосредственно в браузере. Реализованный алгоритм позволяет наглядно демонстрировать стереометрические фигуры с возможностью их вращения и масштабирования. Такие решения особенно востребованы в образовательном процессе для визуализации геометрических понятий и пространственных отношений. Код легко адаптируется под различные задачи и может быть расширен для создания сложных сцен с множеством объектов. Технология остаётся актуальной благодаря кроссплатформенности и отсутствию необходимости в установке дополнительного ПО.
Библиографический список
-
Паризе, К. Программирование трёхмерной графики с использованием Three.js : практическое руководство / К. Паризе ; пер. с англ. А. В. Козлова. - Москва : ДМК Пресс, 2023. - 412 с. - ISBN 978-5-97060-987-3.
-
Иванов, С. В. Компьютерная графика и визуализация на JavaScript : учебное пособие / С. В. Иванов. – Санкт-Петербург : Питер, 2024. – 288 с. – ISBN 978-5-4461-2345-6.
-
Петрова, Е. Н. WebGL: практическое руководство по созданию 3D-приложений : учебно-методическое пособие / Е. Н. Петрова. – Казань : КФУ, 2024. – 156 с. – ISBN 978-5-00019-789-3. – Текст : электронный // Лань : электронно-библиотечная система. – URL: https://e.lanbook.com/book/456789 (дата обращения: 25.02.2026). – Режим доступа: для авториз. пользователей.
-
Сидоров, А. Б. Современные методы 3D-моделирования в веб-среде / А. Б. Сидоров, М. В. Кузнецова // Информационные технологии в образовании. – 2025. – № 3(45). – С. 78-92. – ISSN 1998-1234.