WebVRのフレームワークで実写系360度コンテンツを表示する方法(Aframe / google vrview / react vr)
Aframe
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>
オプション