LoginSignup
11
11

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-06-08

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度の写真で確認できるといいなじゃないかと。

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11