Программная библиотека для языка программирования JavaScript Web-based Graphics Library (WebGL) позволяет реализовать элементы 3D-графики на веб-страницах[5].

Одним из главных преимуществ WebGL является построение 3D-элементов непосредственно как веб-страницы, что не требует установки дополнительных расширений или подключения дополнительных библиотек со стороны пользователя. Это позволяет WebGL программам благополучно исполняться практически на любом устройстве пользователя (и на стационарных компьютерах, и планшетных компьютерах, на смартфонах, и игровых консолях…).

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

При разработке WebGL приложений часто используется кроссбраузерная библиотека three.j, применяемая для создания и отображения анимированных трехмерных изображений.

Перед тем как приступить к созданию 3D объекта с использованием библиотек желательно, для удобства работы, установить на свой компьютер программу для создания и редактирования кода web-страницы и программу, которая создаст сервер, для того, чтобы после сохранения объект можно было просмотреть в браузере. Например, в первом случае можно использовать VisualStudioCode для создания и редактирования исходного кода[6], а для создания веб-сервера – Сaddy[7].

Далее для последующей работы необходимо скачать библиотеку three.js[8].После чего можно приступать к написанию кода. Для того, чтобы функции библиотеки вступили в силу необходимо в html-коде прописать путь к ней:<scriptsrc=”libs/three.min.js”></script>.

Рассмотрим возможности технологии WebGLна примере создания куба.

Для того,чтобы создать WebGL приложение, содержащее трехмерное изображение, необходимо:

1) определить область вывода изображения, в котором оно будет отображаться:

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 ); // создание камеры

camera.position.z = 400; //выбор положения

var texture = new THREE.TextureLoader().load( ‘textures/cube.jpg’ ); //добавление текстуры

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 ); //определение размера куба

var material = new THREE.MeshBasicMaterial( { map: texture } ); //определение материала состоящего из текстуры

В данном случае «cube.jpg» - это картинка, выбранная заранее.

renderer = newTHREE.WebGLRenderer(); // Настройка среды рендеринга в среду WebGL

renderer.setPixelRatio(window.devicePixelRatio ); //задание геометрии пикселей на устройстве отображения

renderer.setSize(window.innerWidth, window.innerHeight ); //определение границ области рендринга

document.body.appendChild(renderer.domElement );

Для того, чтобы объект можно было вращать и просматривать его со всех сторон при написании кода были использованы функции:

• startRotateCube– обработка события нажатия на левую кнопку мыши;
• endRotatingCube – обработка события отпускания левой кнопки мыши;
• rotateCube– процесс движения курсора мыши

После чего, созданный код необходимо сохранить как html-файл. Созданный файл можно просмотреть в браузере (рис.1).

Рис.1. Отображение 3D-объекта в браузере Google Chrome

Данный пример показывает, как много манипуляций потребовалось по скачиванию и установке тех или иных файлов, чтобы приступить к работе. Так же, само написание кода объекта требует определенных навыков в программировании. Сам текст кода довольно объемный для такого простого объекта (для этого проекта общее количество строк кода составило 122). А значит, можно сделать вывод, на сколько трудно будет создавать более сложные объекты, используя технологиюWebGL.

Blend4Web предназначена для создания визуализаций, презентаций, интернет-магазинов, игр и других web-приложений.

Данный фреймворк тесно связан с пакетом 3D моделирования и анимации Blender.

Графический движок можно комбинировать со звуковой системой, физическим движком, системой, которая реализуетискусственный интеллект, сетевую систему, а также редактор сцен и логики, формируя интегрированный инструментарий для создания 3D приложений – трехмерный движок.

Blend4Web предлагает всю визуальную работу выполнять в Blender: настраивать сцену, создавать модели и расставлять их, управлять физикой или частицами.

Рассмотрим возможности технологии Blend4Web на примере создания куба.

Для того, чтобы создать Blend4Web приложение, содержащее трехмерное изображение, необходимо:

1. Скачать Blend4Web с официального сайта [1] и выполнить установку на компьютер.
2. Выполнить настройку редактора Blender под технологию Blend4Web.
3. Затем Необходимо выбрать фигуру «Cube» во вкладке «Add Primitive» (Рис.1)

   

   Рис.1 Выбор фигуры «Куб»

4. Далее необходимо выбрать материал куба, выполнить настройку отображения «Image Movie» и загрузить текстуру. В данном случае это заранее выбранная картинка «Cube.jpg» (Рис.2)

   

   Рис.2 Выбор текстуры

