RICOH THETA画像を表示するJavaScriptライブラリ作った

絶賛通常営業中。
普段からいろいろプログラムは作っているもののこのところ仕事が立て込んでいてブログが全然書けなかったので休み中に棚卸し的に書いていきます。
　
RICOH THETAの画像を公開するとなると公式サイトに上げるのが普通なんですがやっぱりそれなりに不満点もあって、全公開になってしまうとか、ファーストビューが指定できないとか、顔や見せたくないところを加工してから公開したいとかそういうことがやりにくくてアップに躊躇したりということもあったり。
　
そんなわけで、とりあえず自サイトに上げて表示できるようなライブラリをThree.jsを使って作ってみました。まだまだ機能は少ないですが徐々に改善する予定です。
　
本当はJavaScriptで書けばPCでもスマホでも同じように見せられるかと思って作ったんですがiOSのブラウザはWebGLをフルサポートしてないみたいでだめでした。あと、PCでも現行のSafariはなぜかデフォルトでWebGLが無効になっているようでなんだかいろいろがっかりです。このライブラリは人類にはまだ早すぎたのかもしれません。
　
■デモサイト
http://aikelab.net/thview/
　

■機能と制限
自サイトにアップした全天球画像を表示します。
転送速度やプライバシーなどの理由で元画像を縮小しても表示できます。
元画像サイズに関わらず表示エリアの縦横サイズを指定できます。
ファーストビュー、ズーム、自動回転の有無、回転速度などを細かく指定できます。
ドラッグして向きを変えることはできません（今のところ）。
カメラを上下に動かして空や地面を見ることはできません（今のところ）。逆に自分が見えなくて良いかも。
自動で水平を補正することはできません。手動で補正することは可能です。
画像は同じサーバ（Same Origin）にある必要があります。そんなわけではてなダイアリーには埋め込めないです。
PCのChromeやFirefoxだと良い感じに見えます。それ以外の環境だといろいろアレな感じ。
　
まあ見ての通り実質50行くらいのライブラリなので気になるところがあれば好きに改造してください。
　
■埋め込み方
シンプルな例

<div id="ph1"></div>
<script type="text/javascript" >
    var img1 = new ThView({id:'ph1', file:'photo.jpg'});
</script>

オプション指定付きの埋め込み例

<div id="ph2"></div>
<script type="text/javascript" >
    var img2 = new ThView({
        id:'ph2',
        file:'photo2.jpg',
        firstview:180,
        zoom:100,
        width:300,
        height:200,
        rotation:true,
        speed:-30});
</script>

　
■オプション一覧

キーワード	意味
id	親エレメント(DIV)のID　(必須)
file	画像ファイル名　(必須)
width	幅のピクセル数
height	縦のピクセル数
rotation	自動回転の有無
speed	回転速度（負の値で反対方向へ回転）
zoom	ズーム
firstview	初期表示位置
degree	軸の角度調整 [x, y, z]

　
■ソースコード
https://github.com/aike/thview.js
　
2014.07.26 追記
ドラッグして上下左右好きな方向を向けるようにしました