This is what I am trying to achieve:
It is like a virtual tour where people can click on marker to enter the place.
Here is what I did so far:
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script type="text/javascript">
AFRAME.registerComponent('marker', {
schema: {default: ''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
//sky.setAttribute('src', this.data);
console.log('clicked');
});
}
});
</script>
</head>
<body>
<a-scene>
<a-sky src="#entrance" rotation="0 -90 0" position="0 0 0" id="src-img-tpl"></a-sky>
<a-sphere href="http://google.com" id="marker" position="-10 3 -15" radius="0.65" color="#EF2D5E"></a-sphere>
<a-assets>
<!-- <audio id="river" src="assets/Bg-music.wav" autoplay="true" loop="true"></audio> -->
<img id="entrance" src="images/001.jpg">
<img id="study" src="images/002.jpg">
<img id="parking" src="images/003.jpg">
</a-assets>
</a-scene>
</body>
But it is not working for me. Any help will be appreciated.
Thanks.
First of all you need to attach the component
<a-entity myComponentName> </a-entity>
Second of all, You're missing a cursor. On a typical PC, its easy to test out your site using your mouse. Doing so requires adding the cursor component to the scene:
<a-scene cursor="rayOrigin: mouse">....
I've attached the cursor, and told it to use the mouse. Check it out in my fiddle. It's actually your code with the mentioned additions :)
Otherwise, You'd need to attach an entity, which will act as Your cursor.
The code is simple:
<a-entity camera>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat">
</a-entity>
</a-entity>
It attaches a ring to the camera which allows you to click items by looking at them.
For a full description check out the docs.