5. После, нужно настроить освещение, чтобы куб можно было увидеть при экспорте в браузер. Выбрать во вкладке «Create» настройку «Sun». В окне предварительного просмотра можно наблюдать за процессом изменения создаваемого объекта (Рис.3)

   

   Рис.3 Окно предварительного просмотра «Preview»

6. Для того, чтобы изображение можно было просматривать в браузере необходимо его экспортировать в html – файл.

Созданный файл можно просмотреть и вращать в браузере без дополнительных настроек (рис.1).

Рис.4. Отображение 3D-объекта в браузере GoogleChrome

Данный пример показывает, что использование Blend4Web для разработки трехмерных изображений довольно удобно пользователю, так как разработка происходит по большей части в графическом интерфейсе, нежели составлением громоздких кодов (например, как в WebGL). Максимально снижаются барьеры вхождения разработчиков в технологию WebGL и других менее используемых технологий основанных на составлении кода. Тем самым сокращается и время создания объекта.

к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал

Разработка трехмерных моделей с применением технологии WebGL представляет собой актуальное направление в современном веб-программировании, ориентированное на интеграцию высокопроизводительных трехмерных графических изображений в онлайн-среду без необходимости установки дополнительных плагинов. WebGL, или Web Graphics Library, является JavaScript API, предназначенным для рендеринга трехмерной графики в веб-браузерах. Ключевой характеристикой данной технологии является возможность эффективного использования вычислительных мощностей современных графических процессоров, что обеспечивает выдающиеся результаты в визуализации сложных трехмерных структур.

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

Для начала работы с трехмерной графикой веб-приложений мы включаем необходимые библиотеки: three.js для создания и управления трехмерными сценами, и OrbitControls.js для обеспечения удобного взаимодействия с камерой в пространстве. Подключение этих модулей может быть выполнено следующим образом:

<script type=”module”>

import * as THREE from ‘https://threejs.org/build/three.module.js’;

import { OrbitControls } from ‘https://threejs.org/examples/jsm/controls/OrbitControls.js’;

</script>

Модуль three.js представляет собой мощный инструментарий для работы с трехмерной графикой в веб-среде. Его функционал включает в себя создание и управление объектами, работу с материалами, светом и многими другими аспектами трехмерной визуализации. Модуль OrbitControls предоставляет возможность управления положением камеры и наблюдения за объектами на сцене из различных углов. Библиотеки можно загрузить с официального сайта threejs.org.

Работа с трехмерной графикой веб-приложений с использованием Three.js разделяется на несколько этапов:

• Создание сцены: Инициализация трехмерной сцены, на которой будут размещаться объекты.
• Создание камеры: Определение камеры, через которую будет производиться наблюдение за сценой.
• Настройка света: Добавление и настройка источников света, обеспечивающих освещение сцены.
• Добавление объектов: Размещение трехмерных объектов на сцене, таких как графические модели или геометрические формы.
• Создание объекта визуализации: Инициализация объекта, который будет отвечать за визуализацию сцены в указанном контейнере.
• Рендеринг (визуализация): Отображение сцены на веб-странице с использованием камеры и света.

Создание сцены.

Создаем глобальную переменную scene, которая будет представлять трехмерную сцену в нашем веб-приложении, используя библиотеку three.js. Сцена служит контейнером для всех трехмерных объектов, которые мы хотим отобразить.

var scene;

scene = new THREE.Scene();

Для добавления объектов на сцену или удаления их со сцены, мы будем использовать методы add и remove.

scene.add( object ); scene.remove( object );

Создание камеры.

Для создания трехмерной визуализации веб-приложений в библиотеке three.js, мы объявляем глобальную переменную camera, представляющую перспективную камеру. Перспективная камера в данном контексте воспринимает объекты сцены в соответствии с перспективной проекцией, где удаленные объекты кажутся меньше.

var camera;

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

Инициализация камеры происходит с использованием нескольких параметров: угла обзора (FOV), соотношения сторон экрана (aspect ratio) и диапазона расстояний, которые подлежат рендерингу.

Для удобства манипуляции с трехмерной сценой мы интегрируем контроллер OrbitControls. Этот контроллер позволяет изменять точку обзора, масштабировать и вращать сцену с использованием мыши.

var controls;

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

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

Настройка света.

