360°パノラマ画像を表示


パノラマ画像を表示します。

ここでは2パターンのストリートビューのパノラマ表示と、パノラマ用カメラで撮られた画像をThree.jsのライブラリを使ったビューワーとGoogleのVR Viewの2つで表示してみます。

ストリートビューではカスタム・ストリートビューを使っていて、通常のストリートビューのようなコントロールボタンは表示していません。

移動に使うリンクコントロールも非表示なのですが、アウトドアの場合表示されます。

ズームはマウスホイールで行います(VR Viewは未対応)。


360°パノラマ画像を表示

ストリートビューのパノラマを「緯度・経度」で表示する場合と「パノラマID」で表示する場合の2パターン。

Three.js版とVR Viewでは、ローカルファイルを読み込んで表示します。


アウトドア・ストリートビューの場合

パノラマ画像を取得できます(ちょいちょいできない場合もありますが)。

右クリックで保存すれば、WordPressでも表示できます。

以下では、WP-VR-viewというプラグインを使っています。

(このプラグインはちょっと不調で、ちょくちょく真っ黒なままのことがあります)


●指定した緯度・経度の近傍にあるGoogleのストリートビューを表示します。

無ければ何もしません。

●ストリートビューは独自のパノラマIDで管理されています。このIDをダイレクトに指定することでパノラマを表示できます。

●WebGL用のThree.jsライブラリを使ってパノラマを表示します。

●Google VR Viewでは、WisteriaHillのサーバーを使用しています。

 

ゴーランドにチェックを入れると、自動で回転します(autopan)


NEW

Google VR ViewでHOTSPOTを使ってみるページを作成しました。

この設定機能では、Three.jsとOrbitControls.jsを使っています。

 

VR Viewで観るとこんな感じ。

ちょっとずれてますが…..。白い丸(HotSpot)をクリックするとコメント表示

 

THETAなどはジオタグを埋め込む用のエリアを持っているようなので、後で付加できます。

 

 

 

 

 


Be the first to comment

Leave a Reply

Your email address will not be published.


*