Chapter 27

4-01: 車の衝突事故を回避する (Avoiding a Car Crash)

ちょまど (千代田まどか)
ちょまど (千代田まどか)
2022.04.29に更新

このページの原文: https://doc.babylonjs.com/start/chap4/mesh_intersect

🙍⚡🚙 4-01: 車の衝突事故を回避する (Avoiding a Car Crash)

2 つのメッシュが接触しているかどうかを確認する最も簡単な方法は、
次のように、intersectsMesh (交差するメッシュ) メソッドを使用することです。

mesh1.intersectMesh(mesh2);

mesh1 のバウンディングボックス (Bounding Box (境界ボックス)) が
mesh2 のバウンディングボックスに
オーバーラップ (重なる) ときに true になります。

各メッシュには、そのメッシュの表面をちょうど囲うのに必要な大きさの四角い箱の「バウンディングボックス(Bounding Box)」が組み込まれています。メッシュ同士の交差 (intersection) をチェックするのに使われます。

キャラクタの散歩と車のドライブはそれぞれ独立して行われているため、それぞれが同じ場所に存在してしまう(交差する)ときがくるでしょう。
しかし、それがいつになるか予測するのは難しいです。

intersectsMesh メソッドの使い方を見るため、キャラクタ dude くんに、車の停止場所を前後に歩いてもらいます。(危ないから現実世界ではやらないでね)

車が「ヒット」ゾーンにあり、キャラクタは「ヒット」ゾーンにいない場合、キャラクタを止まらせたいですね。
また、車が「ヒット」ゾーンにいて、キャラクタも「ヒット」ゾーンにいる場合は、キャラクタがその危険ゾーンにいるままそこで停止するのは危険です。


Inspector (インスペクタ) で見る dude くん

dude くん (him ノード) は頭、胴体、脚、腕の入っている単なる入れ物 (holder) ノードであるので、この場合、(him ノードの) 子 (/0 - /4) のどれかのバウンディングボックスを当たり判定として使う必要があります。(↓のコードでは dude.getChildren()[1] が使われています)

https://playground.babylonjs.com/#KBS9I5#83

dudeくんの動き
scene.onBeforeRenderObservable.add(() => {
    if (carReady) { // car.glb の読み込みが完了したら
        if (
                !dude.getChildren()[1].intersectsMesh(hitBox) 
                && scene.getMeshByName("car").intersectsMesh(hitBox)
            ) {
            return;
        }
    }
    dude.movePOV(0, 0, step);
    distance += step;
        
    if (distance > track[p].dist) {
        dude.rotate(
            BABYLON.Axis.Y
            , BABYLON.Tools.ToRadians(track[p].turn)
            , BABYLON.Space.LOCAL
        );
        p +=1;
        p %= track.length; 
        if (p === 0) {
            distance = 0;
            dude.position = new BABYLON.Vector3(1.5, 0, -6.9);
            dude.rotationQuaternion = startRotation.clone();
        }
    }
})

ヒットゾーンのボックスを見えなくした版の例↓

https://playground.babylonjs.com/#KBS9I5#84

☞ 次の 5 章では、この村の環境をもっと改善

現在の村の繰り返されてる単調なアニメーションの状態は少し不自然ですね。
村を歩いているキャラクタの動きも、車の動きの繰り返しも、ちょっと変だし煩わしく思えます。

車が自然に村をドライブしているように見えるように、少し環境を改善してみましょう。
ハイトマップ (height map (高さマップ) (ざっくり言うと、高さの情報を持ったテクスチャ)) から作成された、遠くにある丘を配置し、
その谷にこの村が立地するようにしましょう。
また、車が通るための道路も配置します。
空や木も付け加えましょう。