HTML
JavaScript

VR View for the Webを試してみる。

More than 1 year has passed since last update.

googleが提供しているVR Viewスクリプトを使うと簡単に360°の写真やビデオをウェブサイトに埋め込むことができます。

VR View for the Web


使い方

1.HTMLにGoogle提供のVR Viewスクリプトを記載する。


vrview.html

<script src="//storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>


2.divを記載する。


vrview.html

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


3.VR Viewインスタンスを作成する関数を呼び出す。

(下記はgoogleのサンプル)

image:のところをvideo:にすれば360度の動画にも対応できます。

詳しくは VR View for the Web を。


vrview.html

  window.addEventListener('load', onVrViewLoad)

function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
width: '100%',
height: '300',
preview: '//storage.googleapis.com/vrview/examples/coral-preview.jpg',
image: '//storage.googleapis.com/vrview/examples/coral.jpg',
is_stereo: true
});
}

PCでもスマホでもブラウザさえあればみることができるのでちょっとした用途には便利だと思います。

例えば賃貸物件の間取りなんかが360度の写真で確認できるといいなじゃないかと。