Three.js Cannon.es - なんちゃってドローン操作：コース編
この記事のスナップショット
ドローンもどき：コース
ソース
動かし方
-
ソース一式を WEB サーバ上に配置してください
-
操作法
- {カーソルキー}／右スティック .. ドローン操作（＊）
- 'w','s','a','d'／左スティック .. ドローン操作（＊）
- 'c'／ .. カメラ視点の変更
- 俯瞰（ふかん）：遠方から
- ドローン：バードビュー（後方・上空から正面を向いて）
- ドローン：ドライバーズビュー（中心から正面を向いて）
- ドローン：周りを公転
- 'r' .. ドローンの姿勢リセット
- 'k' .. キー／ゲームパッドの感度変更（３段階）
- '1' .. モード１に変更
- '2' .. モード２に変更
- 'q' .. キーボードからゲームパッドへフォーカス変更
-
＊）補足
- 「ドローン操作」はモード１とモード２で挙動が変わります。
- ドローン（モード１）左スティック：前後移動・左右旋回 右スティック：上昇下降・左右移動
- ドローン（モード２）左スティック：上昇下降・左右旋回 右スティック：前後移動・左右移動
- 「ドローン操作」はモード１とモード２で挙動が変わります。
概要
ゲームパッドのスティックを生かした何かをつくりたくて、ドローン操作のシミュレータを作成しました。
といっても実際にドローンは持ってないし、ドローンシミュレータを触ったこともないので、「なんちゃってドローン」です。
やったこと
今回の記事ではいくつかのコースを紹介します。
次回の記事で機能について解説します。
-
コース作り
- せっかくなので先述の「スロープトイ」でコースを作り、ボールを追っかけることにします。
- ドローンで追っかけるにはいろいろと小さいので、スケールアップした部品（１０倍にした直線や曲線）を用意しました。
-
コース
-
運動場のトラック＋外周
-
スロープトイからの転用です。
-
運動場のトラックが小さいので、大き目の外周コースも用意しました。
-
超初心者向け。かなり単調。
-
-
アップダウンコース
-
上下方向も加え、コースレイアウトに凝りすぎてしまっって後半力尽きた版です。
-
ボールがやたらコースアウトしたり、詰まったりするので、玉をポップさせる箇所（ソース）を複数配置してます。
-
表示が重いです。とくにコース上下で折り返しているところで、全景を視野にいれると極端に処理が重くなります。
-
-
ひょうたん型
-
ボールを高速に周回させるための試作コースです。
-
カーブは径を大きくしても不安定なようでボールを速く動かそうとするとガタつきます。
なので加速しすぎないようにしてます。
-
-
レースコース＋ポール
-
コースの両脇にポール（縦の棒）を立てた版です。
-
ポールの制限がある分やや難しくなりますが、
コース自体が大き目なので飛ばしやすいコースに仕上がってます
-
-
レースコース＋四角枠
-
コースが四角の枠に囲まれて、疑似的にトンネルっぽいコースになります。
-
ボールがカーブを高速で回れない反省を生かして、できるだけ直線でコースレイアウトしてます。
-
自作しておきながら、ヘアピンカーブが難しいｗ
ゲームパッドで操作するときは感度を低に落とさないと周回できなかったです。 -
コースは大きくなりすぎないように、でもボールが全力で逃げるように加速／減速しているので、個人的に楽しいコースに仕上がりました。
-
-
まとめ
このために前回「スロープトイ」をやったわけではないのですが、「瓢箪から駒」、意外なところでつながりました。
単純にコースを周回するだけでなく、ボールも一緒にコース内を走るということで楽しさが増したと思います。
目標／ライバルって大事ですね。
Discussion