СОЗДАНИЕ ИНТЕРАКТИВНЫХ 3D-ОБЪЕКТОВ С ПОМОЩЬЮ 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-объектов, к примеру для сайтов, позволит вам разнообразить опыт пользователя, и даже его заинтересовать.

1. Вильданов А.Н., Шафеева Е.П. Построение объектов двумерной графики в HTML5 с помощью canvas / А. Н. Вильданов, Е. П. Шафеева // Информатика в школе. – 2015. – № 4 (107). – С. 24-28. – ISSN 2221-1993.
2. Вильданов А.Н. 3D-моделирование на WebGL с помощью библиотеки Three.js: учебное пособие. – Уфа: РИЦ БашГУ, 2014. – 114 с. – ISBN: 987-5-7477-3560-6.
3. Герасимова Т.В. Веб и 3D-графика // Изв. СПбГЭТУ ЭТИ». 2018. № 7. – C. 13-26.
4. Филинских А.Д., Корсаков К.С. Загрузка моделей в технологии WebGL // Кограф-2018: сб. материалов 28-й Всерос. науч.-практ. конф. по графическим информационным технологиям и системам / Нижегород. гос. техн. ун-т им. Р.Е. Алексеева. – Нижний Новгород, 2018. – С. 125-129.
5. Three.js – JavaScript 3D library [Электронный ресурс] / Mr.doob. – Электрон. текстовые дан. – Режим доступа: http://threejs.org, свободный. – Загл. с экрана.
6. Get started with WebGL [Электронный ресурс] / Microsoft. – Электрон. текстовые дан. – Режим доступа: http://msdn.microsoft.com/ru-ru/Library/dn385807(v=vs.85).aspx, свободный. – Загл. с экрана.

Все статьи автора «Кулахметов Наиль Рустамович»