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
tanaka at 2020年01月22日 10:00:19