DRAG AND DROP В 3D: ПЕРЕТАСКИВАНИЕ ТРЕХМЕРНЫХ ГЕОМЕТРИЧЕСКИХ ФИГУР В ВЕБ-ПРИЛОЖЕНИИ

Яковлев Юлиан Юрьевич
Уфимский университет науки и технологий
Нефтекамский филиал, студент направления Прикладная математика и информатика

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

Ключевые слова: 3D-графика, drag-and-drop, Ray Casting, rendering, WebGL, интерактивность, компьютерная графика, матричные преобразования, обработка событий, преобразование координат

Рубрика: 05.00.00 ТЕХНИЧЕСКИЕ НАУКИ

Библиографическая ссылка на статью:
Яковлев Ю.Ю. Drag and Drop в 3D: перетаскивание трехмерных геометрических фигур в веб-приложении // Современные научные исследования и инновации. 2026. № 1 [Электронный ресурс]. URL: https://web.snauka.ru/issues/2026/01/104100 (дата обращения: 11.07.2026).

Научный руководитель: Вильданов Алмаз Нафкатович
Уфимский университет науки и технологий Нефтекамский филиал
Кандидат физико-математических наук, доцент

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

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

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

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

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

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

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

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

Библиографический список

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

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