Я использую a-frame, и я хотел бы добавить меню на экране для переключения сцен или других действий (например, показать модальную информацию). Есть ли способ, которым я могу это достичь? Я искал и нашел aframe-ui-modal-component, который не является на 100% тем, что я хочу, но он показывает какое-то меню, но, используя это, я не могу сделать эти кнопки доступными и запустить действие.Как создать a-frame menu - webvr
Вы можете использовать плоские объекты или изогнутые изображения для отображения меню. С помощью JavaScript вы можете сделать эти кнопки кликабельным:
document.querySelector('#menu1');.addEventListener('click', function() {
model.setAttribute('visible','true');
}
Существует не прямой способ выполнения типичного яваскрипта слушателя событий от мыши, потому что базируется на 2D-пространстве (х и у координаты экрана), где WebVR имеет дело с 3D-пространством и поэтому требует raycasting, чтобы определить, где вы указываете в 3D-пространстве.
Это не значит, что нет косвенного пути. Сначала я дам кратчайшие (и менее многофункциональные) решения, а затем более сложные в конце.
Существует мышь курсор библиотека здесь: https://www.npmjs.com/package/aframe-mouse-cursor-component
Это позволяет регистрировать три события мыши: нажмите, MouseEnter и MouseLeave. Это привлекает рейкастера от камеры к указателю мыши и экстраполирует объект, на который вы указываете.
Если вы хотите использовать вид курсора VR, есть: https://aframe.io/docs/0.2.0/components/cursor.html
Здесь вы можете зарегистрировать парить и нажмите события от того, что вы смотрите.
Какое бы ни было устройство ввода, которое вы хотите использовать для взаимодействия с вашим меню, курсором мыши или просмотра, соответственно. Теперь в меню.
Как указывалось в Miauz, вы можете создавать самолеты и присоединять к ним слушателей событий с помощью javascript теперь, когда вы включили инструмент, чтобы забрать их для вас. Если вы новичок в слушатель событий, вы можете найти учебник здесь:
http://www.w3schools.com/jsref/met_document_addeventlistener.asp
текста на плоскостях:
https://www.npmjs.com/package/aframe-bmfont-text-component
Теперь у вас есть библиотеки третьей стороны с целью перевести ваше типичные 2D события в ваш 3D-среду и события, которые будут использоваться на ваших объектах (кнопках), включенных в ваше меню.
Сложный способ: вы можете использовать рейкастер самостоятельно.
https://aframe.io/docs/0.2.0/components/raycaster.html
Это более глубокий и требует больше строк кода, но вы можете сделать больше с ними, если вы получаете достаточно опытным. Например, здесь вы можете получить все объекты вдоль линии, простирающейся от вашей камеры, тогда как более простые решения, приведенные выше, дают вам самое близкое.
Надеюсь, это поможет. Удачи!