I am trying to create a 360' VR Image Gallery with A-Frame. I initially followed the guide on the main A-Frame website (https://aframe.io/docs/0.9.0/guides/building-a-360-image-gallery.html). The feature works in desktop view, meaning I can nudge the cursor over the two image portals and then get transported by hovering there momentarily. Unfortunately, when I view this in VR mode on my iPhone and then view in the Google cardboard device, the cursor will not move - it is stuck in place.
I've tried changing to the latest 0.9.1 release but that appears to have a bug with VR mode so I have reverted to 0.9.0
I've also experimented with using <a-entity cursor="fuse: true; fuseTimeout: 500" rather than the <a-cursor> primitive.
I have hosted a demo here https://whatapalaver.github.io/javascriptings/image_play/360/gallery.html
I've tested it on ios using firefox, chrome and safari.
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/dist/aframe-proxy-event-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- Images. -->
<img id="photo" src="./images/test5.jpg">
<img id="photo-thumb" src="./images/test5-thumb.png">
<img id="cast-courts" src="./images/test6.jpg">
<img id="cast-courts-thumb" src="./images/test6-thumb.png">
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
proxy-event="event: click; to: #image-360; as: fade">
</a-entity>
</script>
</a-assets>
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#cast-courts"
animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#photo" data-thumb="#photo-thumb"></a-entity>
<a-entity template="src: #link" data-src="#cast-courts" data-thumb="#cast-courts-thumb"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity id="camera" camera look-controls>
<a-cursor
id="cursor"
fuse=true
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
material="color: blue; shader: flat"
position="0 0 -3"
raycaster="objects: .link">
</a-cursor>
</a-entity>
</a-scene>
</body>
</html>
I realise the cursor is very small, even in desktop version but I would expect to be able to see it when using the VR mode and the google cardboard. We ought to be able to move the cursor over the inset images and hover to switch the background image.
