Interacting With Scenes
How to Interact with A Scene
There are three main ways for a user to interact with a scene, the keyboard, the GUI and directly with a mouse, touch or gamepad. The use of keyboard and pointer interactions are described on this page.
Keyboard Interactions
This is a code template to control reactions to different keys. Both the ascii
code for the key and the key itself are available to you.
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.code); break; }});
Pointer Interactions
This is a code template for reacting to pointer events:
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; }});
PEP is an option for supporting touch events in older browsers (ones that don't natively support pointer events). To use PEP all that is necessary is to:
- Install PEP
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
- Stop the default touch-action within the rendering canvas
<canvas id="renderCanvas" touch-action="none"></canvas>
Playground Examples
Scene Observables Template Simple Drag Example Simple Keyboard Input Example Click+Drag to Multi SelectRemember to click in scene (to set focus) before using keyboard