1
1

More than 3 years have passed since last update.

A-Frameで滑走路を作ってみました。
普段見れないアングルから飛行機を見れます。
runway_min.gif
demo(最初のtouchendイベントで音が再生されます)

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

悩んだところ

過激な動きをする

vertical.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

<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軸の変化を表すパスに分けてもよかったのかもしれません。

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1