Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Когда перед разработчиком встает задача отобразить трехмерные объекты в браузере, первое, что приходит на ум — использовать 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-сцена включает девять геометрических объектов, реализованных с помощью стандартных примитивов библиотеки. Обеспечена интерактивность за счет подключения контроллера камеры, позволяющего пользователю вращать и масштабировать сцену. Разработанное приложение может быть использовано в образовательных целях для изучения основ стереометрии и демонстрирует возможности современных веб-технологий в области трехмерного моделирования.
Библиографический список
- Коматинени, С. Android-программирование для профессионалов / С. Коматинени, Д. Маклин. — 4-е изд. — Санкт-Петербург : Питер, 2021. — 832 с. — ISBN 978-5-4461-1678-2.
- Хортон, Д. Android. Программирование для профессионалов / Д. Хортон. — Москва : Эксмо, 2020. — 672 с. — ISBN 978-5-04-113108-5.
- Гриффитс, Д. Head First. Программирование для Android / Д. Гриффитс, Д. Гриффитс. — Санкт-Петербург : Питер, 2019. — 912 с. — ISBN 978-5-4461-1126-8.
- Мейер, Б. Android 6 для программистов. Разработка приложений / Б. Мейер. — Санкт-Петербург : БХВ-Петербург, 2021. — 528 с. — ISBN 978-5-9775-3849-3.