More than 5 years have passed since last update.

A-FrameでVR迷路を移動する

Posted at 2016-12-19

A-Frameの勉強として、VR迷路を作ってみました。
ソースコードはgithubで公開しています。

作るもの

A-Frameを使ったVR迷路

"スマートフォン(iOS,Android)＋Cardboard"だけで操作できるようlook-controlsで視点を変えることで、camera(カメラ)の向いている方向に移動させます。

迷路の配置

碁盤目状の9×9マスに壁と通路を作るイメージで、<a-plane>の上に<a-box>を並べているだけです。
class="collidable"は、当たり判定のために付与しているクラスです。詳しくは、後で説明します。

index.html

<a-entity id="maze" position="-4 1 -10">
    <a-box class="collidable" position="0 0 0" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
    <a-box class="collidable" position="0 0 1" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
    <a-box class="collidable" position="0 0 2" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
    <a-box class="collidable" position="0 0 3" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
    ...
    <a-box class="collidable" position="8 0 7" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
    <a-box class="collidable" position="8 0 8" width="1" height="2" depth="1" color="#4CC3D9"></a-box>
</a-entity>
<a-plane  rotation="-90 0 0" width="100" height="100" color="#7BC8A4" static></a-plane>

上から見ると、こんな感じです。

プレイヤーの移動

camera(カメラ)の向きからベクトルを計算し、移動速度(speed)を掛けることで移動量とします。
上下は考慮しないので、y軸の回転角から三角関数(あまり自信はない)で求めます。

index.js

var speed = 0.01;
var isIntersect = false;

function movePlayer() {
    var camera = document.getElementById('camera');

    if (camera && !isIntersect) {
        var position = camera.getAttribute('position');
        var rotation = camera.getAttribute('rotation');

        position.x += -Math.cos((rotation.y - 90) * Math.PI / 180) * speed;
        position.z += Math.sin((rotation.y - 90) * Math.PI / 180) * speed;
        camera.setAttribute('position', position);
    }
}

A-FrameはHTMLで記述されているため、getAttribute、setAttributeで移動・回転ができます。
isIntersectは壁との当たり判定の結果を格納する変数です。こちらも後で説明します。

movePlayer()は、くり返し実行する必要があるので、renderメソッドを作成してループさせます。

index.js

var t = 0;

function render() {
    t += 0.01;
    requestAnimationFrame(render);
    movePlayer();
}
render();

プレイヤーと壁の当たり判定

camera(カメラ)にraycasterを追加して、視線(＝進行方向)と交差するオブジェクトの有無を判定します。

index.html

<a-entity id="camera" camera look-controls raycaster="objects: .collidable; far: 0.5;" collider-check rotation="0 0 0" position="0 0.3 0"></a-entity>

まず、raycasterのプロパティについて説明します。

objects: .collidable;
当たり判定の対象を指定するプロパティです。
class="collidable"が付与されたオブジェクトを対象にしており、迷路の壁にあたる<a-box>は当たり判定の対象、床にあたる<a-plane>は対象外となります。
far: 0.5;
当たり判定を行う距離です。
デフォルト値が"Infinity"となっていて、変更しないと視線に壁があるだけで衝突と判定されてしまいます。

次に、当たり判定用のコンポーネントとして、collider-checkを設定します。

index.js

AFRAME.registerComponent('collider-check', {
    dependencies: ['raycaster'],
    init: function () {
        this.el.addEventListener('raycaster-intersection', function () {
            isIntersect = true;
        });
        this.el.addEventListener('raycaster-intersection-cleared', function () {
            isIntersect = false;
        });
    }
});

raycasterのプロパティで設定した距離内に交差オブジェクトがある場合、raycaster-intersectionイベントが発生します。この間、isIntersectがtrueになるようにします。
同様に、交差オブジェクトがない場合、raycaster-intersection-clearedイベントが発生しますので、isIntersectはfalseにします。

先程、プレイヤーの移動を行う条件式に!isIntersectを入れていたので、"壁に近付くと止まる"、"前方に壁がなければ前進する"という挙動になります。

これで、コーディングは完了です。