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

1. Get started with WebGL [Электронный ресурс] / Microsoft. – Электрон. текстовые дан. – Режим доступа: http://msdn.microsoft.com/ruru/Library/dn385807(v=vs.85).aspx, свободный. – Загл. с экрана.
2. Three.js – JavaScript 3D library [Электронный ресурс] / Mr.doob. – Электрон. текстовые дан. – Режим доступа: http://threejs.org, свободный. – Загл. с экрана.
3. Вильданов А.Н. 3D-моделирование на WebGL с помощью библиотеки Three.js: учебное пособие. – Уфа: РИЦ БашГУ, 2014. – 114 с. – ISBN: 987-5- 7477-3560-6.
4. Вильданов, А. Н. Разработка класса Eventcontrols для создания интерактивных трехмерных приложений в web с помощью Three. Js / А. Н. Вильданов // Дневник науки. – 2023. – № 7(79). – DOI 10.51691/2541-8327_2023_7_2. – EDN SSDKQF.

Все статьи автора «Яковлев Юлиан Юрьевич»