Введение

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