建築CGとWEBとアプリ開発の制作スタジオ

  1. システム開発
  2. 622 view

無料のPanolens.jsで360VRを作成する

Panolens.jsを使う

昔はthree.jsを単独で使っていましたが、今ではMozillaのA-Frameや、GoogleのVRViewなど色んな選択肢があります。

今回はthree.jsにパノラマVR用機能を追加するライブラリPanolens.jsを使ってみる事にします。色々調べた結果、多機能でカスタマイズ性も高そうでした。

Panolens.jsのドキュメントはこちら

CDNは使わない

ライブラリの読み込みはCDNのURLを直接指定しても良いですが、敢えてローカル環境でも動作する様にライブラリファイルをダウンロードして作ってみます。

CDNを使わないメリットは2つあります。

ひとつは、Panolens.js本体を書き換えて機能をカスタマイズできる事。

もうひとつは、ファイルをメール送信したり、PCごと持ち運んだりしてオフライン環境のブラウザで動作する事。工夫すれば、プレゼン資料に埋め込んで使う事もできそうです。

使用するライブラリ

これらは、公式サイトを通してGitHubからダウンロードしておきます。ダウンロードしたZIPを解凍すると色々サンプルデータが入っていますが、使うのはbuildフォルダ内にあるthree.min.jsと、panolens.min.jsの2つだけです。

実際に使ってみる

作成するファイルは「index.html」1つです。ここにライブラリとパノラマ画像を読み込み、スクリプトを書いていきます。

ソースコード

body内にプレースホルダーを設定する事もできるのですが、下の様に省略してしまっても動作します。

パノラマ画像は球体オブジェクトを作成して球環状マップで貼り付けるのですが、その関連処理をまとめているのがImagePanoramaクラスです。そして、カメラがViewer、ホットスポットがInfospotという風にオブジェクトが分けられています。

three.jsを単独で使うよりもかなりコード量を抑えて書く事ができます。動作も軽量です。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Panolens.js テスト</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <script src="./js/three.min.js"></script>
    <script src="./js/panolens.min.js"></script>
    <script>
        //Panorama (パノラマのインスタンスを作成)
        var panorama = new PANOLENS.ImagePanorama('./image/test.jpg');

        //Viewer (ビューのインスタンスを作成)
        var viewer = new PANOLENS.Viewer();
        viewer.add(panorama);

        //Infospot(ホットスポットのインスタンスを作成)
        var infospot1 = new PANOLENS.Infospot();
        infospot1.position.set(0, 0, -5000);
        infospot1.addHoverText('五日市');

        var infospot2 = new PANOLENS.Infospot();
        infospot2.position.set(6000, 300, -5000);
        infospot2.addHoverText('千倉町');

        panorama.add(infospot1, infospot2);
    </script>
</body>
</html>

iOS13以降はジャイロセンサーの扱いに注意

panolens.jsはジャイロセンサーによる視点追従機能に対応していますが、iOS13以降はユーザーの許可を得なければジャイロセンサーにアクセスできない仕様に変わりました。

panolens.jsはこの仕様変更に対応していないので、iPhoneで開くとジャイロセンサーが動作しません。少しスクリプトを改変しないといけないのですが、それについてはこちらの記事に書いています。

システム開発の最近記事

  1. Apple整備済製品の入荷を音で知らせてくれるプログラム

  2. [360VR] Panolens.jsをiOS13以降のジャイロセンサーに対応させる

  3. [360VR] Panolens.jsで、クリックした位置に動的にホットスポットを追加する…

  4. 無料のPanolens.jsで360VRを作成する

  5. 【AI】画像解析AI「Google Cloud Vision」でパースを解析する

関連記事