Google VRView für Web - Hinzufügen von Hotspots

Question

Projekt: Grundlegende Website, Anzeige von Panoramabild mit Google VRView für Web und Hinzufügen von Hotspots.

Ausgabe: Panorama zeigt gut an, konnte keine Hotspots hinzufügen, die Dokumentation ist schlecht + googeln hat zu wenig Ergebnissen für ca. 1,5 Stunden.

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> 

Anfrage: hat diese Hotspots zu implementieren jemand in der Lage? Ich habe auch versucht, auf den Klick eines Knopfes hinzuzufügen, ohne Erfolg. Versucht sowohl in einem Laravel-Server als auch in einer grundlegenden HTML-Implementierung, ohne Erfolg.

Unterstützung Dokumentation/Beispiele:

• https://developers.google.com/vr/concepts/vrview-web
• http://googlevr.github.io/vrview/examples/hotspots/index.html

Answer 1

Sie haben Ihren Code in auf bereit

<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>

hinzufügen 210