25 Babylonjs入门进阶 键盘鼠标等与场景交互

用户可以通过三种主要的方式与场景交互：键盘，GUI以及鼠标/移动端的手指事件或游戏手柄。本节主要讲解键盘和鼠标/手指的事件使用。

键盘事件

通过设置一下代码，你可以得到场景中不同的键盘按键的事件反馈。

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事件，为所有的设备和输入提供了统一的事件响应。

1. 页面添加PEP

<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

2. 停止canvas画布的默认的事件

<canvas id="renderCanvas" touch-action="none"></canvas>

3. 通过以下代码，无论手指还是鼠标，你都可以在项目中获取到一系列的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;
    }
});

官方示例

• 查看事件触发示例
• 鼠标拖动模型示例
• 键盘按键事件示例