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

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

360° Media  |  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>

オプション

React VR

portaltan.hatenablog.com