VR View (Web) greift auf ungültige URL

Ich versuche VR View for the web zu verwenden, um ein 360-Grad-Bild anzuzeigen. Ich habe ein Basis-Beispiel lokal erstellt, und es funktioniert ohne Problem, aber sobald ich den Code in mein Projekt bekommen habe, bekomme ich einen Fehler 404, der besagt, dass die Ressource nicht gefunden werden konnte.VR View (Web) greift auf ungültige URL

Die vrview.min.js Datei mein Bild Pfad wandelt, trat wie image: 'images/myImage.jpg', um so etwas wie:

http://localhost:80/Project/index.html?image=http://localhost/Project/images/myImage.jpg&is_stereo=false&

IIS ist das Bild nicht zu finden, und die ganze Sache einen großen, fetten 404 Server-Fehler wirft.

Hier ist mein Code:

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>View 360 Image</title> 

     <script type="text/javascript"> 
      window.addEventListener('load', onVrViewLoad); 

      function onVrViewLoad() { 
       var vrView = new VRView.Player('#vrview', { 
        image: 'images/myImage.jpg', 
        width: 800, 
        height: 700, 
        is_stereo: false 
       }); 
      } 
     </script> 
    </head> 

    <body> 
     <form id="form1" runat="server"> 
      <div id="vrview"></div> <!-- Placeholder where the VR player will display --> 
     </form> 

     <script src="includes/vrview.min.js"></script> 
    </body> 
</html>

Jede Hilfe wäre fantastisch. Vielen Dank!

Quelle

2017-06-07 TheIronCheek

es ist ein Pfadproblem. Sie müssen sicherstellen, dass Sie den richtigen Pfad im image: -Attribut haben. Sie sollten auch sicherstellen, dass diese Bilddatei in diesem Pfad in Ihrem Projekt vorhanden ist. Beachten Sie "images /" vs "/ images /" Punkte zu verschiedenen Orten. Das/nimmt Sie von der Wurzel ausgehend, ohne Sie beginnen Sie dort, wo sich die URL gerade befindet. – Liquidchrome

@Liquidchrome - Wenn ich die "http: // localhost: 80/Project/index.html? Image =' und die Variablen abziehe und einfach "http: // localhost/Project/images/myImage.jpg" in eine einfügen Browser, es zeigt das Bild perfekt. – TheIronCheek

Also in Ihrem Code, Bild: 'images/mem_off_tab.jpg' existiert das als http: //localhost/Project/images/mem_off_tab.jpg? Versuchen Sie auch, es an die URL zu übergeben, die erstellt wird ... http: // localhost: 80/Projekt/index.html? Image = http: //localhost/Project/images/mem_off_tab.jpg – Liquidchrome

Es sieht so aus, als müssten Sie die Google-Service-URL verwenden, wenn Sie die URL zum Laden übergeben möchten. Sie hosten vrview.min.js auf Ihrem lokalen Server und übergeben ihn an Ihren lokalen Host, auf dem der Dienst nicht ausgeführt wird.

<iframe src="//storage.googleapis.com/vrview/2.0/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true"> 
</iframe>

VS.

<iframe src="//localhost/Project/index.html?image=//storage.googleapis.com/vrview/examples/coral.jpg&is_stereo=true"> 
</iframe>

Hier ist die leicht modifizierte Version des HTML, die ich verwenden auf meinem lokalen Rechner zu testen. Das Beispiel Google Bild wird für mich geladen.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title>View 360 Image</title> 

     <script type="text/javascript"> 
      window.addEventListener('load', onVrViewLoad); 

      function onVrViewLoad() { 
       var vrView = new VRView.Player('#vrview', { 
        image: '//storage.googleapis.com/vrview/examples/coral.jpg', 
        width: 1440, 
        height: 680, 
        is_stereo: true 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="vrview"></div> 
     </form> 
     <script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script> 
    </body> 
</html>

VR Ansicht docs: https://developers.google.com/vr/concepts/vrview-web

Quelle

2017-06-07 16:54:52 Liquidchrome

Das war hilfreich und führte mich zur Lösung. Der Wechsel zur von Google gehosteten Quelle hat dazu geführt, dass es funktioniert hat. Normalerweise hätte ich dort aufgehört, aber da ich es in der Demo-Demo hatte, die ich vor ein paar Tagen aufgebaut habe, war die Antwort einfacher als ich es gemacht habe. Ich hatte nur die Datei vrview.min.js kopiert und es erforderte alles, was von github heruntergeladen wurde, nicht nur das vrview JS. – TheIronCheek

fand ich meine Antwort. Ich habe nur die Datei vrview.min.js aufgenommen, die Sie auf der Seite importieren, auf der der VR-Player angezeigt werden soll. Es gab ein ganzes Verzeichnis von Dateien, die in dem von github heruntergeladenen Archiv enthalten waren. Ich nahm fälschlicherweise an, dass die meisten Dateien für eine Beispieldemo waren.

Alle meine ursprünglichen Code war korrekt, ich habe nur Dateien, die vrview.min.js verlinkt. Nachdem ich die zusätzlichen Dateien in den richtigen Ordner abgelegt hatte, erschien das 360-Grad-Foto wie beabsichtigt.

Quelle

2017-06-07 17:55:51 TheIronCheek

VR View (Web) greift auf ungültige URL

Antwort

Verwandte Themen