【Panolens.js】360°パノラマ画像をサイトに表示するライブラリの使い方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Panolens.jsを使って360度で撮影されたパノラマ画像をサイトに表示する方法をご紹介しています。

パノラマ画像をサイトに表示したいんだけど簡単に実装する方法ないかな？

上記の疑問にお答えできればと思います。

では解説していきます。

Panolens.jsとは

Panolens.jsはThree.jsという3Dフレームワークを使用した、パノラマ、仮想現実、拡張現実を表示するためのライブラリです。下記の公式サイトもしくはGithubからライブラリ本体をダウンロードすることができます。

開発者のサイトに下記の記載があります。Google先生に翻訳してもらった内容も併せてどうぞ！

Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download minified three.js and minified panolens.js and include these two files in your project

－Google翻訳－
Panolens.jsはThree.JS（3Dフレームワーク）に基づいており、パノラマ、仮想現実、および潜在的に拡張現実に特定の関心領域があります。panolens.jsの使用を開始するには、縮小されたthree.jsと縮小されたpanolens.jsをダウンロードし、これら2つのファイルをプロジェクトに含めます。

引用元：https://pchen66.github.io/Panolens/#Documentation

「panolens.js」は単体で動作するのではなく「three.js」に基づいて動くライブラリです。そのため基となる「three.js」を併せて読み込む必要があります。別のファイルを読み込むためサイトが重くなるか気になる方もいると思いますが、ファイルサイズ637KBと軽量です。それに「three.js」は強力な3Dフレームワークなので、360°画像をマウスや指でぐりぐりと動かしても滑らかな描画が期待できますね！

Panolens.jsの概要がわかったところで、読み込み～使い方を順に見ていきましょう。

Panolens.jsを読み込む

Panolens.jsを動かすために基本となるファイルの読み込みます。

前項でご紹介したようにPanolens.jsは「three.js」に基づいて動くライブラリなので下記の順番でファイルを読み込む必要があります。

1. three.js
2. panolens.js

公式サイトやGithubからファイルを一式ダウンロードされた方は、保存したファイルを下記の順番で読み込みます。

ダウンロード

<!-- three.js -->

<script src="js/three.min.js"></script>

<!-- panolens.js -->

<script src="js/panolens.min.js"></script>

とりあえず試しに動かしてみたい！という方はCDNもありますので、下記をご利用ください。
※CDNは急に読み込めなくなる可能性がありますので使用される場合はご注意ください（経験談）。

CDN

<!-- three.js -->

<script src="https://threejs.org/build/three.min.js"></script>

<!-- panolens.js -->

<script src="https://raw.githubusercontent.com/pchen66/panolens.js/master/build/panolens.min.js"></script>

以上で「panolens.js」と「three.js」の読み込みが完了です。続いて基本的な使い方を見ていきましょう。

Panolens.jsの基本的な使い方

では実際にPanolens.jsを触っていきます。Panolens.jsは下記の流れで実装していきます。

パノラマ画像を表示する要素を指定する
表示するパノラマ画像を用意する
オプションを指定してビューアを生成する
ビューアにパノラマ画像を追加する

非常にシンプルでわかりやすいですね！

ちなみに公式サイトで紹介されているサンプルコードは下記のようになっています。

//パノラマ画像を用意

const panorama = new PANOLENS.ImagePanorama('panorama.jpg');

//ビューアを生成

const viewer = new PANOLENS.Viewer();

//ビューアにパノラマ画像を追加

viewer.add( panorama );

サンプルコードではパノラマ画像を表示する要素が指定されていませんが、その場合は「body」にパノラマ画像が追加されるとのことです。これだけでパノラマ画像が表示できるのはすごく助かりますね。

以上で基本的な使い方の説明は終わりなのですが、もっとオプションを付けたりしたいですよね。なのでサンプルコードに少し手を加えて下記デモのような形でパノラマ画像を表示してみましょう！

See the Pen
Panolens.js ｜JavaScript by ryohei (@intotheprogram)
on CodePen.

下記にサンプルコードを載せています。ちなみにオプションで追加したのは、カメラ視野と自動回転です。

HTML

<div id="panolens"></div>

JS

const panoramaViewer = (element, image) => {
    //パノラマ画像を表示する要素

    let el = document.querySelector(element);

    //パノラマ画像

    let panorama = new PANOLENS.ImagePanorama(image);

    //ビューワ生成

    let viewer = new PANOLENS.Viewer({

        container: el,

        cameraFov: 100, //カメラ視野

        autoRotate: true, //自動回転オン

        autoRotateSpeed: 0.1, //回転スピード

        autoRotateActivationDuration: 5 //回転を動かす期間

    });

    //ビューワにパノラマ画像を追加

    viewer.add(panorama);

};
const element = "#panolens";

const image = "panorama.jpg";

panoramaViewer(element, image);