Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js
Post on:2020年3月18日
sponsors
360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。
パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。
Panolens.js
Panolens.js -GitHub
Panolens.jsの特徴
Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。
パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。
Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。
Panolens.jsのデモ
デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。
まずは、パノラマ画像を見るだけのビューアー。水平・垂直・拡大縮小ができます。
Google Street Viewのようなパノラマ。
Panolens.jsは、動画のパノラマにも対応しています。
2つのパノラマを使用し、相互にリンクされています。リンクは、登山者のかなり下に。
3Dモデルを使用した、インタラクティブなパノラマ。
物語のように読み進めるタイプのパノラマ。
Panolens.jsの使い方
Step 1: 外部ファイル
three.min.jsと当スクリプトを外部ファイルとして記述します。
|
1 2 |
<script src="js/three.min.js"></script> <script src="js/panolens.min.js"></script> |
Step 2: パノラマ画像
パノラマに使用する画像は、正距円筒図法（幅と高さが2対1の場合、1024x512など）です。画像がない場合は、equirectangularでCC0のパノラマ画像をダウンロードできます。
Step 3: JavaScript
パノラマ画像を指定し、スクリプトを初期化します。
|
1 2 3 4 5 6 7 |
<script> const panorama = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/field.jpg' ); const viewer = new PANOLENS.Viewer(); viewer.add( panorama ); </script> |
Step 4: HTML
iframeでパノラマビューワーを配置します。
|
1 |
<iframe allowfullscreen src="examples/panorama_image.html"></iframe> |
さらに詳しい実装方法については、ドキュメントをご覧ください。
sponsors
