Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js

360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。

パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。

サイトのキャプチャ

Panolens.js
Panolens.js -GitHub

Panolens.jsの特徴

Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。
パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。

Three.JS(3Dフレームワーク)をベースに実装された軽量のスクリプトで、カスタマイズも優れています。

Panolens.jsのデモ

デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。

デモのキャプチャ

デモ一覧 -Panolens.js

まずは、パノラマ画像を見るだけのビューアー。水平・垂直・拡大縮小ができます。

デモのキャプチャ

Image Panorama

Google Street Viewのようなパノラマ。

デモのキャプチャ

Google Street View Panorama

Panolens.jsは、動画のパノラマにも対応しています。

デモのキャプチャ

Video Panorama

2つのパノラマを使用し、相互にリンクされています。リンクは、登山者のかなり下に。

デモのキャプチャ

Panorama Linking

3Dモデルを使用した、インタラクティブなパノラマ。

デモのキャプチャ

Intractive Panorama

物語のように読み進めるタイプのパノラマ。

デモのキャプチャ

Storytelling

Panolens.jsの使い方

Step 1: 外部ファイル

three.min.jsと当スクリプトを外部ファイルとして記述します。

Step 2: パノラマ画像

パノラマに使用する画像は、正距円筒図法(幅と高さが2対1の場合、1024x512など)です。画像がない場合は、equirectangularでCC0のパノラマ画像をダウンロードできます。

Step 3: JavaScript

パノラマ画像を指定し、スクリプトを初期化します。

Step 4: HTML

iframeでパノラマビューワーを配置します。

さらに詳しい実装方法については、ドキュメントをご覧ください。

サイトのキャプチャ

ドキュメント -Panolens.js

sponsors

top of page

©2020 coliss