# Interacting With Scenes

> Begin learning about how to develop interactions for your Babylon.js scenes.

Source: https://doc.babylonjs.com/features/featuresDeepDive/scene/interactWithScenes

## How to Interact with A Scene

There are three main ways for a user to interact with a scene: the keyboard, the [GUI](https://doc.babylonjs.com/features/featuresDeepDive/gui), and directly through a mouse, touch, or gamepad. The use of keyboard and pointer interactions is 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.

```javascript
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:

```javascript
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](https://github.com/jquery/PEP) is an option for supporting **touch** events in older browsers (ones that don't natively support [pointer events](https://caniuse.com/pointer)). To use PEP, all that is necessary is to:

1. Install PEP

```javascript
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```

2. Stop the default touch-action within the rendering canvas

```javascript
<canvas id="renderCanvas" touch-action="none"></canvas>
```

## Playground Examples

- [Playground: Scene Observables Template](https://playground.babylonjs.com/#0XYMA9#107) - Simple scene observables template.
- [Playground: Simple Drag Example](https://playground.babylonjs.com/#7CBW04) - Simple example of a drag behavior.
- [Playground: Simple Keyboard Input Example](https://playground.babylonjs.com/#XZ0TH6) - Simple example of keyboard input.
- [Playground: Click+Drag to Multi Select](https://playground.babylonjs.com/#2SA7J8#7) - Simple example of how to multi-select objects in a scene using rectangular selection.

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

## Further reading

- [Observables](https://doc.babylonjs.com/features/featuresDeepDive/events/observables)