神奈川県川崎市のホームページ制作・WEBマーケティング会社
  • 044-811-0333(平日:10:00〜17:00)

VR対応360°イメージビューアjavascriptライブラリ vrvwwwn.js

360度の天球画像をPCとスマーフォンで閲覧できるthree.jsベースのjavascriptライブラリ「vrvwwwn.js」です。

RICHO THETAなどで撮影した360°の全天球画像手軽にPC、スマートフォンから閲覧できるようになります。
1ソースでPC、スマホどちらも対応します。
PCでの表示はマウスでのドラッグ操作となります。
スマホでの表示はスマホのジャイロ機能と連動しています。
スマホでの表示のみVRゴーグル表示であるステレオ表示に対応しています。

DEMO

デモはこちらから、画像をクリック(タップ)すると全画面モードで全天球画像を閲覧できます。
※ご利用のブラウザによりWebGLが利用できない場合がございます。

panorama_01_300
panorama_02_300
panorama_03_300

実装方法

ready

header内に以下のCSSを読み込んでください。


<link rel="stylesheet" type="text/css" href="js/vrvwwwn/vrViewer.css" />

code


<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