Для достижения более реалистичной визуализации в сцене веб-приложения в библиотеке three.js, мы прибегаем к использованию источника света. Одним из эффективных средств для этой цели является класс DirectionalLight, который моделирует прямое направленное освещение, аналогичное солнечным лучам.

Мы предварительно объявляем глобальную переменную light для представления источника света в сцене. Создание источника света выполняется с использованием следующих параметров:

light = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );

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

scene.add( light );

Здесь мы указываем цвет света в формате HEX (обычно белый), а также его интенсивность. Задаем позицию света в трехмерных координатах, где (1, 1, 1) соответствует направлению солнечных лучей.

Таким образом, добавление источника света обогащает визуальный опыт, обеспечивая более естественное освещение объектов на сцене в веб-приложении.

Рендеринг и добавление объектов.

Для визуализации трехмерной сцены и ее объектов в библиотеке Three.js привлекается специализированный класс WebGLRenderer. Необходимо выделить переменные для хранения экземпляра этого класса и DOM-элемента, который будет использоваться для его функционирования:

var renderer, container;

В дальнейшем создается раздел div, служащий контейнером на веб-странице:

var container = document.createElement(‘div’);

document.body.appendChild(container);

Инициализация рендерера осуществляется следующим образом:

renderer = new THREE.WebGLRenderer();

Вместе с рендерером создается холст (canvas), который, по умолчанию, имеет размеры 300×150 пикселей. Метод setSize предоставляет возможность изменить размеры холста, приведем его, например, к размерам окна:

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

Затем необходимо указать визуализатору (renderer), где следует поместить созданный холст:

container.appendChild(renderer.domElement);

Рендеринг (отрисовка) производится с помощью созданного объекта renderer. Для этого у него есть метод render, в параметрах которого указываются сцена и камера:

renderer.render( scene, camera );

Добавление объектов производится следующим образом. Сначала объявляется вид геометрии объекта.

var radiusTop = 0; var radiusBottom = 128;

var heigth = 200; var segments = 3;

var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, heigth, segments );

Параметры геометрии цилиндра. radiusTop – радиус верхней части в данном случае 0 и получится пирамида, radiusBottom – радиус нижней части, height – высота цилиндра, segments – количество сегментов (частей), из которых состоит цилиндр.

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

Создается материал для пирамиды. В данном случае, цвет материала установлен в красный (код цвета 0xff0000).

var piramida = new THREE.Mesh(geometry, material);

Создается объект Mesh (сетка), который представляет собой геометрию и материал.

piramida.position.set(-300, 100, 350);

Устанавливается позиция пирамиды в трехмерном пространстве. Здесь пирамида размещается в точке (-300, 100, 350).

scene.add(piramida);

Пирамида добавляется на сцену (рис. 1).

Рис. 1. Пирамида

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

Мощность и Производительность: WebGL использует аппаратное ускорение графики на устройствах пользователя, что обеспечивает высокую производительность и качественное отображение трехмерных сцен.

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

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

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

Обучение и Развитие: Технология находит применение в образовании, где она используется для создания интерактивных обучающих приложений, а также в сферах развлечений, архитектуры, медицины и других областях.

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

Создание интерактивных объектов в 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, предоставляющая удобный интерфейс для создания и визуализации трёхмерных объектов.

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

Целью данной работы является разработка и описание алгоритма построения трёхмерной модели кувшина на основе кубической кривой Безье в среде three.js.

Теоретические основы. Кривые Безье представляют собой параметрические кривые, широко применяемые в компьютерной графике и системах автоматизированного проектирования. Кубическая кривая Безье определяется четырьмя контрольными точками и описывается параметрическим уравнением:

где P₀, P₁, P₂, P₃, - контрольные точки кривой.

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

Описание реализации. Программная реализация выполнена на языке JavaScript с использованием библиотеки three.js. На первом этапе создаётся сцена, камера и рендерер. Камера типа PerspectiveCamera обеспечивает перспективное отображение объекта.     Для формирования профиля кувшина используется кубическая кривая Безье (THREE.CubicBezierCurve), контрольные точки которой масштабируются для получения требуемых размеров объекта. На основе вычисленных точек кривой создаётся геометрия вращения (THREE.LatheGeometry).

