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