RICOH THETA like equirectangular projection panorama HTML5 viewer
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Theta Viewer

RICOH THETAのような正距円筒図法(Equirectangular Projection)のパノラマ画像を、WebでブラウズできるHTML5ビューアーです。 jQueryのプラグインになっています。

描画にはJavaScriptによる3Dライブラリthree.jsを使用しています。 ブラウザがWebGLに対応していれば、WebGLを用いて、球面にパノラマ画像をマッピングして表示します。 WebGLに対応せず、CSS Transforms Module Level 1の3DとCanvasに対応している場合には、キューブマップによる描画を試みます。 WebGL、CSS Transforms Module Level 1の3Dに対応せず、Canvasに対応している場合には、Canvasによる描画を試みます。 いずれにも対応していない場合には、描画しません。 現時点では、パノラマ画像の正距円筒図法からキューブマップへの変換には、最近傍補間(Nearest Neighbor Interpolation)を用いていて、あまりきれいな変換にはなっていません。 また、Mega pixel image rendering library for iOS6 Safariを用いて、キューブマップへの変換時にテクスチャーの画像を最大2048x1024にダウンサンプリングします。 これは、キューブマップの描画はiOSの場合を想定していて、iOSのMobile Safariではcanvasの描画の限界が2048x1024である場合があることによるものです。

ブラウザのHTML5 canvas、CSS Transformsの3D、タッチ・イベントへの対応状況を調べるためにModernizrを使用しています。

Setup

  1. jQuery、Modernizr、Mega pixel image rendering library for iOS6 SafariをHTMLに先に読み込みます。以下の例では、これらをすべてjsフォルダに置いています。Modernizrは、production版でCSS 3D Transforms、Canvas、Touch Eventsのチェックのみを有効にして生成し、それをmodernizr-2.7.1-csstransforms3d-canvas-touch.jsという名前で保存したものを使用しています。
  2. 次にthree.jsと、three.jsに付属のDetector.js、CSS3DRenderer.jsを読み込ませます。以下の例では、これらをすべてjsフォルダに置いています。three.jsは、ミニファイ版three.min.jsを指定しています。ミニファイ版three.min.jsは、three.jsをダウンロードして展開してできるbuildフォルダにあります。Detector.jsは、examples/jsフォルダにあります。CSS3DRenderer.jsは、examples/js/renderersフォルダにあります。
  3. Theta ViewerをHTMLに読み込みます。以下の例は、配布しているファイルの中のbuildフォルダ中のtheta-viewer.min.jsをjsフォルダに置いた場合のものになっています。
  4. HTMLのbody要素の中にTheta Viewerでパノラマ画像を表示する要素(例では#theta-viewer)を用意します。
  5. パノラマ画像を表示するコードを記述します。具体的には「jQuery(パノラマ画像を表示したいセレクタ).createThetaViewer(画像ファイル);」で表示できます。以下の例では、#theta-viewerにimgフォルダの中のtheta.jpgを表示しています。
<!DOCTYPE html>
<html lang="ja" class="no-js">
<head>
  <meta charset="UTF-8">
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/modernizr-2.7.1-csstransforms3d-canvas-touch.js"></script>
  <script src="js/megapix-image.js"></script>
  <script src="js/three.min.js"></script>
  <script src="js/Detector.js"></script>
  <script src="js/CSS3DRenderer.js"></script>
  <script src="js/theta-viewer.min.js"></script>
  <link rel="stylesheet" href="css/styles.css">
  <title>Sample of THETA Viewer</title>
</head>
<body>
  <div id="theta-viewer"></div>
  <script>
/*global jQuery */
(function ($) {
    'use strict';
    // #theta-viewerにパノラマ画像img/theta.jpgを表示
    $("#theta-viewer").createThetaViewer('img/theta.jpg');
}(jQuery));
  </script>
</body>
</html>

Manipulations

  • マウス/タッチのドラッグで注視点を移動
  • マウスのホイールでズームイン/ズームアウト

Samples

Platforms

  • Chrome
  • Safari
  • Firefox
  • Internet Explorer 11
  • iOS、Android

Problems

  • OS X MarvericksでFirefox v.25の場合(他の環境では未確認)、スクロールによりウィンドウ内外にTheta Viewerコンテンツを移動するとハングする。three.jsのWebGLRendererを使用してアニメーションを実行しているためだと思われる。

ChangeLogs

  • v.0.3.3 2014/01/07 CSS Transforms Module Level 1使用時の表示のバグの修正
  • v.0.3.2 2014/01/05 Canvasレンダラーへの対応とバグの修正
  • v.0.3.1 2014/01/01 WebGLが利用可能かどうかを判定する部分のバグを修正
  • v.0.3.0 2014/01/01 iOS、Androidに対応(CSS Transforms Module Level 1の3Dを使用)
  • v.0.2.0 2013/11/12 同一ページ内に複数のTheta Viewerコンテンツが存在できるように修正
  • v.0.1.2 2013/11/11 画像が裏表逆に表示されるのを修正
  • v.0.1.1 2013/11/10 マウス操作のバグを修正
  • v.0.1 2013/11/08 リリース

Articles

License

MIT License

Author

小久保温(Atsushi Kokubo).