Issue
I'm trying to make a button so that it is tied to a specific location in the panorama. That is, the button should not rotate when the user views a 360-degree panorama.
<!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>
I'm trying to make a button so that it is tied to a specific location in the panorama. That is, the button should not rotate when the user views a 360-degree panorama.
Solution
I solve your question
What you need to do is add a cursor to handle the onlcick event, it's the only way to do that.
<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/aframe-html-shader@0.2.0/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>
Answered By - Pablo Salazar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.