【Unity】Unity上でPanotourみたいなパノラマビューアを作ろう!

 こんにちは!新入社員のタケです!


今日はUnityでボタンを押して移動できるパノラマ画像のシステムを作ってみました!

UIとパノラマ球体だけで再現しています。


みなさんPanotourというソフトはご存知でしょうか?

シェルパの公式サイトでもパースのパノラマ画像のビューアとして使用されています!


↓このサイトのCG VR360 制作ギャラリーにて

https://sherpa-cg.com/p-vr360


まずは実際にサイトに行って使ってみるとわかると思いますが、360度画像をパノラマで見ることができるだけでなく

画像内にボタンが表示されており、押してみるとその位置に移動した状態のパノラマ画像を見ることができます。


これに似たものを今日は作ってみたいと思います。

UnityのGUIはカメラにひっつけるだけではなく、3D空間上にも置くことができます。


天球を用意して、その中にこのGUIを置いてあげるとまるで天球の上にボタンがあるように見える、、ということですね。

そこから普通にボタンをクリックで移動すればPanotourに近いことが実現できます。


さっそくやっていきます。

天球を置いて、CanvasのRenderModeをWorldSpaceにしてUIを置いてみました。


これで実行すると…

あれ?あるはずの場所にボタンがありませんね…


これは描写順番がボタンよりも前にパノラマ画像が来てしまっているからです。

こうならないようにOrder in layerの値を1にしました。

そうするとちゃんと出てほしい場所にでてきましたね。


あとはこれと同じようにもう一つ天球を用意して同じように配置していきます。

さっきのボタンと同じキャンバスを使うと置いたボタンが押せないのでキャンバスは使いまわさずにもう一つ用意しましょう。


これで準備完了です!

ボタンを押すとパノラマが切り替わり、Panotourのように移動しているように見えました!


移動するためのボタンの位置も自由自在なのでパノラマにあった位置においてあげましょう。

パノラマから見てドアの上になるように配置したりするのがおすすめです。



フェードインフェードアウトするならもっと工夫が必要ですが、ボタンを押して移動するだけならこれでも大丈夫ですね!

思ったより簡単に実装できました!


--------------------------------------------------------------------------------

シェルパでは、3DCGや建築パースはもちろん
VRやARアプリの開発も行っています!
新しいことに興味のある方はきっと楽しめると思います!
新人研修も充実していて初心者でも3DCG経験者でも安心!

株式会社シェルパ
【福岡本社】
〒810-0042 福岡県福岡市中央区赤坂1丁目13-10赤坂有楽ビル7F 
【東京オフィス】
 〒101-0041 東京都千代田区神田須田町2丁目13-1YKS黒田ビル5F
TEL 092-717-6800 / FAX 092-717-6801

--------------------------------------------------------------------------------



コメント