
## How to Interact with A Scene

There are three main ways for a user to interact with a scene: the keyboard, the [GUI](/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 id="#0XYMA9#107" title="Scene Observables Template" description="Simple scene observables template." image="/img/playgroundsAndNMEs/divingDeeperInteractions1.webp" isMain={true} category="Interactions"/>
<Playground id="#7CBW04" title="Simple Drag Example" description="Simple example of a drag behavior." image="/img/playgroundsAndNMEs/divingDeeperInteractions2.webp" isMain={true} category="Interactions"/>
<Playground id="#XZ0TH6" title="Simple Keyboard Input Example" description="Simple example of keyboard input." image="/img/playgroundsAndNMEs/divingDeeperInteractions3.webp" isMain={true} category="Interactions"/>
<Playground id="#2SA7J8#7" title="Click+Drag to Multi Select" description="Simple example of how to multi-select objects in a scene using rectangular selection." isMain={true} category="Interactions"/>

Remember to click in the scene (to set focus) before using the keyboard.



## How to Use Multiple Scenes

To use multiple scenes, create them with

```javascript
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
```

Then put the relevant camera, lights, and meshes inside each scene and call them in `runRenderLoop`.

```javascript
engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```

However, this simple code has a potential problem. Remember that each `scene.render` call will try to clear what has been rendered before, and to avoid one scene erasing what another has rendered, you need to set `scene.autoClear = false` on all the scenes rendered on "top" of others:

```javascript
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
scene1.autoClear = false; 
```

```javascript
engine.runRenderLoop(function () {
  scene0.render();
  scene1.render(); // Since scene1's autoClear is false, it will not "erase" what scene0 has rendered.
});
```

### Multiple scenes on the Playground

However, there is a difference between writing multiple scenes within your own projects and trying them out in the Playground.

In your own project, it is easy enough to set up create scene functions for each scene and call them in the engine render loop. For example:

```javascript
var createScene0 = function () {
  var scene0 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene0

  return scene0;
};

var createScene1 = function () {
  var scene1 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene1

  return scene1;
};

//Any other code
var scene0 = createScene0();
var scene1 = createScene1();

engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});
```

The Playground has its own engine render loop, which needs to be stopped before running your own version:

```javascript
var createScene = function () {
  var scene = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene

  ////////OTHER SCENE////////////////////
  var scene1 = new BABYLON.Scene(engine);

  //Add camera, light and meshes for scene

  ////////CONTROL ENGINE LOOP///////////
  setTimeout(function () {
    engine.stopRenderLoop();

    engine.runRenderLoop(function () {
      scene.render();
      scene1.render();
    });
  }, 500);

  return scene;
};
```

An example of switching the currently active scene on the Playground is as follows:
<Playground id="#P3E9YP" title="Switching Scenes" description="Simple example showing how to switch scenes." isMain={true} category="Scene"/>



## How To Fast Build a World

There are a number of helpers that, once you have put models into a scene, add cameras, lights, and an environment that automatically adjust to the models, allowing you to view them quickly. You can then make adjustments as needed.

For beginners to Babylon.js, the [Fastest Build](/features/featuresDeepDive/scene/fastBuildWorld#fastest-build) and [Import and Fastest Build](/features/featuresDeepDive/scene/fastBuildWorld#import-and-fastest-build) sections will quickly give you a viewable world and are a good way to look at models. As such, they are level 1 material. It is worth considering working through Babylon101 and parts of the level 1 material to make the other information and details on this page easier to understand.

## Helpers

The following is a list of the methods of the `scene` object that help in fast building a world, with a link to their API description:

- [createDefaultCameraOrLight](/typedoc/classes/babylon.scene#createdefaultcameraorlight);
- [createDefaultCamera](/typedoc/classes/babylon.scene#createdefaultcamera);
- [createDefaultLight](/typedoc/classes/babylon.scene#createdefaultlight);
- [createDefaultEnvironment](/typedoc/classes/babylon.scene#createdefaultenvironment);
- [createDefaultSkybox](/typedoc/classes/babylon.scene#createdefaultskybox);

## Fastest Build

To build a world very quickly, just use `createDefaultCameraOrLight` along with `createDefaultEnvironment`, as in this example:

```javascript
scene.createDefaultCameraOrLight(true, true, true);
scene.createDefaultEnvironment();
```

<Playground id="#MJNICE" title="The Quickest Way To Build A World" description="Simple example of creating a world with createDefaultEnviornment." isMain={true} category="Environment"/>

You can see how the camera automatically adjusts by adding a second box and repositioning it:

<Playground id="#MJNICE#3" title="Fast Build With Camera Adjust" description="Simple example of building a world quickly and adjusting the camera."/>

More information about these methods, including details about parameters, can be found in the individual sections below.

## Create Default Camera or Light

As shown in the _Fastest Build_ section, the `createDefaultCameraOrLight` helper creates both a camera and a light in one line. The three parameters it takes are the same as for the `createDefaultCamera` method. The second parameter also applies to the light and replaces any existing camera or light when `true`. Accessing the camera or light works the same way as with the individual methods.

## Create Default Camera

`createDefaultCamera` takes three boolean parameters, all set to _false_ by default. They are:

- createArcRotateCamera: creates a free camera by default and an arc rotate camera when _true_;
- replace: when _true_ the created camera will replace the existing active one;
- attachCameraControls: when _true_ attaches control to the canvas.

This code will create an arc rotate camera, replace any existing camera, and attach the camera controls to the canvas:

```javascript
scene.createDefaultCamera(true, true, true);
```

<Playground id="#MJNICE#4" title="Camera Helper Example (no light)" description="Simple example of the camera helper with no light."/>
<Playground id="#MJNICE#5" title="Camera Helper Example" description="Simple example of the camera helper."/>

For a free camera:

```javascript
scene.createDefaultCamera(false, true, true);
```

<Playground id="#MJNICE#6" title="Camera Helper Example (Free Camera)" description="Simple example of the camera helper with a free camera."/>

The camera will adjust depending on the size and position of each mesh in the world.

<Playground id="#MJNICE#7" title="Camera Helper Adjusting" description="Simple example of the camera helper and adjusting to a large box."/>

### Accessing the Camera

Since creating the camera this way makes the helper-created camera the active camera, the simplest way to access it is:

```javascript
scene.createDefaultCamera(true, true, true);

var helperCamera = scene.activeCamera;
```

<Playground id="#MJNICE#11" title="Camera Helper With Active Camera Changes" description="Simple example of the camera helper and making changes to the active camera."/>

An alternative way to access the helper-created camera immediately after creating it is to use the fact that it will be the last one in the `scene.cameras` array:

```javascript
scene.createDefaultCamera(true, true, true);

var helperCamera = scene.cameras[scene.cameras.length - 1];

//OR

var helperCamera = scene.cameras.pop();
scene.cameras.push(helperCamera);
```

<Playground id="#MJNICE#8" title="Camera Helper With Radius and Angle Changes" description="Simple example of the camera helper and making changes to the camera radius and angles."/>

## Create Default Light

`createDefaultLight` takes just one boolean parameter, set to _false_ by default:

- replace: when _true_ the created light will replace all the existing ones; when _false_ and there are no existing lights a hemispherical light is created; when _false_ and lights already exist, no change is made to the scene.

When this method is used before any other lights are created, it is usually sufficient to use:

```javascript
scene.createDefaultLight();
```

### Accessing the Light

Provided you access the helper-created light immediately after creating it, it will be the last one in the `scene.lights` array.

You can obtain it using

```javascript
scene.createDefaultLight();

var helperLight = scene.lights[scene.lights.length - 1];

//OR

var helperLight = scene.lights.pop();
scene.lights.push(helperLight);
```

<Playground id="#MJNICE#9" title="Light Helper With Direction and Color Change" description="Simple example of the light helper and changing the light's color and direction."/>

## Create Default Environment

The simple code

```javascript
scene.createDefaultEnvironment();
```

adds a skybox and ground to the scene, sets a wide range of environmental parameters, and returns an [environmental helper](/typedoc/classes/babylon.environmenthelper).

You will also find below a helper for [just a skybox](/features/featuresDeepDive/scene/fastBuildWorld#create-default-skybox).

When you look at the following playground:

<Playground id="#MJNICE" title="Playground Fast Build" description="Simple example of creating the default enviornment in the playground."/>

it is not obvious that a skybox and ground have been added. The defaults have been set to be very subtle and to help give the objects a grounded feel.

Moving the camera further out shows that the skybox is constructed.

<Playground id="#MJNICE#1" title="Skybox Example" description="Simple example showing how to create a skybox."/>

You can also see the skybox and ground by using the options parameter and setting different values for the skybox texture and the ground color.

<Playground id="#MJNICE#10" title="Skybox and Ground Changes" description="Simple example of creating a skybox and ground and changing their properties."/>

### Options Parameters

As you can see in the above playground, the `createDefaultEnvironment` method takes an options parameter. The full range of environmental helper option properties is available in the [API](/typedoc/interfaces/babylon.ienvironmenthelperoptions).

So, for example

to prevent the creation of the skybox:

```javascript
var helper = scene.createDefaultEnvironment({
  createSkybox: false,
});
```

to enable ground reflection:

```javascript
var helper = scene.createDefaultEnvironment({
  enableGroundMirror: true,
});
```

when you see z-fighting with the ground, modify the `groundYBias` to a larger number:

```javascript
var helper = scene.createDefaultEnvironment({
  groundYBias: 0.01,
});
```

### Applicable Methods

Since the `createDefaultEnvironment` method returns an `environmentalHelper` object, all the properties and methods of this object (as described in the [API](/typedoc/classes/babylon.environmenthelper)) are available.

So, for example, if the environment color is not your preferred choice, you can modify it after creation:

```javascript
var helper = scene.createDefaultEnvironment();
helper.setMainColor(BABYLON.Color3.Teal());
```

<Playground id="#MJNICE#12" title="Changing The Main Color" description="Simple example of changing the scene's main color."/>

Or, if you wish to dispose of the ground after creating the environment, use:

```javascript
var helper = scene.createDefaultEnvironment();
helper.ground.dispose();
```

Or you can change the option parameters:

```javascript
var helper = scene.createDefaultEnvironment();
var options = {
  skyboxTexture: new BABYLON.CubeTexture("/textures/skybox", scene),
};
helper.updateOptions(options);
```

<Playground id="#MJNICE#13" title="Changing Scene Options" description="Simple example showcasing how to change options of the scene."/>

### Environmental Helper

NOTE: The environment helper relies exclusively on the [BackgroundMaterial](/features/featuresDeepDive/environment/backgroundMaterial) to be as efficient as possible.

## Create Default Skybox

The `createDefaultSkybox` method can be used when you do not want to create a full environment. The [parameters](/typedoc/classes/babylon.scene#createdefaultskybox) used determine how the skybox is created.

for example

```javascript
var texture = new BABYLON.CubeTexture("/assets/textures/SpecularHDR.dds", scene);
scene.createDefaultSkybox(texture, true, 100);
```

In this case the first two parameters used give the texture for the skybox and specify that [a PBRMaterial](/features/featuresDeepDive/materials/using/introToPBR) is to be used (second parameter, _true_) as opposed to a standard material (second parameter, _false_ - default value).

The third parameter defines the scale of your skybox (this value depends on the scale of your scene), the default value is _1000_.

<Playground id="#MJNICE#14" title="Skybox Scale Example" description="Simple example showing how to scale a skybox in the playground."/>

## Import and Fastest Build

To import models and build a world very quickly, just use `createDefaultCameraOrLight` along with `createDefaultEnvironment`, as in this example:

<Playground id="#MJNICE#15" title="Importing Models and Quickly Building A World" description="Simple example showcasing how to import models and quickly build a world."/>

The camera adjusts its position automatically to make the world viewable depending on the scale and position of the models. More information on importing models with the scene helpers follows below.

## Importing Models for Your World

Since the `createDefault...` helpers take into account any models in the scene, they can only be applied after the model is loaded, so they are placed in the callback function. For example:

```javascript
BABYLON.AppendSceneAsync("https://www.babylonjs.com/assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene).then(function ({ meshes }) {
  scene.createDefaultCameraOrLight(true, true, true);
  scene.createDefaultEnvironment();
});
```

There is then a problem. When creating a scene, Babylon.js checks for a camera. When importing models, the existence of a camera will be checked before the model has finished loading, so the scene will fail.

The solution is to replace the `createScene` function with the `delayCreateScene` function. Whether in a playground or in your own project this is a direct replacement.

**NOTE:** Other [scene loader](/features/featuresDeepDive/importers/loadingFileTypes) methods are available.

### Using Scene Helpers with Import

All the helper methods described earlier on this page behave in exactly the same way when importing models. Just remember to call them within the scene loader callback.

### Import Playground Examples

<Playground id="#10D6YT#33" title="Simple Import and Main Color Change" description="Simple example of importing a scene and changing the main color."/>
<Playground id="#10D6YT#35" title="Importing Blur, Reflections, and Shadow" description="Simple example showing how to import blur, reflections, and shadows."/>


Interacting With Scenes

How to Interact with A Scene

Keyboard Interactions

Pointer Interactions

Playground Examples

Further reading

Observables

Learn all about observables in Babylon.js.