我正在尝试制作一个按钮，以便将其绑定到全景图中的特定位置。也就是说，当用户查看 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>
我正在尝试制作一个按钮，以便将其绑定到全景图中的特定位置。也就是说，当用户查看 360 度全景图时，按钮不应旋转。
我解决你的问题
您需要做的是添加一个光标来处理 onlcick 事件，这是唯一的方法。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<title>A-Frame HTML Shader - Dynamic</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-html-shader.min.js"></script>
<script>
let currentPanorama = 1;
AFRAME.registerComponent("click-log", {
init: function () {
this.myFunction = function () {
const panorama = document.querySelector('#panorama');
if (currentPanorama === 1) {
panorama.setAttribute('src', '#panorama2');
currentPanorama = 2;
} else {
panorama.setAttribute('src', '#panorama1');
currentPanorama = 1;
}
};
this.el.addEventListener("click", this.myFunction);
},
remove: function () {
this.el.removeEventListener("click", this.myFunction);
}
});
</script>
</head>
<body>
<a-scene update-html>
<a-camera>
<a-cursor material="color: red"></a-cursor>
</a-camera>
<a-assets>
<img id="panorama1"
src="https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg">
<img id="panorama2" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.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 click-log position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#CCC"
id="switchButton"></a-plane>
</a-scene>
</body>
</html>