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

WebGL, сокращение от Web Graphics Library, представляет собой JavaScript API, который позволяет отображать интерактивную 2D и 3D графику в любом совместимом веб-браузере. Он основан на OpenGL ES, широко используемой графической библиотеке для встраиваемых систем.

Используя WebGL, веб-разработчики могут создавать и отображать высокопроизводительную графику и визуальные эффекты в веб-приложениях без необходимости установки дополнительных плагинов или программного обеспечения. WebGL поддерживается большинством современных веб-браузеров и работает на различных платформах, включая настольные компьютеры и мобильные устройства.

Чтобы работать с WebGL, вам необходимо иметь четкое представление о концепциях JavaScript и компьютерной графики. Существуют также библиотеки и фреймворки, такие как Three.js и Babylon.js, которые упрощают процесс разработки, предоставляя абстракции более высокого уровня и утилиты для программирования на WebGL.

В этой статье будет использоваться Three.js. Внутри этой библиотеки есть класс EventsControls, который упрощает создание интерактивных приложений. Он предоставляет следующие возможности:

– Добавление события клика мышкой по объекту;

– Добавление события наведения мышки на объекты;

– Перетаскивание объектов с помощью мышки;

– Добавленные события работают с классом Mesh и с классом Object3D.

Для работы нам нужна библиотека Three.js и её класс EventsControl, подключаем их:

<script type=”module”>

    import * as THREE from ‘three’;

    import { EventControls } from ‘https://alexan0308.github.io/threejs/examples/js/controls/EventControls.js’;

Cоздадим переменную, которая будет отвечать за перемещение объектов:

const dragObjects = [];

Прописываем события:

eventControl = new EventControls( [ ... dragObjects ], camera, renderer.domElement );

eventControl.setDraggable( render, true );

eventControl.setMap ( checkerboard );

eventControl.setOrbitControl( controls );

Прописываем функцию, в которой будет работать перемещение объекта:

eventControl.attachEvent( ‘dragAndDrop’, function () {

    this.event.object.position.x =

        100*Math.round( this.event.object.position.x / 100);

    this.event.object.position.z =

        100*Math.round( this.event.object.position.z / 100);

});

Для примера создадим объект, к примеру куб и прописываем ему параметры: размер, координаты расположения, высоту и т.д.:

var geometry = new THREE.BoxGeometry( 200, 200, 200 );

var material = new THREE.MeshPhongMaterial( { color: 0x32CD32 } );

Cube = new THREE.Mesh( geometry, material );

Cube.position.set( 200, 0, -400 );

Cube.rotation.y = 300;

scene.add( Cube );

var Cube_bbox = new THREE.Box3();

Cube_bbox.setFromObject( Cube );

Cube.height = Cube_bbox.max.y – Cube_bbox.min.y;

Cube.position.set( 200, Cube.height/2, -400 );

А чтобы можно было сделать куб интерактивным допишем ему переменную, которую создали, для реализации перемещения объектов:

    dragObjects.push( Cube );

    scene.add( Cube );

Для подробного показа примера, были созданы несколько фигур, и чайник:

Рисунок 1. Интерактивные 3D-объекты созданные в WebGL.

Теперь их можно переместить, для наглядной демонстрации:

Рисунок 2. Перемещённые 3D-объекты.

Технология WebGL позволяет отрисовывать качественную графику прямо в браузере. Библиотека three.js дает понятный и доступный набор классов и методов для работы с трехмерной графикой. А создание интерактивных 3D-объектов, к примеру для сайтов, позволит вам разнообразить опыт пользователя, и даже его заинтересовать.

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

1. Язык гипертекстовой разметки HTML5;
2. Язык программирования JavaScript;
3. Библиотека Three.js версии r128;
4. Графический API WebGL;
5. Модуль OrbitControls для управления камерой.

Использование CDN-подключений позволяет обеспечить корректную работу приложения на различных платформах без дополнительной установки программного обеспечения.

Приложение построено по классической архитектуре Three.js и включает следующие основные элементы:

1. Сцену (THREE.Scene), содержащую все объекты визуализации;
   
2. Перспективную камеру (THREE.PerspectiveCamera);
   
3. Рендерер (THREE.WebGLRenderer), осуществляющий вывод изображения;
   
4. Источники освещения;
   
5. Трёхмерную модель объекта;
   
