0%

scene

Posted on Edited on In
Symbols count in article: 655 Reading time ≈ 2 mins.

Default World

Create Default Camera

The 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 control to the canvas

1
scene.createDefaultCamera(true, true, true);

Create Default Light

The createDefaultLight takes just one boolean parameters, 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 which means no light will add to the scene.

When this method is used before the creation of any other lights then it is usually sufficient to use

Create Default Environment

1
let environment = scene.createDefaultEnvironment(options);

adds a skybox and ground to the scene, sets a wide range of environmental parameters and returns an environmental helper to the scene. See more options in the API Doc

Create Default SkyBox

The createDefaultSkybox method can be used when you do not want to create a full environment

1
2
var texture = new BABYLON.CubeTexture("path/to/texture", 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 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.

Note

Since the createDefault... helpers take into account any models in the scene to calculate parameter like scale and position, so it’s a good practice to createDefaultXXX after creating all models.

Interacting With Scenes

Keyboard Interactions

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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;
  }
});

Using Multiple Scenes

1
2
3
4
5
6
7
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);

engine.runRenderLoop(function () {
  scene0.render();
  scene1.render(); // scene1 will erase scene0
});

Remeber 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:

1
2
3
4
5
6
7
8
var scene0 = new BABYLON.Scene(engine);
var scene1 = new BABYLON.Scene(engine);
scene1.autoClear = false;

engine.runRenderLoop(function () {
  scene0.render();
  scene1.render();
});

Applying Delta Changes To A Scene

This means you can “record” all changes done to a scene and later on reapply these changes.

This is particularly useful when you load a scene from a .babylon or a .gltf file and you want to apply changes to it

Recording the changes

To record changes done to a scene, you simply have to create a new SceneRecorder and call its track() function:

1
2
3
let recorder = new BABYLON.SceneRecorder();

recorder.track(scene);

This will mark the origin of the changes eg. the original state of your scene. Every changes (well, almost actually, please check the limitations chapter below) made after that call will be tracked and available in the delta file.

Applying the changes

1
2
3
var delta = recorder.getDelta();
BABYLON.Tools.Download(JSON.stringify(delta), "delta.json"); // download changes
BABYLON.SceneRecorder.ApplyDelta(delta, scene); // apply changes

Limitations

The recorder has some limitations listed here:

  • It will only record simple values (array, colors, vectors, boolean, number)
  • It will not record large state changes like:
    • Updating the material property of a mesh
    • Updating the skeleton property of a mesh
    • Updating mesh’s geometry