javascriptgoogle-vrwebvrgoogle-vr-sdk

Google VRView for Web - Adding Hotspots


Project: Basic website, display panorama image with Google's VRView for Web and add hotspots.

Issue: Panorama displays fine, haven't been able to add hotspots, documentation is poor + googling has resulted in little results for approx. 1.5 hours.

Code:

<script type="text/javascript">

window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
  var vrView = new VRView.Player('#vrview', {
    image: 'uploads/pano.jpg',
    is_stereo: false
  });

  vrView.addHotspot('hotspot-one', {
         pitch: 30, // In degrees. Up is positive.
          yaw: 20, // In degrees. To the right is positive.
          radius:   0.05, // Radius of the circular target in meters.
          distance: 2, // Distance of target from camera in meters.
    });
}

</script>

<div id="vrview">
</div>

Request: Has anybody been able to implement these hotspots? I have also tried adding on the click of a button, to no avail. Tried in both a laravel server and a basic html implementation, to no avail.

Supporting Documentation/Examples:


Solution

  • you have to add your code into on ready

    <script type="text/javascript">
    
    window.addEventListener('load', onVrViewLoad)
    function onVrViewLoad() {
      var vrView = new VRView.Player('#vrview', {
        image: 'uploads/pano.jpg',
        is_stereo: false
      });
    vrView.on('ready',function(){
      vrView.addHotspot('hotspot-one', {
             pitch: 30, // In degrees. Up is positive.
              yaw: 20, // In degrees. To the right is positive.
              radius:   0.05, // Radius of the circular target in meters.
              distance: 2, // Distance of target from camera in meters.
        });
    }
    });
    
    </script>
    
    <div id="vrview">
    </div>