6. Средства пользовательского управления камерой.
   

Подобная структура обеспечивает модульность и возможность дальнейшего расширения функциональности.

Построение трёхмерной модели. Модель креста формируется из двух параллелепипедов, созданных с использованием класса BoxGeometry. Вертикальный элемент имеет размеры 6×60×3, горизонтальный — 40×6×3 и смещён относительно центра по оси Y.
Для объединения элементов используется объект THREE.Group, позволяющий рассматривать модель как единое целое. В качестве материала применяется MeshPhongMaterial, обеспечивающий корректное освещение и визуальное восприятие формы объекта.

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

HTML код приложения:

<!DOCTYPE html>

<html lang=”ru”>

<head>

    <title>three.js — Простой крест</title>

    <meta charset=”utf-8″>

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

</head>

<body>

<div id=”info”>Простой крест</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>

<script src=”https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js”></script>

<script>

    var camera, scene, renderer;

    var controls;

    init();

    animate();

    function init() {

        scene = new THREE.Scene();

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

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

        camera.position.set(0, 0, 100);

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

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

        document.body.appendChild(renderer.domElement);

        var ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

        directionalLight.position.set(1, 1, 1);

        scene.add(directionalLight);

        createSimpleCross();

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

        controls.enableDamping = true;

        controls.dampingFactor = 0.05;

        window.addEventListener(‘resize’, onWindowResize, false);

    }

    function createSimpleCross() {

        var group = new THREE.Group();

        var verticalGeometry = new THREE.BoxGeometry(6, 60, 3);

        var verticalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var vertical = new THREE.Mesh(verticalGeometry, verticalMaterial);

        group.add(vertical);

        var horizontalGeometry = new THREE.BoxGeometry(40, 6, 3);

        var horizontalMaterial = new THREE.MeshPhongMaterial({ color: 0xffff00 });

        var horizontal = new THREE.Mesh(horizontalGeometry, horizontalMaterial);

        horizontal.position.y = 8;

        group.add(horizontal);

        scene.add(group);

    }

    function onWindowResize() {

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

        camera.updateProjectionMatrix();

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

    }

    function animate() {

        requestAnimationFrame(animate);

        controls.update();

        renderer.render(scene, camera);

    }

</script>

</body>

</html>

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

Рисунок 1. Интерактивная трёхмерная модель простого креста

Полученные результаты подтверждают, что библиотека Three.js является эффективным инструментом для визуализации простых и сложных трёхмерных объектов в веб-приложениях, включая образовательные и демонстрационные системы.

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

В данной работе для создания трёхмерной фигуры используется метод экструдирования, реализованный средствами Three.js. Моделирование начинается с определения плоского замкнутого контура (профиля) на плоскости XY, координаты вершин которого задаются относительно начала координат. Затем этот контур выдавливается вдоль оси Z (или иной заданной нормали) на определённую высоту, формируя объёмное тело. Ключевым преимуществом является полный контроль над топологией: процесс создаёт боковые грани, соединяющие исходный и конечный контуры, а также при необходимости закрывает торцы полученного объекта. Такой подход позволяет быстро генерировать сложные архитектурные элементы, технические детали или абстрактные формы, демонстрируя стандартный пайплайн для задач параметрического моделирования в среде WebGL.

Рисунок 1. Исходный 2D-профиль фигуры в плоскости XY

Алгоритм создания трёхмерной модели методом экструдирования с использованием Three.js включает следующие последовательные шаги.

• Импортируем необходимые библиотеки: Three.js, а также, при необходимости, вспомогательные модули для управления кривыми (CurvePath) и геометрией (ExtrudeGeometry);
• Определяем форму (Shape) — массив двумерных точек (Vector2), описывающих замкнутый контур будущего профиля. Координаты задаются относительно центра (0,0);
• Создаём геометрию выдавливания (ExtrudeGeometry), передавая в неё объект Shape и параметры экструзии: depth (глубина/высота выдавливания), bevelEnabled (скос кромок) и другие;
• Настраиваем материал (например, MeshStandardMaterial) для визуализации модели;
• Создаём объект Mesh, объединяя полученную геометрию и материал, и добавляем его на сцену (Scene);
• Настраиваем освещение (AmbientLight, DirectionalLight) и камеру (PerspectiveCamera) для корректного отображения объекта;
• Инициируем рендерер (WebGLRenderer) и запускаем цикл анимации для отрисовки сцены;
• При необходимости добавляем элементы управления (OrbitControls) для интерактивного вращения и масштабирования модели;

