Как привязать кнопку к панораме в a-frame?
Пытаюсь сделать кнопку, чтобы она была привязана к определенному месту панорамы. То есть кнопка не должна вращаться, когда пользователь просматривает панораму на 360 градусов. Нужно что то на подобие просмотра улиц от Гугл карт
Вот что у меня получается, но кнопка не нажимается, как будто бы она находится под фотографией, так как даже при наведении на кнопку курсор мыши не меняется:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>panoramas</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <style> #switchButton { cursor: pointer; } </style> </head> <body> <a-scene> <a-assets> <img id="panorama1" src="1.jpg"> <img id="panorama2" src="2.jpg"> </a-assets> <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky> <a-entity id="cameraRig"> <a-camera></a-camera> </a-entity> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC" id="switchButton"></a-plane> </a-scene> <script> const button = document.querySelector('#switchButton'); let currentPanorama = 1; button.addEventListener('mouseenter', () => { const panorama = document.querySelector('#panorama'); if (currentPanorama === 1) { panorama.setAttribute('src', '#panorama2'); currentPanorama = 2; } else { panorama.setAttribute('src', '#panorama1'); currentPanorama = 1; } }); </script> </body> </html> |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>panoramas</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <style> #switchButton { cursor: pointer; } </style> </head> <body> <a-scene> <a-assets> <img id="panorama1" src="1.jpg"> <img id="panorama2" src="2.jpg"> </a-assets> <a-sky id="panorama" src="#panorama1" rotation="0 -130 0"></a-sky> <a-entity id="cameraRig"> <a-camera></a-camera> </a-entity> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC" id="switchButton"></a-plane> </a-scene> <script> const button = document.querySelector('#switchButton'); let currentPanorama = 1; button.addEventListener('mouseenter', () => { const panorama = document.querySelector('#panorama'); if (currentPanorama === 1) { panorama.setAttribute('src', '#panorama2'); currentPanorama = 2; } else { panorama.setAttribute('src', '#panorama1'); currentPanorama = 1; } }); </script> </body> </html>
Дополнительно:
Хз что это, но очевидное: z-index:999 в стили пробовал?
Ответы:
Если ты хочешь по-простому - добавь кнопку в html и зафиксируй ее при помощи position:absolute в стилях. что-то вроде
//body html <button>Button</button> //css button{ position: absolute; top: 20px; left: 20px; } |
//body html <button>Button</button> //css button{ position: absolute; top: 20px; left: 20px; }
Ты пытаешься взаимодействовать с webgl, при этом даже не почитав документацию по библиотеке. Я открыл библиотеку - и там в большом разделе Interactions написано:
A common misbelief is that we can add a click event listener to an A-Frame entity and expect it to work by directly clicking on the entity with our mouse. In WebGL, we must provide the input and interaction that provides such click events. For example, A-Frame’s cursor component creates a synthetic click event on gaze using a raycaster. Or as another example, Mayo Tobita’s mouse-cursor component creates a synthetic click event when clicking directly on the entity using a raycaster.
То есть если ты хочешь делать интерфейс "в объеме", прочитай доки. Значительно проще сделать по методу номер один.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для привязки кнопки к панораме в A-Frame, вам потребуется использовать компоненты и события этой библиотеки. Вот пример кода на языке HTML с использованием A-Frame и JavaScript:
```html
AFRAME.registerComponent("cursor-listener", {
init: function() {
var el = this.el;
el.addEventListener("click", function() {
console.log("Button clicked!");
// Добавьте здесь код, который будет выполняться при нажатии на кнопку
});
}
});
```
В этом примере создается сцена с панорамой и кнопкой. Кнопка представлена плоскостью, которая реагирует на событие "click". При нажатии на кнопку выводится сообщение в консоль браузера. Вместо вывода сообщения вы можете добавить любую логику, которую хотите выполнить при нажатии на кнопку.
Таким образом, вы можете создать интерактивные элементы, привязанные к панораме в A-Frame, используя компоненты и события этой библиотеки. Надеюсь, этот пример поможет вам решить вашу проблему!