25 Babylonjs入門キーボードマウスなどシーンとのインタラクション


ユーザーは、キーボード、GUI、マウス/移動端の指イベントまたはゲームハンドルの3つの主要な方法でシーンと対話することができます.このセクションでは、キーボードとマウス/指のイベントの使用について説明します.
キーボードイベント
コードを設定すると、シーン内の異なるキーボードボタンのイベントフィードバックが得られます.
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イベントを埋め込み、すべてのデバイスと入力に統一的なイベント応答を提供します.
  • ページPEP
  • を追加
    
    
  • canvasキャンバスのデフォルトのイベント
  • 
    
  • のコードにより、 でもマウスでも、プロジェクトで の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;
        }
    });
    

  • イベントトリガの
  • を する
  • マウスドラッグモデル
  • キーボードキーイベント