見出し画像

ダンバルファンページ開発記 22

すける

振り返り＆Three.jsのRaycaster、BoundingBoxのデバッグ回です


振り返り

まずはここまでの振り返りをします。

デバッグに時間かけすぎ

Three.jsを触るのが初めてなので仕方ないとはいえ、触る前から基礎を学んでおけば軽減はできたはず、次回は理解を優先したいところです

作業量の見積もりが不正確

長期企画の一つ目として最初の企画発案段階で張り切りすぎた感は拭えません。仕事の忙しさなど不確定要素があったので、それ用の余裕を始めから組み込むような工夫を次のプロジェクトで試したいと考えています。

手をつけるタイミングが不明瞭

なんとなくいつでも手をつけられる感があって後回しにしてしまうことがありました。この企画も楽しいんだけど、もっと楽で簡単に楽しくなれるやつを（特にこの企画でバグの壁に当たった時）選んでしまいがち。最近スプラトゥーン3のパブロという武器にハマっています。
このいつ手をつけるか問題は毎月第一、第三月曜日に更新するときめてからある程度改善はされたものの、体調なり仕事なり身の回りの世話なりを言い訳に遅れたりしています。誰に頼まれてやっているわけでもないけど、期限を設定したからには守りたい気持ちがあります
「この日はめちゃめちゃ遊ぶデー」などを取り入れて企画に取り組む日、取り組まない日を決めるとよさそうです

じゃあどうするんですか

次の企画

この企画で学んだことを最後にまとめて記事にする予定なので、それを踏まえて内容や計画を練ります。まずは経験を積むのが大事そうなので来年も何かしら作ります。いくつか作りたいものの案はあるので、どう進めていくかはまずこの企画が終わってから考えるということで

この企画

企画段階で作ったバックログ全てを年内に消費するのは不可能なので、大事そうな部分だけ選んで実装、公開まで漕ぎ着けたいです。
実装したいのは：

  • アイドリングアニメーション

  • クリック/タップに応じてリアクション

  • クリック/タップした場所に表示する2Dのエフェクト

  • Web上に公開

までが最低限。すると必要な知識は

  • イベントリスナー（クリックを感知する機能）

  • アニメーションのブレンド（変遷）

  • 2Dキャンバス

  • Web上のホスティング

が必要だと思います。これらを残りの一月半でどうにかクリアしたい


まずは一つ目↓


イベントリスナー

HTML上のDOMエレメントと異なり、Three.jsのモデルにイベントリスナーは（今のところ私の知る限りでは）ありません。
例えば、HTMLのボタンには、クリックを感知するようイベントリスナーを付与することができます

こんなかんじ

Three.js上のモデルは立体的な空間上に存在するので、Raycasterという機能を使い、モデルが指定された位置に存在するかを感知します。カメラから真っ直ぐレーザーを出して、そのレーザーがモデルに当たったらクリック成功、というイメージです

これがうまくいかなかった話をします


やたらシビア

マウスが乗っている部分を濃い青にするようなプログラムを書いたのですが、早速苦戦。角度や距離によってRaycasterがモデルを感知したりしなかったり、安定して判定ができませんでした。


BoxHelperを使う

ずれてる！

BoxHelperという、モデルの位置を視覚化してくれる機能がThree.jsにあります。これを使ってみると、見えているモデルと実際のモデルの位置で大きなずれがあることがわかりました

なぜか爪部分だけ、上手くアニメーションにBoxHelperがついてきてくれています
このあとBufferGeometry.computeBoundingBox()やObject3D.updateMatrixWorld()を使ってフレームごとに当たり判定を更新しようとしたのですが、何も起きませんでした。

Blender側の問題だった

なぜ爪だけ上手くいったのか気になったので、Blender側でなにか違いがないかもみてみました

みてみると爪以外のオブジェクトにはモディファイア（青いレンチのマーク）がついており、Armatureのモディファイアで制御していることに気づきました。




エディットモードにすると顔のオリジン（顔の中心のオレンジ色の点）がアニメーションから離れてしまうことがわかります


そこで一回ペアレントを解消し、Object > Parent > Boneで顔を丸ごとボーンにつけました


するとオブジェクトがオリジンごと動いてくれるように


ほかの目や胴体のオブジェクトも同じようにペアレントにすると…


なおった！

実際のモデルの位置が見えているオブジェクトと一致するようになりました！


アニメーション中も、マウスカーソルの当たり判定を安定して判別できるようになりました。これでクリックによる操作ができるようになります。
上のgifではクリックでアニメーションの再生/停止をしています

デメリット

実は上の方法だと、モデルそのものをクリックすることができる代わりに、複数の当たり判定をフレームごとに計算しているのでかなりコンピュータに負荷がかかります。複雑なモデルやアニメーションを使用する場合はなおさらです。
今回はモデルを直接クリックしましたが、厳密な判定が必要ない場合、大体同じくらいのサイズの透明の箱を用意するというやり方もあります。それをモデルに合わせて動かすことで、より少ない計算でクリック操作をするというわけです。
今回作成したダンバルのモデルはあまり複雑ではないのでこのままでもいける気がしますが、もし（特にモバイルブラウザーで）問題が起きた場合は、その手もあります



次回

次回は現時点で用意できている「カメラに気づいてこっちにくる」動きの次、カメラの前でふわふわするアイドリングの動きを作り、スムーズに繋げて再生できるようにします

この記事が気に入ったらサポートをしてみませんか？