用户可以通过三种主要的方式与场景交互：键盘，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事件，为所有的设备和输入提供了统一的事件响应。
- 页面添加PEP
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
- 停止canvas画布的默认的事件
<canvas id="renderCanvas" touch-action="none"></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;
}
});
官方示例
