A-Frameであたり判定のあるVRをつくりたかったが、
なかなかうまくいかなかった。
ようやくできたので、そのメモ。
要件は
・自前のgltfモデルを動かす
・自分も動く
・gltfモデルにあたり判定を設ける
行きついたのが、aframe-extraを使う方法。
ファイルは
├── index.html
└── obj
└── Duck.glb
というように配置にする。
説明で使うモデルを以下から拝借した。
https://github.com/KhronosGroup/glTF-Sample-Models
まず、index.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>
これをまとめると、以下のようなコードになる。
なお、モデルは二体用意した。
<!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を入れる。
すると、
こんな感じで、できる。
矢印キーでプレーヤーも動き、モデルにぶつかれる。
最後に、どこかのサーバーにアップする。
githubなどでいいと思う。モデルの著作権には注意。
スマホからアップロードページをみて、VRモードで入れることを確認する。
（なぜか、私のスマホでは、VRモードにすると最初はエラー画面になるが、めげずに
戻る＆VRモードをもう一度試すと、うまくいった）
スマホにブルートゥースキーボードを接続すれば、VRモードでも動き回れる。
さらにVRリモコンでの操作を加えたければ、以下を参考すればよい。
https://kkblab.com/make/javascript/pad.html
参考