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

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

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

官方示例

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

你可能感兴趣的:(babylon,babylon.js,鼠标事件,键盘事件,手指事件,游戏引擎)