Scene

Provides global scene functionality like raycasting.

• Scene
  • .constructor(engine) ⇒ Scene
  • .onPostRender: Emitter<void[]>
  • .onPreRender: Emitter<void[]>
  • .activeViews
  • .clearColor
  • .colorClearEnabled
  • .engine
  • .skyMaterial
  • .addObject(parent) ⇒ Object3D
  • .addObjects(count, parent, componentCountHint) ⇒ Object3D[]
  • .append(file, options) ⇒ Promise<SceneAppendResult>
  • .load(options) ⇒ Promise<void>
  • .rayCast(o, d, group, maxDistance) ⇒ RayHit
  • .reserveObjects(objectCount, componentCountPerType) ⇒ void
  • .reset() ⇒ void
  • .setLoadingProgress(percentage) ⇒ void

.constructor(engine: WonderlandEngine) ⇒ Scene 

.onPostRender: Emitter<void[]> 

Called after the scene has been rendered

.onPreRender: Emitter<void[]> 

Called before rendering the scene

.activeViews: ViewComponent[] 

Currently active view components.

.clearColor 

Set the background clear color.

.colorClearEnabled 

Set whether to clear the color framebuffer before drawing.

This function is useful if an external framework (e.g. an AR tracking framework) is responsible for drawing a camera frame before Wonderland Engine draws the scene on top of it.

.engine: WonderlandEngine 

Hosting engine instance.

.skyMaterial: null | Material 

Current sky material, or null if no sky is set.

.skyMaterial 

Set the current material to render the sky.

Note: The sky needs to be enabled in the editor when creating the scene. For more information, please refer to the background tutorial.

.addObject(parent: null | Object3D) ⇒ Object3D 

Add an object to the scene.

Returns: A newly created object.

.addObjects(count: number, parent: null | Object3D, componentCountHint: number) ⇒ Object3D[] 

Batch-add objects to the scene.

Will provide better performance for adding multiple objects (e.g. > 16) than calling addObject repeatedly in a loop.

By providing upfront information of how many objects will be required, the engine is able to batch-allocate the required memory rather than convervatively grow the memory in small steps.

Experimental: This API might change in upcoming versions.

Returns: Newly created objects

.append(file: string | ArrayBuffer, options: Partial<SceneAppendParameters>) ⇒ Promise<SceneAppendResult> 

Append a scene file.

Loads and parses the file and its images and appends the result to the currently active scene.

Supported formats are streamable Wonderland scene files (.bin) and glTF 3D scenes (.gltf, .glb).

1
2
3

WL.scene.append(filename).then(root => {
    // root contains the loaded scene
});

In case the loadGltfExtensions option is set to true, the response will be an object containing both the root of the loaded scene and any glTF extensions found on nodes, meshes and the root of the file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

WL.scene.append(filename, { loadGltfExtensions: true }).then(({root, extensions}) => {
    // root contains the loaded scene
    // extensions.root contains any extensions at the root of glTF document
    const rootExtensions = extensions.root;
    // extensions.mesh and extensions.node contain extensions indexed by Object id
    const childObject = root.children[0];
    const meshExtensions = root.meshExtensions[childObject.objectId];
    const nodeExtensions = root.nodeExtensions[childObject.objectId];
    // extensions.idMapping contains a mapping from glTF node index to Object id
});

If the file to be loaded is located in a subfolder, it might be useful to define the baseURL option. This will ensure any bin files referenced by the loaded bin file are loaded at the correct path.

1
2
3

WL.scene.append(filename, { baseURL: 'scenes' }).then(({root, extensions}) => {
    // do stuff
});

Returns: Promise that resolves when the scene was appended.

.load(options: string | SceneLoadOptions) ⇒ Promise<void> 

Load a scene file (.bin).

Will replace the currently active scene with the one loaded from given file. It is assumed that JavaScript components required by the new scene were registered in advance.

Once the scene is loaded successfully and initialized, onSceneLoaded is notified.

ArrayBuffer 

The load() method accepts an in-memory buffer:

1
2
3
4

scene.load({
    buffer: new ArrayBuffer(...),
    baseURL: 'https://my-website/assets'
})

Note: The baseURL is mandatory. It’s used to fetch images and languages.

Use setLoadingProgress to update the loading progress bar when using an ArrayBuffer.

Returns: Promise that resolves when the scene was loaded.

.rayCast(o: Readonly<NumberArray>, d: Readonly<NumberArray>, group: number, maxDistance: number) ⇒ RayHit 

Cast a ray through the scene and find intersecting objects.

The resulting ray hit will contain up to 4 closest ray hits, sorted by increasing distance.

Returns: The scene cached RayHit instance.

Note: The returned object is owned by the Scene instance will be reused with the next rayCast call.

.reserveObjects(objectCount: number, componentCountPerType: Record<string, number>) ⇒ void 

Pre-allocate memory for a given amount of objects and components.

Will provide better performance for adding objects later with addObject and addObjects.

By providing upfront information of how many objects will be required, the engine is able to batch-allocate the required memory rather than conservatively grow the memory in small steps.

Experimental: This API might change in upcoming versions.

.reset() ⇒ void 

Reset the scene.

This method deletes all used and allocated objects, and components.

.setLoadingProgress(percentage: number) ⇒ void 

Update the loading screen progress bar.