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 TemplateSimple Drag ExampleSimple Keyboard Input ExampleClick+Drag to Multi SelectRemember to click in scene (to set focus) before using keyboard