ブラウザにVR(360)画像を表示する
ブラウザにVRを表示するのって、Google VR Viewしか知らなかったのですが
Mozillaが作ってるA-Frameがむちゃくちゃ簡単で便利なので、ご紹介します。
VR画像を埋め込む
画像にオブジェクトを加えたりできるのですが、とりあえず表示です。
Demo
ライブラリの読み込み
head内に下記を入れてください。
1 |
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script> |
描画
後はbody内にa-sceneでシーンを定義して、a-skyにVR画像を指定してやるだけです。
1 2 3 |
<a-scene> <a-sky src="ここにVR画像のパス"></a-sky> </a-scene> |
VR画像にオブジェクトを配置
上でやったのにオブジェクトを配置します。ゴリゴリやる人以外、a-imageしか使わないんじゃないかとも思いますが。。。
Demo
描画
上と同じようにライブラリを読み込んで置いてください。a-skyの上にa-box(boxを作る)を書いてください。
1 2 3 4 |
<a-scene> <a-box width="3" height="3.0" depth="5" position="10 -1 7" rotation="-2 -10 0" color="#4CC3D9"></a-box> <a-sky src="ここにVR画像のパス"></a-sky> </a-scene> |
オブジェクトの大きさをwidth,height,depth(横、縦、奥行き)で / 場所をposition=”x y z”で、単位はメートルみたいです。
回転をrotation=”x y z”で、単位は度です。 / 色をcolor=””で指定できます。
box以外にも、a-sphere(球)・a-cylinder(円柱)・a-plane(平面)・a-image(画像)・a-vide(動画)なんかもあります。
文字を入れたりは結構調整が大変だな~と思います。
a-imageでいいんじゃないでしょうか
間違ってるよ~とかあれば教えてください
よろしければコメントをどうぞ