Home > Javascript > ブラウザにVR(360)画像を表示する

ブラウザにVR(360)画像を表示する

公開日:

最終更新日:

vrimage


Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /home/users/1/chicappa.jp-tfmo/web/oboegaki/wp-content/plugins/crayon-syntax-highlighter/util/crayon_util.class.php on line 73

ブラウザにVRを表示するのって、Google VR Viewしか知らなかったのですが
Mozillaが作ってるA-Frameがむちゃくちゃ簡単で便利なので、ご紹介します。

VR画像を埋め込む

画像にオブジェクトを加えたりできるのですが、とりあえず表示です。

Demo

デモはこちら

ライブラリの読み込み

head内に下記を入れてください。

描画

後はbody内にa-sceneでシーンを定義して、a-skyにVR画像を指定してやるだけです。

VR画像にオブジェクトを配置

上でやったのにオブジェクトを配置します。ゴリゴリやる人以外、a-imageしか使わないんじゃないかとも思いますが。。。

Demo

デモはこちら(boxを配置)

デモはこちら(画像を配置)

描画

上と同じようにライブラリを読み込んで置いてください。a-skyの上にa-box(boxを作る)を書いてください。

オブジェクトの大きさを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でいいんじゃないでしょうか
間違ってるよ~とかあれば教えてください

Comment

よろしければコメントをどうぞ