Отображение html-элементов в AR-режиме, дополненная реальность на Babylon.js | AR JS

Описание

Продолжаем тему дополненной реальности на JavaScript и сегодня научимся отображать html-элементы в xr-режиме.

А именно реализуем возможность добавления новых обьектов на сцену, изменения расстояния и цвета при создании моделей.

0:47 - Создание интерфейса
1:19 - Отображение html в WebXR
2:47 - Создание объекта
4:25 - Изменение расстояния
6:16 - Перевод цвета из hex, в rgb, в color3
7:50 - Результат

Ссылка на файл стилей (style.css):
https://github.com/ateros-lab/ar/blob/main/style.css

Исходниники WebXRDomOverlay:
https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/core/src/XR/features/WebXRDOMOverlay.t #L10

Код урока:
https://github.com/ateros-lab/ar/tree/7b02fedca5719f41e25626435a8b9a576f0fa2ad

Протестировать (нажмите иконку с очками):
https://ateros-lab.github.io/ar/index.html

#ar #js #web #дополненнаяреальность #augmentedreality #webxr #babylonjs #программирование #уроки #javascript
#ateros