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