Panolens.jsを使う
昔はthree.jsを単独で使っていましたが、今ではMozillaのA-Frameや、GoogleのVRViewなど色んな選択肢があります。
今回はthree.jsにパノラマVR用機能を追加するライブラリPanolens.jsを使ってみる事にします。色々調べた結果、多機能でカスタマイズ性も高そうでした。
Panolens.jsのドキュメントはこちら
CDNは使わない
ライブラリの読み込みはCDNのURLを直接指定しても良いですが、敢えてローカル環境でも動作する様にライブラリファイルをダウンロードして作ってみます。
CDNを使わないメリットは２つあります。
ひとつは、Panolens.js本体を書き換えて機能をカスタマイズできる事。
もうひとつは、ファイルをメール送信したり、PCごと持ち運んだりしてオフライン環境のブラウザで動作する事。工夫すれば、プレゼン資料に埋め込んで使う事もできそうです。
使用するライブラリ
これらは、公式サイトを通してGitHubからダウンロードしておきます。ダウンロードしたZIPを解凍すると色々サンプルデータが入っていますが、使うのはbuildフォルダ内にあるthree.min.jsと、panolens.min.jsの２つだけです。
実際に使ってみる
作成するファイルは「index.html」１つです。ここにライブラリとパノラマ画像を読み込み、スクリプトを書いていきます。
ソースコード
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で開くとジャイロセンサーが動作しません。少しスクリプトを改変しないといけないのですが、それについてはこちらの記事に書いています。