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

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

Основная сложность реализации Drag and Drop в 3D заключается в преобразовании координат из двумерного пространства экрана в трехмерное пространство сцены. Для этого используется техника Ray Casting:

1. Преобразование координат мыши в нормализованные координаты устройства (-1 до 1);
   
2. Создание луча из камеры через точку на экране;
   
3. Определение пересечения луча с объектами сцены:
   

Ключевые матрицы для преобразований:

• Матрица проекции (projectionMatrix);
  
• Матрица вида (viewMatrix);
  
• Мировая матрица объекта (modelMatrix).
  

Система состоит из трех основных компонентов:

1. Менеджер объектов - хранит информацию о всех фигурах в сцене;
   
2. Обработчик событий - управляет вводом пользователя;
   
3. Система выбора объектов - определяет, какой объект выбран.
   

Создадим восемь различных 3D-геометрических объектов с помощью библиотеки Three.js и добавим их в сцену – сферу, призму, пирамиду, цилиндры и т.д. (рисунок 1):

Рисунок 1. Демонстрация Drag and Drop в WebGL

Объявим массив dragObjects, который будет использоваться для хранения объектов, которые пользователь хочет сделать интерактивными:

Все объекты добавляются в массив dragObjects для поддержки функционала перетаскивания мышью.

Ниже приведены фрагменты кода:

1. Сфера

2. Цилиндр

3. Куб

4. Пирамида

5. Конус

6. Призма (треугольная)

7. Кубоид (прямоугольный параллелепипед)

8. 6-угольная призма:

Теперь фигуры можно перетаскивать мышью (рисунок 1).

Заключение

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