A-Frameで全天球360°写真を超お手軽WebVR実装

webvr_a_frame_topimage

Webブラウザでバーチャルリアリティー(VR)を表現できてしまうWebVR

本来WebVRを実装するにはWebGLを扱うjavascriptを頑張って書く必要がありますが、htmlタグで簡単に実装できてしまうのが「A-Frame」フレームワーク

A-Frame公式HP:https://arame.io/


今回はA-FRAMEを使ってWebVRのページを作ってみたいと思います。

「RICOHのTHETAで撮った全天球360°写真のWebVRページを作る」

RICOHのTHETA Sで撮影
RICOHのTHETA Sで撮影


どのくらい簡単にWebVRのページを作ることができるでしょうか。


※WebVR API の開発は終了して VR AR に対応したWebXR Device API に切り替わるようです。


A-FRAMEのjavascriptライブラリ aframe.js

githubから最新のA-FRAMEのjavascriptライブラリ 

aframe.js 

をコピー保存します。


https://github.com/aframevr/aframe/tree/master/dist

筆者は「aframe-v1.0.4.min.js」をコピー保存しました。

※フルバージョンが必要であれば「aframe-v1.0.4.js」をダウンロードする必要がありますが、複雑な事をするつもりは無いのでminで十分。

WebVRのシーンを構築するHTMLファイル

HTMLファイル「ij_a_frame_p360_01.html」で保存しました。

この時点で「こんな簡単で良いの?ほとんど何も書いてないけど」

という感想を持ちましたが全然OKでした。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
            <title>VR_SunStreetKameido1</title>
             <meta name="description" content="VR_A-Frame" />
                <script src="lib/aframe-v1.0.4.min.js"></script>
                </head>
    <body>
        <a-scene>
            <a-cylinder position="0 -8.20 0" radius="10.0" rotation="0.0 0.0 0.0" scale="1.0 0.2 1.0" color="#000000"></a-cylinder>
            <a-sky src="img/R0010009_xmp.JPG" rotation="0 0 0" color="#888"></a-sky>
            <a-text font="kelsonsans" value="Sun Street Kameido" width="6" position="-1.5 0.8 -3.5" rotation="0 -15 0"></a-text>
        
        </a-scene>
    </body>
</html>


説明:

<a-scene>
</a-scene>

プリミティブ生成やアニメーション、ライト配置やUI等、A-FRAME の中に出現するモノは全て<a-scene>タブの中に書きます。

<a-sky src="img/R0010009_xmp.JPG" rotation="0 0 0" color="#888"></a-sky>

<a-sky>スカイボックス、背景用の天球のタグ。 背景の画像を指定する事ができます。今回はRICOHのTHETAで撮った全天球360°写真を画像に指定しました。

<a-cylinder position="0 -8.20 0" radius="10.0" rotation="0.0 0.0 0.0" scale="1.0 0.2 1.0" color="#000000"></a-cylinder>

<a-cube>キューブや<a-sphere>スフィア等のプリミティブを生成できます。
今回は中心の筆者を隠すように<a-cylinder>シリンダーを生成配置しました。

<a-text font="kelsonsans" value="Sun Street Kameido" width="6" position="-1.5 0.8 -3.5" rotation="0 -15 0"></a-text>

<a-text>テキストを配置できます。positionを指定する事で空間上に配置できます。


実行:

「aframe-v1.0.4.min.js」とHTML「ij_a_frame_p360_01.html」をサーバーにアップしました。

 
在りし日のサンストリート亀戸VR:
https://liquidjumper.com/lj_a_frame_p360_01.html


PCのWEBブラウザ(WebGL対応ブラウザ Chrome、Firefoxなど)

PC版Chrome:

PC版Chrome webvr


スマートフォンのWEBブラウザ

モバイル版Firefox:

右下の[VR]マークを選択するとVRモードになります。

モバイル版Firefox:webvr


VRモード:

モバイル版Firefox:webvr VRmode

最後に

WebVRが簡単に実装できてしまいました。それも肩透かしレベルで。

本来WebVRを実装しようとしたらjavascriptを頑張って書く必要がある事を想像しますが、デモ程度とはいえこんなに簡単に実装できてしまうとは驚きです。

htmlのタブしか書いて無いのに。

以上です。

VR関連の記事はコチラ
コチラの記事も読まれています
No Post found