25 Babylonjs入門キーボードマウスなどシーンとのインタラクション
ユーザーは、キーボード、GUI、マウス/移動端の指イベントまたはゲームハンドルの3つの主要な方法でシーンと対話することができます.このセクションでは、キーボードとマウス/指のイベントの使用について説明します.
キーボードイベント
コードを設定すると、シーン内の異なるキーボードボタンのイベントフィードバックが得られます.
マウス指インタラクション
まず、Babylonについて注意してください.jsの指イベントは、PEP(Pointer Events Polyfill)の追加導入が必要です.PEPは、まだ実装されていないすべてのブラウザに対応するPOINTERイベントを埋め込み、すべてのデバイスと入力に統一的なイベント応答を提供します.ページPEP を追加 canvasキャンバスのデフォルトのイベント を のコードにより、 でもマウスでも、プロジェクトで のPOINTERイベントを できます.
のイベントトリガの を するマウスドラッグモデル キーボードキーイベント
キーボードイベント
コードを設定すると、シーン内の異なるキーボードボタンのイベントフィードバックが得られます.
scene.onKeyboardObservable.add((kbInfo) => {
switch (kbInfo.type) {
case BABYLON.KeyboardEventTypes.KEYDOWN:
console.log("KEY DOWN: ", kbInfo.event.key);
break;
case BABYLON.KeyboardEventTypes.KEYUP:
console.log("KEY UP: ", kbInfo.event.keyCode);
break;
}
});
マウス指インタラクション
まず、Babylonについて注意してください.jsの指イベントは、PEP(Pointer Events Polyfill)の追加導入が必要です.PEPは、まだ実装されていないすべてのブラウザに対応するPOINTERイベントを埋め込み、すべてのデバイスと入力に統一的なイベント応答を提供します.
scene.onPointerObservable.add((pointerInfo) => {
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERDOWN:
console.log("POINTER DOWN");
break;
case BABYLON.PointerEventTypes.POINTERUP:
console.log("POINTER UP");
break;
case BABYLON.PointerEventTypes.POINTERMOVE:
console.log("POINTER MOVE");
break;
case BABYLON.PointerEventTypes.POINTERWHEEL:
console.log("POINTER WHEEL");
break;
case BABYLON.PointerEventTypes.POINTERPICK:
console.log("POINTER PICK");
break;
case BABYLON.PointerEventTypes.POINTERTAP:
console.log("POINTER TAP");
break;
case BABYLON.PointerEventTypes.POINTERDOUBLETAP:
console.log("POINTER DOUBLE-TAP");
break;
}
});
の