VR情報専門誌 VRFREEK を参考にVRで360度ビューワーを作ってみました。
前回と同じく A-frame と html を使っています。
360viewer sample
sample
使用言語
A-frame,html
備考
東京の夜景です。後を向くと東京タワーが見えますよ(oﾟvﾟ)
PCの方はちょっと見えにくいと思うのでよろしければスマホからアクセスしてみてください。
sample code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VRテスト（静止画360度）</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-camera position="0 0 0"></a-camera>
<a-sky src="image/visualtest.jpg"></a-sky>
</a-scene>
</body>
</html>
解説
1.aframe.jsの読み込み
< script >タグにhttps://aframe.io/releases/latest/aframe.min.jsを指定します。
読み込めたらA-frameを記述していきましょう！
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
2.a-cameraタグの記述
a-cameraタグを記述します。
<a-camera position="0 0 0"></a-camera>
3.a-skyタグの記述
a-sky タグを記述します。
a-sky タグは縦横360度見回せるプラネタリウムの中心にカメラがある状態を作り出せるタグ。
html と同様に src で画像を呼び出します。
<a-sky src="image/visualtest.jpg"></a-sky>
3.サーバーへアップして動作確認！
サーバーに画像と html をアップロードしてページを確認してみよう！
感想
3stepで出来てしまうほど簡単な A-frame 。次はどんなことしようかな。
それはそうと sample のパノラマ写真の両サイドが切れてしまっていますよね。
こちらの写真素材はゆんフリー写真素材集さまよりお借りしました。
どうやったら上手にできるのかなー。
ちなみにVR情報専門誌 VRFREEK ではRICHO THEA Sで撮影したdemoを見ることができました。VR情報専門誌 VRFREEK の sample で使われている写真の大きさは2688px×1344pxだそうでやっぱり大きさ…？
ふと思ったけど、楽天の旅館・ホテルのサイトって館内の360度ビューってあるじゃないですか。
あれって確か楽天のシステムで楽天にお願いしないと設置できなかったような…？
A-frame を使えば制作側で同じようなこと実装できるようになるので楽になるな〜なんて思ったり。
楽天の360度ビューアーってFlashだから結構重いのよね。HPって表示スピードで離脱率も変わるし軽いにこしたことないと思う今日この頃。
ランキング参加中。よかったらぽちっとお願いします(*｡･ᴗ･。)
