【krpano】画像をVR空間上に表示したりスクリーン座標上に表示する方法
もうちょっと踏み込んでみましょう。krpanoで画像をポップアップ表示させたいことがあるでしょう。
そのときに、ナビゲーションのサンプルの真似をしてもVR空間内に表示されるだけです。しかもVRの中に表示すると、やたら遠くに見えてしまい、そもそも文字が読めないし、なんかイライラしてきます。UXとしての難易度が割と高かったりします。
手っ取り早くスクリーン座標系に出したいなと思ってもそういうサンプルがない。ということでやり方をご紹介。
１．VR空間上に表示
Tour.xmlに追記をするだけなのです。
1-1. 基本
hotspotを使います。nameとurl、ath、atvは必須。
複数用意するときはnameが被らないようにしてください。被っているときは、最後に記述された1つしか表示されません。
<hotspot name=”spot0″ url=”icon_architecture.png” ath=”-90″ atv=”-60″ /＞
1-2. 拡大縮小
scaleを使います。
<hotspot name=”spot1″ url=”icon_architecture.png” ath=”-30″ atv=”14″ scale=”0.2″ />
1-3. 回転
rotateを使います。単位は度(degree)。
プラスの値で時計回りに回転します。マイナス値は反時計回り。
<hotspot name=”spot2″ url=”icon_architecture.png” ath=”0″ atv=”-30″ scale=”0.2″ rotate=”30″ />
1-4. 半透明
alphaを使います。1.0が不透明。0.0で完全透明。
<hotspot name=”spot3″ url=”icon_architecture.png” ath=”30″ atv=”20″ scale=”0.2″ rotate=”30″ alpha=”0.5″ />
２．スクリーン座標に表示
layerを使います。nameとurl、x、yは必須。
左上が原点(0,0)です。
複数用意するときはnameが被らないようにしてください。被っているときは、最後に記述された1つしか表示されません。
<layer name=”layer1″ url=”facade-of-gifu-city-chuo-library-_29593657641_o.jpg” x=”50″ y=”50″ scale=”1.0″ />
<layer name=”layer2″ url=”study-space-of-gifu-city-chuo-library-_28979695803_o.jpg” x=”80%” y=”75%” scale=”0.8″ />
<layer name=”layer2″ url=”study-space-of-gifu-city-chuo-library-_28979695803_o.jpg” x=”80%” y=”75%” scale=”0.8″ />
デモ
上記で説明した5つを盛り込んだデモです。
ソースコード
Githubに全部アップロードしているのでよければご参照を。画像もそのままどうぞ。
https://github.com/christinayan01/demo/tree/master/krpano20210125
1 thought on “【krpano】画像をVR空間上に表示したりスクリーン座標上に表示する方法”