A-Frameでgltfモデルとぶつかるまで


A-Frameであたり判定のあるVRをつくりたかったが、
なかなかうまくいかなかった。
ようやくできたので、そのメモ。

要件は
・自前のgltfモデルを動かす
・自分も動く
・gltfモデルにあたり判定を設ける


行きついたのが、`aframe-extra`を使う方法。

ファイルは

```
├── index.html
└── obj
    └── Duck.glb
```

というように配置にする。
説明で使うモデルを以下から拝借した。
https://github.com/KhronosGroup/glTF-Sample-Models


まず、`index.html`をつくる。

```html

<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.6.0/dist/aframe-look-at-component.min.js"></script> 
</head>
```

で、`aframe`, `aframe-extra`, `aframe-look-at-component`を読み込む

そして、

```
<a-scene physics>
 ...
</a-scene>
```

で、物理演算を有効にしてシーンを作成する。

このとき、

```
<a-scene stats physics>
 ...
</a-scene>
```

とすると、fpsなどのステータスが表示される。

また、

```
<a-scene physics="debug: true">
 ...
</a-scene>
```

で、モデルにワイヤーメッシュが表示される。

以下、	`<a-scene>`の中身を書いていく。



まず、モデルの読み込み。

```
<a-assets>
    <a-asset-item id="model" src="./obj/Duck.glb"></a-asset-item>
    <img id=sky" src="./obj/sky.png">
</a-assets>
```

で、画像、モデルを登録する。

そして、

```
<a-gltf-model id="1"
    dynamic-body="shape: sphere; mass: 1"
    position="-2 1 -5"
    src="#model">
</a-gltf-model>
```

で、配置する。

`dynamic-body`で、運動してくれるモデルになり、そのメッシュを`sphere`としている。

このほか、`box`や`cylinder`があるようだ。

`src`は`<a-assets>`で登録した`id`を`#`をつけて入れる。


このほか、床がないとすりぬけるので、板を固定のモデルとして配置する。

```
<a-plane id="floor"
    static-body
    width="200"
    height="200"
    position="0 0 0"
    rotation="-90 0 0"
    color="#CCC">
</a-plane>
```

また、おまけで、じゃまな壁を用意する。


```
<a-box id="wall"
    static-body
    scale="10 2 1"
    position="0 2 -10"
    color="#000">
</a-box>
```

また、おまけのおまけで、空に画像を貼っておく

```
<a-sky id="sky"
    src="#sky">
</a-sky>
```



最後に、プレーヤーの設定を忘れずに。

```
<a-entity id="player"
    camera
    universal-controls
    kinematic-body
    position="0 1.5 0">
</a-entitiy>
```



これをまとめると、以下のようなコードになる。

なお、モデルは二体用意した。

```html
<!DOCTYPE html>
<html>

<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.6.0/dist/aframe-look-at-component.min.js"></script> 
</head>

<a-scene physics>

<a-assets>
    <a-asset-item id="model" src="./obj/Duck.glb"></a-asset-item>
</a-assets>

<a-gltf-model id="1"
    dynamic-body="shape: sphere; mass: 1"
    position="-2 1 -5"
    src="#model">
</a-gltf-model>

<a-gltf-model id="2"
    dynamic-body="shape: sphere; mass: 1"
    position="2 1 -5"
	rotation="0 180 0"
    src="#model">
</a-gltf-model>

<a-plane id="floor"
    static-body
    width="200"
    height="200"
    position="0 0 0"
    rotation="-90 0 0"
    color="#CCC">
</a-plane>

<a-box id="wall"
    static-body
    scale="10 2 1"
    position="0 2 -10"
    color="#000">
</a-box>

<a-sky id="sky"
    color="#0000EC">
</a-sky>

<a-entity id="player"
    camera
    universal-controls
    kinematic-body
    position="0 1.5 0">
</a-entitiy>

</a-scene>

</body>
</html>

```

このままブラウザでローカルの`index.html`を読みにいってもうまく表示されない。
なので、ローカルサーバーを立てる。

方法はいろいろあるが、簡単なのはpythonをつかった方法

`index.html`を保存したディレクトリ（ここでは`aframe`)に移動し、

```
cd ~/hoge/.../aframe
```

`python`をたたく

```
python3 -m http.server
```

`python2`系では、

```
python -m http.server
```

かもしれない。

そして、ブラウザのアドレス欄に、`http://localhost:8000`を入れる。
すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221968/90605bdd-bf34-9164-acb6-6b09917b4358.png)

こんな感じで、できる。

矢印キーでプレーヤーも動き、モデルにぶつかれる。


最後に、どこかのサーバーにアップする。

`github`などでいいと思う。モデルの著作権には注意。

スマホからアップロードページをみて、VRモードで入れることを確認する。
（なぜか、私のスマホでは、VRモードにすると最初はエラー画面になるが、めげずに
戻る＆VRモードをもう一度試すと、うまくいった）

スマホにブルートゥースキーボードを接続すれば、VRモードでも動き回れる。

さらにVRリモコンでの操作を加えたければ、以下を参考すればよい。
https://kkblab.com/make/javascript/pad.html

## 参考

https://github.com/n5ro/aframe-physics-system#dynamic-body-and-static-body