Этот алгоритм является типовым для создания простых экструдированных объектов в Three.js и демонстрирует ключевые этапы работы с геометрией и материалами.

Ниже приведен фрагмент кода, реализующий ключевые шаги алгоритма:

import * as THREE from ‘three’;

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

const scene = new THREE.Scene();

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

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

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

document.body.appendChild(renderer.domElement);

const shape = new THREE.Shape();

const radius = 2;

const sides = 6;

for (let i = 0; i <= sides; i++) {

const angle = (i / sides) * Math.PI * 2;

const x = Math.cos(angle) * radius;

const y = Math.sin(angle) * radius;

if (i === 0) shape.moveTo(x, y);

else shape.lineTo(x, y);

}

const extrudeSettings = {

depth: 5,

bevelEnabled: true,

bevelThickness: 0.5,

bevelSize: 0.5,

bevelSegments: 3

};

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

const material = new THREE.MeshStandardMaterial({ color: 0x00aaff, metalness: 0.2, roughness: 0.7 });

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

scene.add(mesh);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

directionalLight.position.set(10, 20, 5);

scene.add(directionalLight);

camera.position.z = 15;

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

function animate() {

requestAnimationFrame(animate);

controls.update();

renderer.render(scene, camera);

}

animate();

Процесс выдавливания, описанный в коде, визуально представлен на Рисунке 1 и Рисунке 2. На первой иллюстрации показан исходный профиль, а на второй — итоговая трёхмерная модель после применения экструзии:

Рисунок 2. Результат экструдирования профиля вдоль оси Z

Заключение

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

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

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

Одним из важных методов создания трёхмерных объектов является экструдирование — процесс выдавливания двумерной фигуры в третье измерение. Этот метод широко применяется в компьютерной графике и позволяет быстро создавать объёмные модели на основе простых контуров.

В процессе выполнения работы была разработана трёхмерная сцена с использованием библиотеки Three.js. Для этого была инициализирована камера типа PerspectiveCamera, задающая перспективную проекцию и положение наблюдателя в пространстве. Также были добавлены источники освещения, включая AmbientLight для равномерного освещения сцены и DirectionalLight для имитации направленного источника света. Отрисовка сцены осуществляется с помощью объекта WebGLRenderer, который обеспечивает вывод графики в браузере.

Создание трёхмерного объекта начинается с задания его двумерного контура. Для этого используется класс Shape, позволяющий описывать фигуру с помощью последовательности точек на плоскости. В программной реализации контур задаётся с использованием методов moveTo и lineTo, которые определяют начальную точку и последующие вершины фигуры. Например, следующий фрагмент кода создаёт замкнутый многоугольник:

const shape = new THREE.Shape();

shape.moveTo(2, 3);

shape.lineTo(5, 2);

shape.lineTo(-1, -6);

shape.lineTo(-5, -4);

shape.lineTo(-2, 3);

После задания контура выполняется его преобразование в трёхмерную геометрию с помощью класса ExtrudeGeometry. Для этого задаются параметры экструдирования, включая глубину выдавливания, количество шагов и параметры сглаживания краёв. Пример задания параметров приведён ниже:

const extrudeSettings = {

steps: 2,

depth: 40,

bevelEnabled: true,

bevelThickness: 1,

bevelSize: 1,

bevelOffset: 0,

bevelSegments: 1

};

Создание трёхмерной геометрии осуществляется с помощью следующей команды:

const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

В результате формируется объёмный объект, повторяющий форму исходного двумерного контура.

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

var textureLoader = new THREE.TextureLoader();

var texture = textureLoader.load(‘textures/4.jpg’);

var material = new THREE.MeshPhongMaterial({ map: texture });

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

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

scene.add(mesh);

После добавления объекта сцена отображается в браузере. С помощью элементов управления, таких как OrbitControls, пользователь может вращать модель, изменять масштаб и исследовать объект с разных ракурсов.

    
Рисунок 1. Отображение фигуры

В результате выполнения работы была создана трёхмерная модель, полученная методом экструдирования. Разработанное приложение корректно функционирует в браузере и обеспечивает интерактивное взаимодействие пользователя со сценой.

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