Gaze navigation not working



  • Theme https://www.ideaspacevr.org/themes/vr-view-360-image-with-hotspot-navigation is expected to support gaze navigation however, it is not working for me. I'm using Google Cardboard viewer and opening the preview given the above link on chrome browser on smartphone. Binocular vision works fine, the Hotspot size changes but nothing happens even of I keep staring for 15s. Am I missing something? Kindly help



  • You are right, gaze navigation is not working, but click navigation is working, using a Cardboard v2 viewer. A look into the docs says that gaze navigation should work, using the 'click' event: https://developers.google.com/vr/develop/web/vrview-web but it does not, and I am listening to the click event. Maybe you can address this issue at the VR View library's Github page?



  • Just noticed that https://developers.google.com/vr/develop/web/vrview-web cites an example page http://googlevr.github.io/vrview/examples/hotspots/index.html and it supports gaze navigation. Confirmed testing it with actual Cardboard.

    On a closer look, I observed that in the IdeaSpaceVR theme (https://www.ideaspacevr.org/themes/vr-view-360-image-with-hotspot-navigation) doesn't implement function onGetPosition(e) in index.js. Can that be the reason? Also, there is no cross-hair seen in IdeaSpaceVR theme while the github example page displays a circular cross-hair on Cardboard viewer. Are we missing something?



  • @Reetesh I downloaded the vrview.min.js from the example and used it in my theme, but no gaze cursor appeared. I added the onGetPosition function but it does not work either. Hm I really don't know why the gaze cursor does not appear.



  • I also tried to do the same but no luck. The only remaining difference between IdeaSpaceVR and the example codes is the way scene is implemented. While the former uses JS/JSON construct, the latter defines it inline. That should hardly have any consequence on cross hair. We need to delve deeper, looks like.



  • @Reetesh I had some issues with the gaze cursor on another theme and it turned out that the orgin-trial token for Google Chrome mobile prevented the appearance of the cursor on mobile phones! You could try commenting the origin-trial meta tag line in index.php and test on your mobile again.



  • Hi All,

    @WeddingDJ and @Reetesh , I was going to post a topic about the mouse cursor on mobile, and then came across this one.

    I have a working project with this component added:

    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"> 
    </script>
    

    And this code:

    <a-entity id="cameraWrapper" position="0 0 0">
    <a-entity camera look-controls>
      <a-cursor id="cursor"
            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__1="_event: mouseenter; color: springgreen"
            event-set__2="_event: mouseleave; color: black"
            fuse="true"
           ></a-cursor>
          </a-entity>
    </a-entity>
    

    Would this be helpful?

    If so, how would one change this section in order to add the visible cursor, including gaze-fuse on desktop and mobile:

    <a-entity position="0 0 0">
            <a-entity
                id="camera" 
                camera="far: 10000; fov: 80; near: 0.1; userHeight: 1.6"
                look-controls>
                <a-entity
                    cursor="fuse: false; rayOrigin: mouse"
                    raycaster="far:5001" 
                    id="cursor"
                    position="0 0 -1.9"
                    geometry="primitive: circle; radius: 0.02;"
                    material="color: #FFFFFF; shader: flat;"
                    visible="false">
                </a-entity>
            </a-entity>
        </a-entity>
    
        <a-entity laser-controls="hand: left" raycaster="near: 0.5; far: 5001" line="color: #FFFFFF" class="laser-controls"></a-entity>
        <a-entity laser-controls="hand: right" raycaster="near: 0.5; far: 5001" line="color: #FFFFFF" class="laser-controls"></a-entity>
    

    Thanks.


Log in to reply