前回の続きです。
今回はちょっと趣向を変えた内容となっています。
さて、
three.jsでは様々な形状をgeometryという形で
簡単に生成できるようになっています。
例えばこちらで見られるように、
平面、直方体、球、円柱、
四面体、八面体、二十面体、
ドーナツ形、結び目形など。
ただ、
デフォルトではカプセル形状が無かったので、今回やってみた次第です。
ここで言うカプセルとは、
球を両手でつかんで真ん中から引き伸ばした形状と思ってください。
あるいは円柱の両端に半球をくっつけた形状と言ったほうが分かりやすいかな。
three.jsには、geometryとgeometryあるいはgeometryとmeshを合成できる
THREE.GeometryUtils.merge() という関数が用意されているので、
これを使います。
まず円柱geometryを作ります。
次に上半球と下半球を作り、かつ位置を調整して、
それぞれ順に円柱に合成すればカプセル形状が出来ます。
位置を調整する場合はmesh化しないと出来ないので注意が必要です。
んで、今回作った関数は以下の通りです。
なお、Y軸方向に伸びた形状となるので、
XやZ軸方向に伸びた形状にしたい場合は回転とかしてください。
// radius = 半径
// cylinderHeight = 円柱部の高さ
// segmentsRadius = 半径方向の分割数
// segmentsHeight = 高さ方向の分割数
function createCapsuleGeometry(radius, cylinderHeight, segmentsRadius, segmentsHeight) {
var geometry = new THREE.CylinderGeometry(radius, radius, cylinderHeight, segmentsRadius, segmentsHeight, true),
upperSphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI*2, 0, Math.PI/2)),
lowerSphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI*2, Math.PI/2, Math.PI/2));
upperSphere.position.set(0, cylinderHeight/2,0);
lowerSphere.position.set(0,-cylinderHeight/2,0);
THREE.GeometryUtils.merge(geometry, upperSphere);
THREE.GeometryUtils.merge(geometry, lowerSphere);
return geometry;
}実際の結果はこんな感じになります。
ときに、
ミクさんに物理演算を適用する件ですが、
ほとんど進展はなかったりします。
かな～りチマチマやってたりするので、
時間かかりそうな雰囲気です(^_^;)
とりあえず着手はしているので、経過ぽいのを書いてみます。
MMDではBulletというオープンソースな物理演算エンジンを使っています。
C++で実装されていますが、
これをJavaScriptに直接移植されたものがammo.jsです。
あっさりと「直接移植」ってなってますが、
どうやってC++をJavaScriptへ変換してるんだと思って調べてみたところ、
LLVMという仮想マシンの中間言語を経由して変換しているようです。
つまり、C++ ⇒ LLVMコード ⇒ JavaScript ということのようです。
基本的に、なんでも変換できるようです。凄いですね。
こちらの記事とか興味深いです。
JavaScriptでサポートされてないスレッドとかも可能なのかなぁ。
それはともかくとして、
ammo.jsを利用することになるわけですが、
さいわいthree.jsにはammo.jsを取り扱い易くしてくれる
physijsというプラグインがありますので、
これを使うのが早そうです。
そんなわけでphysijsのソースをちょっと眺めたりしたのですが、
・・・よくわからなかったり・・・(^_^;)
やはりBulletの機能を知らないと、どうもうまくないようです。
ということで、まずはBulletの勉強とかをした方がよさそう。
というのが現況です(^_^;)