网站建设案例咨询/网络推广app是违法的吗
用户可以通过三种主要的方式与场景交互:键盘,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;}
});
官方示例
- 查看事件触发示例
- 鼠标拖动模型示例
- 键盘按键事件示例