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
- 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という名前で保存したものを使用しています。
- 次に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フォルダにあります。
- Theta ViewerをHTMLに読み込みます。以下の例は、配布しているファイルの中のbuildフォルダ中のtheta-viewer.min.jsをjsフォルダに置いた場合のものになっています。
- HTMLのbody要素の中にTheta Viewerでパノラマ画像を表示する要素(例では#theta-viewer)を用意します。
- パノラマ画像を表示するコードを記述します。具体的には「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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent