360度の天球画像をPCとスマーフォンで閲覧できるthree.jsベースのjavascriptライブラリ「vrvwwwn.js」です。
RICHO THETAなどで撮影した360°の全天球画像手軽にPC、スマートフォンから閲覧できるようになります。
1ソースでPC、スマホどちらも対応します。
PCでの表示はマウスでのドラッグ操作となります。
スマホでの表示はスマホのジャイロ機能と連動しています。
スマホでの表示のみVRゴーグル表示であるステレオ表示に対応しています。
デモはこちらから、画像をクリック(タップ)すると全画面モードで全天球画像を閲覧できます。
※ご利用のブラウザによりWebGLが利用できない場合がございます。
header内に以下のCSSを読み込んでください。
<link rel="stylesheet" type="text/css" href="js/vrvwwwn/vrViewer.css" />
<body>
//360°画像が表示されるキャンバス
<div id="canvas-frame"></div>
//読み込む画像のサムネイルと360度画像の指定
//360°画像をpano-img属性で指定
//imgのclassにpanoramagicを指定してください。
<img class="panoramagic" src="panorama_01_300.jpg" data-panoimg="panorama_01.jpg"><br>
<img class="panoramagic" src="panorama_02_300.jpg" data-panoimg="panorama_02.jpg"><br>
<img class="panoramagic" src="panorama_03_300.jpg" data-panoimg="panorama_03.jpg">
//下記のライブラリを読み込んでください
<script src="js/build/three.min_r74.js"></script>
<script src="js/controls/Detector.js"></script>
<script src="js/controls/StereoEffect.js"></script>
<script src="js/controls/DeviceOrientationControls.js"></script>
<script src="js/controls/OrbitControls.js"></script>
//ライブラリ本体のソース
<script src="js/vrvwwwn/Viewer.js"></script>
</body>
ライセンスはMITになります。
ver1.0