Для повышения реалистичности визуализации применяются два источника света: рассеянный (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);

        createVase();

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

        controls.enableDamping = true;

        controls.dampingFactor = 0.05;

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

    }

    function createVase() {

        var group = new THREE.Group();

        const scale = 10;

        const curve = new THREE.CubicBezierCurve(

            new THREE.Vector2(3, 0).multiplyScalar(scale),

            new THREE.Vector2(12, 6).multiplyScalar(scale),

            new THREE.Vector2(-3, 12).multiplyScalar(scale),

            new THREE.Vector2(7, 15).multiplyScalar(scale)

        );

        const points = curve.getPoints(36);

        var geometry = new THREE.LatheGeometry(points, 64);

        var material1 = new THREE.MeshPhongMaterial({color: 0xfff000});

        var material2 = new THREE.MeshPhongMaterial({color: 0xfff080, side: THREE.BackSide});

        var object1 = new THREE.Mesh(geometry, material1);

        var object2 = new THREE.Mesh(geometry, material2);

        group.add(object1);

        group.add(object2);

        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

Экструдирование — это процесс преобразования двумерных путей или форм в трехмерные объекты путём вытягивания вдоль заданной оси. В библиотеке Three.js для этого используется класс `ExtrudeBufferGeometry`, который принимает профиль формы и параметры экструдирования. Основные параметры включают:

- `steps`: количество шагов по оси экструдирования,

- `depth`: длина вытягивания,

- `bevelEnabled`: включение скругления краев,

- `bevelThickness`, `bevelSize`, `bevelSegments`: параметры скругления.

Процесс моделирования включает определение формы (Shape), настройку параметров экструдирования и создание геометрии, которая затем используется для построения меша.

Рисунок 1. Пример веб-производительности

Пример реализации на JavaScript

“`javascript

// Создаем сцену, камеру и рендерер

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer();

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

document.body.appendChild(renderer.domElement);

// Определяем двумерную форму (например, простой квадрат)

const shape = new THREE.Shape();

shape.moveTo(0, 0);

shape.lineTo(0, 1);

shape.lineTo(1, 1);

shape.lineTo(1, 0);

shape.lineTo(0, 0);

// Настраиваем параметры экструдирования

const extrudeSettings = {

steps: 2,

depth: 2,

bevelEnabled: true,

bevelThickness: 0.1,

bevelSize: 0.2,

bevelSegments: 3

};

// Создаем геометрию с помощью экструдирования

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

// Создаем материал

const material = new THREE.MeshNormalMaterial({wireframe: false});

// Создаем меш и добавляем его на сцену

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

scene.add(mesh);

// Располагаем камеру

camera.position.z = 5;

// Анимационный цикл

function animate() {

requestAnimationFrame(animate);

mesh.rotation.x += 0.01;

mesh.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

“

Заключение

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

Рисунок 2. Пример кода с экструдированием

Рисунок 3

Теоретические основы метода вращения в Three.js

Метод вращения основан на формировании трехмерной формы путем вращения двумерного контура или профиля вокруг оси (обычно оси Y). В библиотеке Three.js для этого используется класс `LatheBufferGeometry`, который принимает массив точек профиля и параметры вращения. Основные параметры включают:

- `segments`: число сегментов по окружности, определяющее гладкость поверхности,

- `phiStart` и `phiLength`: начальный угол и длина сектора вращения,

- `points`: массив точек профиля, задающих форму.

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

Рисунок 1

Пример реализации на JavaScript

“`javascript

// Создаем сцену, камеру и рендерер

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer();

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

document.body.appendChild(renderer.domElement);

// Определяем профиль с помощью массива точек

const points = [];

points.push(new THREE.Vector2(0, 0));

points.push(new THREE.Vector2(1, 0));

points.push(new THREE.Vector2(1.5, 1));

points.push(new THREE.Vector2(1, 2));

points.push(new THREE.Vector2(0, 2));

// Создаем геометрию вращением

const geometry = new THREE.LatheBufferGeometry(points, 32, 0, Math.PI * 2);

// Создаем материал

const material = new THREE.MeshNormalMaterial({wireframe: false});

// Создаем меш и добавляем на сцену

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

scene.add(mesh);

// Располагаем камеру

camera.position.z = 5;

// Анимационный цикл

function animate() {

requestAnimationFrame(animate);

mesh.rotation.y += 0.01;

renderer.render(scene, camera);

}

animate();

“`

Рисунок 2

Заключение

Метод вращения с помощью `LatheBufferGeometry` в Three.js позволяет создавать разнообразные объемные фигуры из простых профилей. Его преимущество — возможность моделирования сложных форм с минимальными усилиями и высокой гибкостью. Однако при работе важно правильно подбирать профиль и параметры сегментов для достижения желаемого качества поверхности. Использование метода вращения широко применяется в моделировании предметов, техники, ювелирных изделий и архитектурных элементов.

WebGL – это программная библиотека для JavaScript, которая позволяет создавать 3D графику, функционирующую в браузерах. Данная библиотека основана на архитектуре OpenGL. WebGL использует язык программирования шейдеров GLSL, имеющий C-подобный синтаксис. Особенность WebGL заключается в том, что код моделируется непосредственно в браузере с использованием элемента canvas, введенного в HTML5.

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

Для создания сцены с геометрическими фигурами мы использовали современный подход с импортом модулей:

javascript

import * as THREE from ‘three’;

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

Такой способ подключения (с использованием import maps) является более чистым и предпочтительным в современных веб-приложениях.

Инициализация сцены и основных компонентов

Первым шагом мы создаем сцену, камеру и рендерер:

javascript

const container = document.createElement(‘div’);

document.body.appendChild(container);

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

camera.position.set(300, 500, 1200);

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

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

container.appendChild(renderer.domElement);

Камера установлена на оптимальном расстоянии (1200 единиц), чтобы хорошо видеть оба ряда фигур. Параметр antialias включает сглаживание для более плавных краев объектов.

Освещение сцены

Для корректного отображения цветов и теней мы добавили два типа освещения:

javascript

ambientLight = new THREE.AmbientLight(0×404040, 2.0);

light = new THREE.DirectionalLight(0xffffff, 1.5);

light.position.set(1, 2, 1);

Фоновый свет (AmbientLight) обеспечивает базовое освещение всех поверхностей, а направленный свет (DirectionalLight) создает объем и подчеркивает форму объектов.

Управление камерой

Для интерактивного взаимодействия с пользователем подключены контроллеры OrbitControls, позволяющие вращать камеру вокруг сцены, приближать и отдалять изображение:

javascript

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

controls.rotateSpeed = 0.5;

controls.enableZoom = true;

controls.minDistance = 300;

controls.maxDistance = 2000;

controls.enableDamping = true;

Размещение фигур в пространстве

Для организации фигур мы использовали Декартову систему координат и расположили объекты в два ряда. Каждая фигура имеет свои координаты position.set(x, y, z):

javascript

// Параметры расположения

const spacingX = 300;       // расстояние между фигурами по X

const startX = -450;        // начальная координата X

const row1Z = -200;         // координата Z для первого ряда (задний)

const row2Z = 200;          // координата Z для второго ряда (передний)

Создание геометрических фигур

В нашей сцене представлены различные типы геометрических тел, созданные с помощью встроенных классов Three.js:

1. Прямоугольник (BoxGeometry)

javascript

const geomBox = new THREE.BoxGeometry(300, 200, 220);

const box = new THREE.Mesh(geomBox, new THREE.MeshPhongMaterial({ color: 0xFFFF00 }));

2. Цилиндры и призмы (CylinderGeometry)

Класс CylinderGeometry универсален и позволяет создавать различные фигуры путем изменения параметров:

• Цилиндр (равные радиусы сверху и снизу, много сегментов)
• Треугольная призма (равные радиусы, 3 сегмента)
• Пятиугольная и шестиугольная призмы (равные радиусы, 5 и 6 сегментов)

3. Пирамиды и конусы

Установка верхнего радиуса в 0 превращает цилиндр в пирамиду или конус:

• Четырехугольная пирамида (верхний радиус 0, 4 сегмента)
• Шестиугольная пирамида (верхний радиус 0, 6 сегментов)
• Конус (верхний радиус 0, много сегментов для гладкости)

Цветовое оформление

Для каждой фигуры подобран индивидуальный цвет, делающий композицию яркой и наглядной:

• Желтый прямоугольник (0xFFFF00)
• Синий цилиндр (0x0000FF)
• Красная треугольная призма (0xFF0000)
• Зеленая шестиугольная пирамида (0x00FF00)
• Голубая пятиугольная призма (0x87CEEB)
• Салатовая четырехугольная пирамида (0x90EE90)
• Розовая шестиугольная призма (0xFFC0CB)
• Золотой конус (0xFFD700)

Визуализация и анимация

Для непрерывной отрисовки сцены используется цикл анимации:

javascript

function animate() {

    requestAnimationFrame(animate);

    controls.update();

    render();

}

function render() {

    renderer.render(scene, camera);

}

Обработчик изменения размера окна обеспечивает корректное масштабирование сцены:

javascript

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

Результат

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

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