仕事でパノラマ画像を Web 上に表示する必要があって, どうしたもんかなぁとググっていたら @aike1000 さんというかたが非常に良いライブラリを作ってくれていたので紹介したいと思います.

thview.js とは

ThView.js is a JavaScript image viewer program which shows spherical image photograph like RICOH THETA.

RICOH THETA などで撮影した球体画像を表示するイメージビューアー JavaScript ライブラリ的なことが書かれています.

• RICOH THETA画像を表示するJavaScriptライブラリ作った - aikeの日記
• aike/thview.js: JavaScript Spherical Image Viewer

Demo

実際に使ってみたデモです. 写真をドラッグすると 360 度回転しながらパノラマ画像を見ることが出来ます. またスマートフォンでアクセスするとジャイロセンサーに合わせて画像を表示してくれます.

Install

ちょっと行儀悪いですが rawgit の cdn 使って master ブランチのやつを直接参照します. 心配な方は Github で download して使いましょう.

内部で three.js も使うので一緒に読み込んでおきましょう.

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js'></script>  
<script src='https://cdn.rawgit.com/aike/thview.js/master/thview.js'></script>  

Usage

HTML

まずビューアーとなる要素を配置します.

<div id="viewer"></div>  

JavaScript

あとはシンプルです.

ThView クラスに viewer の id とファイルのパスを渡して生成するだけです.
たったこれだけで良い感じの viewer を表示してくれます.

※THREE.ImageUtils はドメインの違うところから画像を引っ張ってきている為必要なだけで同じドメインから参照する場合は必要ありません

window.onload = function() {  
  var path = 'http://phi-jp.github.io/phiary-workspace/assets/images/thview/elephant.jpg';
  THREE.ImageUtils.crossOrigin = "*";
  var img1 = new ThView({id:'viewer', file: path });
};

Options

ThView に渡せるオプションの一覧です.

• id(required) ... ビューアーの id
• file(required) ... 画像ファイルのパス
• width ... ビューアーの横幅のサイズ
• height ... ビューアーの縦幅のサイズ
• rotation ... 自動回転するかどうかのフラグ
• speed ... 回転速度(負の値を渡すと反対方向に回転)
• firstview ... 初期位置
• degree 軸の角度 [x, y, z]

自前で作ろうと思っていたので助かりました! とても便利なライブラリをありがとうございます.