VRプラレールを楽しむ
VR×プラレールで遊ぼう
VR(Virtual Reality：仮想現実)は、仮想的に作り出した空間を体験できる技術です。
プラレールは、タカラトミー社のプラスチック製の鉄道のおもちゃです。
この2つを組み合わせて何か面白そうなことを試してみます。
例えば、プラレールに乗った感覚を作り出してみます。
本記事の概要
以下の通り、プラレールに乗った感覚を体験する方法を紹介します。
- プラレールの列車にRICOH Thetaを載せて撮影します。
- 撮影した動画をWebアプリ化します。
- Oculus Goで視聴します。
必要な機材
- RICOH Theta
(m15, S, SC, V等様々なバージョンがありますが、本記事ではm15を使用しました) - Oculus Go
RICOH Thetaで撮影
ThetaはRICOH社の製品で、360度の全天球動画を撮影できる機器です。
手軽に360度動画を撮影できるため、VRと相性が良いです。
この写真のように貨物列車にThetaを載せました。輪ゴムで固定です。
電気機関車は、電池を逆方向に入れ、後ろ向きに走行させることで、Theta貨物を先頭に走らせます。
動画のVRアプリ化
A-Frameを使用し、ブラウザで閲覧できるアプリ化します。
VRアプリ化した結果
plarail01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VRプラレール01</title>
<meta name="description" content="VRプラレール 地上周回 1min">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
<script type="text/javascript">
AFRAME.registerComponent('play-on-window-click', {
init: function () {
this.onClick = this.onClick.bind(this);
},
play: function () {
window.addEventListener('click', this.onClick);
},
pause: function () {
window.removeEventListener('click', this.onClick);
},
onClick: function (evt) {
var video = this.el.components.material.material.map.image;
if (!video) { return; }
video.playbackRate =1
video.play();
}
});
</script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" style="display:none" autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
<source type="video/mp4" src="video/VRPlaRail_GroundLoop_1min.mp4" />
</video>
</a-assets>
<a-videosphere src="#video" rotation="0 -90 0" play-on-window-click></a-videosphere>
</a-scene>
</body>
</html>
Oculus Goで閲覧
Webアプリなので、Oculus GoのブラウザのアドレスバーにURLを入れるだけで見れます。
(右下のゴーグルボタンを押して没入モードにします)