0

VR View for the webを使用して360度の画像を表示しようとしています。私はローカルで基本的なサンプルを作成して問題なく動作しますが、コードをプロジェクトに入れたらリソースが見つからないという404エラーが表示されます。VRビュー(ウェブ)無効なURLを取得

vrview.min.jsファイルは私のイメージパスを変換している、のようなものに、image: 'images/myImage.jpg'のように入力された:

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

IISは、画像を見つけていないと全部は大きな脂肪404サーバーエラーを投げています。すべてのヘルプは素晴らしいだろう

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

は、ここに私のコードです。ありがとう!

+0

これはパスの問題です。 image:属性に正しいパスがあることを確認する必要があります。また、プロジェクトのそのパスにそのイメージファイルがあることを確認する必要があります。 "images /" vs "/ images /"が異なる場所を指していることに留意してください。 /はあなたのルートから始まりますが、現在のURLがどこにあってもあなたが始まっていません。 – Liquidchrome

+0

@Liquidchrome - 'http:// localhost:80/Project/index.html?image ='と変数を削除し、 'http:// localhost/Project/images/myImage.jpg'をaブラウザでは、画像を完全に表示します。 – TheIronCheek

+0

あなたのコードでは、image: 'images/mem_off_tab.jpg'はhttp://localhost/Project/images/mem_off_tab.jpgとして存在しますか?また作成されたURLに渡してみてください... http:// localhost:80/Project/index.html?image = http://localhost/Project/images/mem_off_tab.jpg – Liquidchrome

答えて

1

ロードするURLを渡す場合は、GoogleのサービスURLを使用する必要があるようです。 ローカルサーバー上でvrview.min.jsをホストしていて、サービスを実行していないローカルホストにvrview.min.jsを渡しています。

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

は、ここで私は私のローカルマシン上でテストするために使用してHTMLを少し変更したバージョンです。サンプルのGoogle画像が私のために読み込まれています。

<!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ビューのドキュメント:https://developers.google.com/vr/concepts/vrview-web

+0

これは役に立ちました。 Googleのホストされたソースに切り替えると、それが動作するようになりました。私は通常そこに止まっていたでしょうが、サンプルデモで作業していたので、私は数日前に構築しました。答えは私が作っていたよりも簡単でした。私はvrview.min.jsファイルをコピーしただけで、vrview JSだけでなくgithubからダウンロードしたものがすべて必要でした。 – TheIronCheek

0

私は私の答えを見つけました。私はVRプレーヤーを表示したいページにインポートするファイルvrview.min.jsだけを含んでいました。 githubからダウンロードしたアーカイブには、ファイルのディレクトリ全体が含まれていました。私は間違いなく、ほとんどのファイルがサンプルデモ用であると想定していました。

私の初期のコードはすべて間違っていましたが、私にはファイルがありませんでした。vrview.min.jsにリンクされています。余分なファイルを正しいフォルダに落とすと、360度の写真が意図したとおりに表示されました。

関連する問題