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

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

公開日:

最終更新日:

vrimage

ブラウザに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(動画)なんかもあります。

VR画像にHTMLの要素を追加

説明なんかを付ける時に便利かなと思います。

まず、aframe-html-shaderをダウンロードしておいてください。

Demo

デモはこちら

ライブラリの読み込み

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

css

.targetで書いたhtmlを後ろに隠してます。
.target pでフォントの色とフォントの大きさを指定してます。(フォントの大きさは描画される大きさになるので、かなり大きくしとかないとバグった感じになります。)

html

まず、描画するhtmlの要素を書いてます。
次にa-skyの上にa-plane(平面)を作って、material=”hader:html;target: #htmlElement; transparent: true;”でidがhtmlElementの要素を背景を透明で表示してます。

文字を入れたりは結構調整が大変だな~と思います。
a-imageでいいんじゃないでしょうか
間違ってるよ~とかあれば教えてください

Comment

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