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

By customizing the following code template you can control reactions within your scene 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.keyCode);
break;
}
});

Pointer Interactions

First of all a reminder that for touch events in Babylon.js PEP is required. To use PEP all that is necessary is to

  1. install PEP
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  1. stop the default touch-action within the rendering canvas
<canvas id="renderCanvas" touch-action="none"></canvas>

Whether your pointer is an icon or a finger by customizing the following code template you will enable your project to react to a range of 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;
}
});

Playground Examples

Scene Observables TemplateSimple Drag ExampleSimple Keyboard Input ExampleClick+Drag to Multi Select

Remember to click in scene (to set focus) before using keyboard

Further reading

Observables
Learn all about observables in Babylon.js.
Observables