Three.js r110とAmmo.jsを併用して物理演算してみるテストその２
「Three.js r110とAmmo.jsを併用して物理演算してみるテスト」の続きとしてglTF形式の3Dデータも追加で表示できるか試してみました。 Three.jsとAmmo.jsによる3D上の物理演算をしつつ、glTF形式の3Dモデルや3Dアニメーションも読み込んで表示できるか試してみたものです。
まず最初は
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その01
で、ただの3Dモデルを表示させてみました。
3Dモデルは自分で MagicaVoxel で作成したアニメーションもしない単純な3Dモデルです。 その3Dモデルのまわりにそれをちょうど覆うぐらいの大きさのBoxを作成して物理演算を行わせて、座標も3Dモデルに合わせて移動させるようにしています。 少し雑ですが、これでglTF形式の3Dモデルが物理演算されているように見せることができるか試してみています。 Boxは3Dモデルが見やすいように、基本透明にしてワイヤーフレーム部分だけ青色で表示されるようにしています。
無事に3Dモデル表示できました。 物理演算による赤い球との当たり判定もまぁまぁありかなと。
次に
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その02
でアニメーションする3Dモデルを表示しています。
基本的には、表示されるglTF形式の3Dモデルがアニメーションするものになっていること以外は「...その01」と同じ機能です。 あと1つ変更点は、物理演算用Boxの輪郭を表示する線をワイヤーフレーム形式からもっとシンプルにBoxの辺だけを表示するものに変更して、線の表示・非表示も「linesDisp」ボタンで切り替えられるようにしていることです。
無事に3Dモデルのアニメーションも表示できました。
前にUnityでの作業時に、Unityの物理演算当たり判定の範囲設定時の立法体による指定にコレジャナイ感がありました。 が、今回自分でその辺の機能を実際に作ってみると、かなりUnityのその機能への納得感が増してきました。
どこかで「Unityの自慢の物理演算機能」と見かけて自画自賛のように感じていた説明も、Ammo.jsとThree.jsの連携でヒーヒー言いながら作業した後では、かなり納得できるものとなりました。
前のnoteにも書きましたが、なんかThree.jsとAmmo.jsを使いながらUnityのすばらしさを確認する旅みたいになってますｗ。
で、3番目の
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その03
では複数の3Dアニメーションを切り替えて表示しています。
このコードはBoxを使用した物理演算については、これまでのコードと基本的に同じ機能のままです。 加えて「forward」ボタン押下時は「歩く」アニメーション、「bDash」ボタン押下時は「走る」アニメーションを表示して移動速度も速くし、それ以外の状態では「待機」アニメーションを表示するようにしています。
このコードは想像していたよりも、うまく切り替え処理ができて「bDash」ボタン押下時の走る風な動きも表現できて、なかなかにうれしかった記憶がありますw。
これで、無事に複数3Dモデルのアニメーションの切り替え表示もできました。
4番目の
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その04
は表示させるアニメーションが変わっただけで、その他は「その03」とほぼ同じ機能です。
切り替え対象のアニメーションが変わった以外は、物理演算に使用するBoxの大きさが変わったぐらいで、この「その04」はどちらかと言うと次の「その05」のコーディングをするための準備みたいなものとなってます。
無事に複数3Dモデルのアニメーションの切り替え表示もできました2.0。
最後に
Three.js r110とAmmo.js(20200314時点)によるglTF3Dモデルの表示＆操作その05
となります。
このコードで使用しているglTFファイルは、切り替え対象の複数アニメーションの中に「ジャンプ」アニメーションを含んでいるので、それを使用して「Jump」ボタンを作成してみました。 「Jump」ボタン押下で操作対象ロボがジャンプして上昇していく機能です。 が、ジャンプできるかできないかの判定を作るのが何か非常にめんどくさく感じられたので無限にジャンプできるテキトーな仕様のままにしてしまっています。 フワフワ空中散歩してるみたいで面白いし、まーいっか、ということにしてます。 謎のロボットだし可能、可能、全然いけるはず、みたいなテキトー仕様。
まぁ実際は、なにか真面目にジャンプ可否判定を実装するとなると、また前回でいろいろ苦しんだ様にAmmo.jsとの長い格闘がはじまりそうなのでビビッてしばらく見た目だけ整えるコーディングだけしていたいってのが本当です。。。
そんなわけで、無事に3Dモデルのジャンプのアニメーションと物理演算ができるようになりました？？？
この記事が気に入ったらサポートをしてみませんか？