3Dオブジェクトのクリック(hit)を検出

壁を表す平面と、銃創の絵が描かれた平面の２つを作成して、壁への衝突を検出し、衝突している場合は、そこに銃槍を刻むシーンをやってみます。

まず、クリックイベントで「pick」関数を使用して座標を取得します

//クリックイベント検出
window.addEventListener("click", function () {
// pickでポインタ情報を取得する
var pickResult = scene.pick(scene.pointerX, scene.pointerY);
});

pickResultオブジェクトは、主に4つの情報で構成されています。

• hit （ブール値）：クリックがシーン内のオブジェクトにヒットした場合はtrue。

• distance （float）：アクティブなカメラとヒットの間の距離（メッシュにヒットしなかった場合は無限）

• pickedMesh （BABYLON.Mesh）：オブジェクトにヒットしたメッシュ。hitしてない場合はnull

• pickedPoint （BABYLON.Vector3）：クリックしたVector3型で返す。hitしてない場合はnull

ヒットした情報を用いて銃槍の位置をずらす

pickResultを用いて

// もしクリックが壁にhitした場合、ぶつかった画像の位置を更新する
if (pickResult.hit) {
impact.position.x = pickResult.pickedPoint.x;
impact.position.y = pickResult.pickedPoint.y;
}

デモ

完成したデモはこちら
https://www.babylonjs-playground.com/#NU4F6Y

次回は,FPSなどで使えるレイキャスト(Raycasts)やっていきます