全天球写真が取れるリコーのTHETAの写真を、複数枚アニメーションするビューアを作った。
Three.jsのOrbitControls.jsのサンプルをいじってたらできてた。


質問や機能要望はgithubのissueかtwitterにお願いします

デモ

http://shokai.github.io/theta-viewer.js


ドラッグで視点移動、マウスホイールで拡大縮小
safariだと[開発]→[WebGLを有効にする]を設定しないとWebGLが動かない。
ChromeかFirefoxなら動く。
Nexus7のChromeでは動くけどAndroidでもHTC One Jのchromeだと動かない。
WebGLすごくて、ChromeのCPU使用率5%もいかないけど、まだ全てのブラウザで動くわけではない。

ソースコード

https://github.com/shokai/theta-viewer.js


使い方

theta-viewer.jsをダウンロードして、自分のサーバーに設置する。
Three.jsとasync.jsとOrbitControls.js（Three.jsのexamplesの中にある）も必要。
<script src="./lib/async.js"></script>

<script src="./lib/three.js"></script>

<script src="./lib/OrbitControls.js"></script>

<script src="./lib/theta-viewer.js"></script>

適当な描画用div等を作って
<body>

  <div id="viewer" style="width: 100%; height: 100%;"></div>

</body>



var viewer = new ThetaViewer( document.getElementById("viewer") );

viewer.images = ["01.jpg", "02.jpg", "03.jpg"];

viewer.interval = 200; // ミリ秒

viewer.autoRotate = true;

viewer.load();
これで読み込める。

詳しくはgithubのREADMEや、index.htmlのソースコード見るとわかると思う。

それなりに簡単に設置できる。
設置しやすいようにasync.jsとthree.jsも一緒に1つのjsに固めてしまおうかと思ったけど、async.jsのライセンスがMIT Licenseのようで1行目にMIT Licenseと書いてないちょっとMIT Licenseじゃないライセンスだったのでやめた。