脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

WebVRのフレームワークで実写系360度コンテンツを表示する方法(Aframe / google vrview)

Aframe

aframe.io

how to use
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
  <a-sky src="path/to/img"></a-sky>
</a-scene>
オプション

初期表示の位置変更

<a-sky src="path/to/img" rotation="0 180 0"></a-sky>

google vrview

Embedding VR view  |  Google VR  |  Google Developers

preparation
$ git clone https://github.com/googlevr/vrview.git
how to use
<script src="vrview/build/vrview.min.js"></script>
<div id="vrview"></div>
<script>
    var vrView;
    window.addEventListener('load', onVrViewLoad)
    function onVrViewLoad(){
        vrView = new VRView.Player('#vrview', {
            image: 'path/to/img',
            width: '100%',
            height: '100%',
        });
    }
</script>
オプション

f:id:portaltan:20170615103446p:plain