Panolens.js で360度写真を埋め込む

THETA SC を持ってるんですが、せっかく 360 度写真を撮っても、 これだ！というシェア場所は案外ありません。theta360.com** という公式のサービスがあるものの、自由に DL してもらえなかったり、 Google フォトは宗教上の理由でダメだし、全員に Oculus Go を配ることはできません。実は LINE が対応してたり、 Windows 10** も対応してたりと少しずつ利用箇所は増えているものの、まだ安心して気軽に配ることはできないんですね。

で、「いやいや、パノラマの見れる JS ライブラリあるでしょ！」と思って探したらありました。ヘッドセット持ってる人にはファイル配ればいいんですが。

これがデフォルト設定ですね。360写真はいいぞ。

なぜこれにしたのか

類似のライブラリもありましたが、Panolens.js に決めた理由は2点。

• 見た目。競合は昔の Google マップみたいなボタンがついていて時代を感じた。
• マウスでのスクロールがより良い感じ。

どこまでやれるのか？（開発者向け）

ビューワーを作成する所でいくつかのオプションを選択できます。

var viewer = new PANOLENS.Viewer({
    container: document.body,// どのエレメントをコンテナにするか
    controlBar: true,// コントロールバーのオンオフ
    controlButtons: ['fullscreen', 'setting', 'video'],// コントロールバーに表示するボタン ['fullscreen', 'setting', 'video'] から選べる
    autoHideControlBar: false,// コントロールバーを自動的に隠す
    autoHideInfospot: true,// infospot（情報表示ボタン）を自動的に隠す
    horizontalView: false,// 水平にのみドラッグ
    cameraFov: 60,// FOV（画角・度数法）
    reverseDragging: false,// ドラッグ方向を反転
    enableReticle: false,// スマホVR向けに照準を表示
    dwellTime: 1500,// 照準で選択するまでの時間（ミリ秒）
    autoReticleSelect: true,// 照準で上記の時間を超えた際に自動選択するか
    viewIndicator: false,// 左上にビュー角度インジケーターを表示
    indicatorSize: 30,// ビュー角度インジケーターのサイズ
    output: 'console'// infospot のポジション出力先。 'console' と 'overlay' が選べる
    });
    

モバイルでの挙動はまだ怪しいところがあるけど、簡単に使えるし良さそうな感じです。いくつか動かしてみます。

infospot（情報を載せる i ボタン）+ 別のパノラマへのリンク

「⬆️」ボタンを押すと別のシーンにジャンプできます。また、i ボタンで情報を閲覧できます。なおモバイルでは（ry

コントロールなし + 水平ドラッグのみ

とてもスッキリして没入感が上がります。これは下を見せずに済むので編集が要らなくて良いですね。なおモバイルでは（ry

ドラッグ方向反転

惜しいところ

モバイルが弱いのはちょっと痛いですねー。たくさんぶら下げると重そうなので流石に最小限に絞ったほうが良さげ。

あと Oculus Go で 360 度写真として見られるわけではなさげです。Oculus Browser で 360度写真を表示するには、このガイドを見てやってねということのようです。またやります。

追記：Oculus Go でも 360 度写真を見られるライブラリをご紹介いただいたので記事書きました

2018年6月9日