share facebook facebook twitter menu hatena pocket slack

2020.06.23 TUE

VR滑走路を作ってみた

松本 勝年

WRITTEN BY 松本 勝年

A-Frameで滑走路を作ってみました。
普段見れないアングルから飛行機を見れます。

demo(最初のtouchendイベントで音が再生されます)

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

悩んだところ

過激な動きをする

<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軸の変位は滑走に入ってからにしました。

反対まわりする

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

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

元記事はこちら

VR滑走路を作ってみた

松本 勝年

松本 勝年

フロントエンドに興味があるエンジニア

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。