VR滑走路を作ってみた

A-Frameで滑走路を作ってみました。
普段見れないアングルから飛行機を見れます。
![runway_min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/c26024f0-4a85-d4ed-79ba-fbef5a576248.gif)
[demo(最初のtouchendイベントで音が再生されます)](https://k38.github.io/aframe/alongpath-component/runway.html)

決めたルートでエンティティを動かしたいと思い、[aframe-alongpath-component](https://www.npmjs.com/package/aframe-alongpath-component)を試す為のテーマに滑走路を選びました。
機能自体は書いてある通りなのですが、使ってみるとちょっと悩んだところがあったので紹介してみます。

## 悩んだところ

### 過激な動きをする
![vertical.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/436546a9-8c6c-5736-a065-ea7af3b2ab6c.gif)

```
<a-curve-point id="p5" position="0 -3 -7400"></a-curve-point>
<a-curve-point id="p6" position="0 0 -7400"></a-curve-point>
```

こういう変化をさせようとすると、ウイリーしてしまいました。
z軸の変位も加えるように、y軸の変位は滑走に入ってからにしました。

### 反対まわりする
![rotation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/d9b17cf0-74a9-dd3d-0f46-4de3c9f4e5bb.gif)

```
<a-curve-point id="p5" position="0 0 -7400"></a-curve-point>
<a-curve-point id="p6" position="0 0 -7400"></a-curve-point>
```

その場で静止させようとしたら、逆回転してしまいました。
目でわからない程度の変化(z軸に1px)をつけてごまかしました。

### ポイント通過を検出できたりできなかったり
パスのポイントをエンティティが通過したイベント(alongpath-trigger-activated)が、発火したりしなかったりします。
閾値(triggerRadius)が影響しそうなんだけど、全く同じ設定でも発火したりしなかったりしているので、よくわからないです。
triggerRadiusの値を1, 10, 100に設定した場合について、発火したポイントに○をつけた表を作成しました。

#### triggerRadius: 1

| id | position | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|:--|:--|:--|:--|:--|:--|:--|
| p1 | -3000 0 -7500 | ○ |  |  |  |  |
| p2 | -1500 0 -7500 |  |  |  |  |  |
| p3 | -600 0 -7500 |  | ○ | ○ | ○ |  |
| p4 | -100 0 -7500 | ○ |  |  |  |  |
| p5 | 0 0 -7400 | ○ | ○ | ○ | ○ | ○ |
| p6 | 0 0 -7299 | ○ | ○ | ○ | ○ | ○ |
| p7 | 0 0 -7198 | ○ | ○ | ○ | ○ | ○ |
| p8 | 0 0 -7197 | ○ | ○ | ○ | ○ | ○ |
| p9 | 0 0 -7196 | ○ | ○ | ○ | ○ | ○ |
| p10 | 0 0 -7195 | ○ | ○ | ○ | ○ | ○ |
| p11 | 0 2 -6500 |  |  |  |  |  |
| p12 | 0 4 -2000 |  |  | ○ |  |  |
| p13 | 0 500 2500 |  |  |  |  |  |
| p14 | 0 3000 7000 |  |  |  |  |  |
| p15 | -800 8000 11000 |  |  |  |  |  |

#### triggerRadius: 10

| id | position | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|:--|:--|:--|:--|:--|:--|:--|
| p1 | -3000 0 -7500 | ○ |  |  |  |  |
| p2 | -1500 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p3 | -600 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p4 | -100 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p5 | 0 0 -7400 | ○ | ○ | ○ | ○ | ○ |
| p6 | 0 0 -7299 | ○ | ○ | ○ | ○ | ○ |
| p7 | 0 0 -7198 | ○ | ○ | ○ | ○ | ○ |
| p8 | 0 0 -7197 | ○ |  |  | ○ |  |
| p9 | 0 0 -7196 |  | ○ | ○ |  | ○ |
| p10 | 0 0 -7195 |  |  |  | ○ |  |
| p11 | 0 2 -6500 | ○ | ○ | ○ | ○ | ○ |
| p12 | 0 4 -2000 |  | ○ | ○ |  | ○ |
| p13 | 0 500 2500 | ○ |  |  |  |  |
| p14 | 0 3000 7000 |  |  | ○ |  |  |
| p15 | -800 8000 11000 |  |  |  |  |  |

#### triggerRadius: 100

| id | position | 1回目 | 2回目 | 3回目 | 4回目 | 5回目 |
|:--|:--|:--|:--|:--|:--|:--|
| p1 | -3000 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p2 | -1500 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p3 | -600 0 -7500 |  | ○ | ○ | ○ | ○ |
| p4 | -100 0 -7500 | ○ | ○ | ○ | ○ | ○ |
| p5 | 0 0 -7400 | ○ | ○ | ○ | ○ | ○ |
| p6 | 0 0 -7299 | ○ | ○ | ○ | ○ | ○ |
| p7 | 0 0 -7198 | ○ | ○ | ○ | ○ | ○ |
| p8 | 0 0 -7197 |  | ○ |  |  | ○ |
| p9 | 0 0 -7196 |  |  |  |  |  |
| p10 | 0 0 -7195 |  |  |  |  |  |
| p11 | 0 2 -6500 | ○ | ○ |  | ○ | ○ |
| p12 | 0 4 -2000 | ○ | ○ | ○ | ○ | ○ |
| p13 | 0 500 2500 | ○ | ○ | ○ | ○ | ○ |
| p14 | 0 3000 7000 | ○ | ○ | ○ | ○ | ○ |
| p15 | -800 8000 11000 | ○ | ○ | ○ | ○ | ○ |

大きく変化するところは、triggerRadiusが大きい方が精度が良く、
小さく変化するところは、triggerRadiusが小さい方が精度が良いようです。

今回のケースだと、小さく変化させているところは静止させたいだけなので、
x軸の変化を表すパスと、z軸の変化を表すパスに分けてもよかったのかもしれません。

## 今回利用させて頂いた素材

- [Air New Zealand Boeing 777 219 ER updated livery - danielskom111](https://sketchfab.com/3d-models/air-new-zealand-boeing-777-219-er-updated-livery-17050ee33dfb4fe1981cac462893c158)
- [飛行機上空通過１ - 効果音ラボ](https://soundeffect-lab.info/sound/machine/)
- [飛行機のエンジン音 - Yuno](https://dova-s.jp/se/play1089.html)