19
5月

Pano2VRを試してみた

内容

Pano2VRでWebVRを作る(HTML5編)

Pano2VRとは?
パノラマ写真を取り込み、手軽に360度パノラマVR、バーチャルツアーを作成するソフトウェアです。
pano2VRでできることは
ホットスポットを作成
ローカルフォルダやYoutubeから音楽や映像の追加
360°動画の再生
アニメーションパスの作成
HTML5 / Flash / QuickTime VR 形式でのエクスポートなど。
これで作成したデータはPC、モバイル端末、HMDで閲覧可能。

以下公式のサイトになります。
英語ですがダウンロードや使い方の解説動画が乗っております。
https://ggnome/pano2vr/#examples

インストール方法
今回は体験版で進めていきます
まずはGardenGnomeSoftwere社のHPにアクセス
https://ggnome/pano2vr/#examples

トップ画面でTry itを選択するとDLリンクまで飛びます。
WindowsかmacOSで選択します。
ページの下にライセンス購入画面があるので必要なら購入しましょう。

まずは体験版の設定とインストールをします
日本語対応してるので日本語版をインストールします。
インストールを完了したらPano2VRを起動してPro版を試す、もしくはライセンスキーを入力を選択しましょう。

パノラマツアーを作るまで
①パノラマ写真を用意
高品質なフリー画像素材 pixabayから頂きました。ありがとうございます。
https://pixabay.com/ja/images/search/%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E/

②写真を適応する
画面左上の入力の隣にあるボタンか、下のウインドウにドラッグ、下のウインドウ上で右クリック→パノラマを追加することで画像を追加できます。

パノラマを追加すると以下のようになります。
右側にある+のボタンを押してHTML5を選択します。

アウトプット画面が表示されます。

歯車のボタン(Ctrl + Alt + G)を押すことでHTMLファイルが作成されます。
この時プロジェクトを保存していない場合警告が出るので.p2vrファイルを保存します。

ここからパノラマツアーの作成をしてみたいと思います。
・ホットスポットの作成
ホットスポットを設定することで
別のパノラマ写真へ移動、音楽や動画、URL等の埋め込み、などたくさんのことができます。

最初にホットスポットモードに切り替えます。
マウスカーソルを画像のようにスライドする。
出てきたバーの上から3番目のアイコンをクリックする。

右上のアイコンが切りかわる。
ホットスポットを追加したい場所をダブルクリックすることで追加できる。
赤色のホットスポットが選択されているホットスポットである。

プロパティのウインドウ上でタイプのドロップリストをクリックすると以下の項目がある
・URL
・ツアーノード
・イメージ
・ビデオ
・情報

URLの使い方
パノラマツアー上でクリックすると指定のURLに飛べます。
タイトルをTEST_URL、リンクターゲットをhttps://spin-dd.com/に設定します。

入力したらCtrl + Alt + Gでアウトプットを生成します。
マウスカーソルを重ねるとタイトルが表示されます。
クリックするとhttps://spin-dd.com/に飛ぶことができました。

ツアーノードについて
設定した他のパノラマに飛ぶことができる。

テスト用にパノラマ写真を追加します。
ホットスポットをダブルクリックで作成します。
リンクターゲットに移動先の写真を設定します。
もしくは移動先の写真を下のウインドウからドラッグアンドドロップする。

クリックすると設定した2枚目の写真に移動できます。

Ctrl + 左クリックで移動先の始点を変更できる
エディタ上でツアーノードをAlt +クリックで移動できる

イメージ、ビデオ、情報も同じようにやればパノラマツアー上で表示可能です。

パノラマ写真とツアーを合わせるノードだけでも本格的なバーチャルツアーが行えそうです。