WebXRを便利に作れるA-Frameを使ってみました。

ホーム
アプリ関連ニュース
VR
WebXRを便利に作れるA-Frameを使ってみました。

2020年1月22日
VR

昨年の12月にVer1.0.0がリリースされたA-Frameを使ってみました。

360度動画であれば40行程度。
Body要素内だけなら、たったの6行程度で実現できてしまいます。

以下実際のソースコードです。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="">
    <link rel="shortcut icon" href="">

    <!-- CDN経由でA-Frameを読み込み -->
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
</head>

<body>
    <!-- 描画するシーン -->
    <a-scene>
        <!-- A-Frameで利用するアセット -->
        <a-assets>
            <video id="video" src="再生する動画のパス" 
            preload="auto" muted loop="false" webkit-playsinline playsinline></video>
        </a-assets>
        <!-- 実際にVRで表示されるモデル内側に指定リソースを表示する球体オブジェクト -->
        <a-videosphere id="videosphere" src='#video'></a-videosphere>
    </a-scene>
</body>

<!-- 以下はVR開始ボタンで動画を再生するためのJavascript -->
<script>
    var scene = document.querySelector("a-scene");
        var video = document.getElementById("video");

        if (scene.hasLoaded) {
            run();
        } else {
            scene.addEventListener("loaded", playvideo);
        }

        function playvideo() {
            scene.querySelector(".a-enter-vr-button").addEventListener("click", function (e) {
                video.play();
            }, false);
        }
</script>

</html>

コード内で行っていることはとても簡単で

a-assetsタグ内に表示したい videoリソースを設定して、
a-sceneに表示するa-videosphereタグのソースに
a-assetsタグ内で設定したリソースのIDを指定してあげることで
a-videosphere にvideoリソースが表示されます。

このフレームワークを利用することで
WEBブラウザ上で動くマーカーARも作れるようです。

水曜担当：Tanaka