Class ViewLayer

A layer of ViewObjects within a View.

ViewLayers allow users to group and segregate ViewObjects based on their roles or aspects in a scene, simplifying interaction and focusing operations on specific object groups.

ViewLayers group ViewObjects based on the layerId of the corresponding SceneObject.

See @xeokit/sdk/viewer for more info.


Automatic vs. Manual ViewLayers

  • Automatic ViewLayers - Created automatically on-the-fly as SceneObjects with layerIds are created and destroyed. Ensures a dynamic and self-managing system where layers appear and disappear based on the existence of relevant objects.

  • Manual ViewLayers - Requires user's manual creation and destruction of ViewLayers. ViewLayers persist even after objects are destroyed.


Automatic ViewLayers

ViewLayers are useful for separating different types of objects, such as models and environment objects. A common use case is to create separate layers for models and environment objects like the ground or skybox. This allows focusing on model objects for operations like highlighting, hiding, or interacting, without affecting background objects.

Create a Viewer:

import {Viewer} from "@xeokit/sdk/viewer";

const myViewer = new Viewer({
     id: "myViewer"
});

Create a View, with autoLayers set true:

const view1 = myViewer.createView({
     id: "myView",
     elementId: "myView1",
     autoLayers: true // <<----------- Default
});

view1.camera.eye = [-3.933, 2.855, 27.018];
view1.camera.look = [4.400, 3.724, 8.899];
view1.camera.up = [-0.018, 0.999, 0.039];

Next, create a SceneModel with four SceneObjects. The first two SceneObjects will represent a skybox and a ground plane, while the other two will represent a building foundation and walls.

The skybox and ground plane SceneObjects will assign their ViewObjects to the "environment" ViewLayer, and the building foundation and walls will assign theirs to the "model" ViewLayer.

const sceneModel = myViewer.scene.createModel({
     id: "myModel"
});

// (calls to SceneModel createGeometry and
// createLayerMesh omitted for brevity)

sceneModel.createObject({
     id: "ground",
     meshIds: ["groundMesh}],
     layerId: "environment"
});

sceneModel.createObject({
     id: "skyBox",
     meshIds: ["skyBoxMesh}],
     layerId: "environment"
});

sceneModel.createObject({
     id: "houseFoundation",
     meshIds: ["myMesh}],
     layerId: "model"
});

sceneModel.createObject({
     id: "houseWalls",
     meshIds: ["myMesh}],
     layerId: "model"
});

sceneModel.build();

Our View now has an "environment" ViewLayer, which contains ViewObjects for the skybox and ground plane, and a "model" ViewLayer, which contains ViewObjects for the house foundation and walls.

We can now focus our updates on the ViewObjects in each ViewLayer.

const environmentLayer = view1.layers["environment"];
environmentLayer.setObjectsVisible(environmentLayer.objectIds, true);

const modelLayer = view1.layers["model"];
modelLayer.setObjectsSelected(modelLayer.objectIds, true);

Manual ViewLayers

Create a Viewer:

import {Viewer} from "@xeokit/sdk/viewer";

const myViewer = new Viewer({
     id: "myViewer"
});

Create a View with autoLayers set false.

This will prevent the View from creating ViewLayers automatically.

const view1 = myViewer.createView({
     id: "myView",
     elementId: "myCanvas1",
     autoLayers: false // <<----------- Override default
});

view1.camera.eye = [-3.933, 2.855, 27.018];
view1.camera.look = [4.400, 3.724, 8.899];
view1.camera.up = [-0.018, 0.999, 0.039];

Create a "model" ViewLayer, but this time don't create an "environment" ViewLayer:

const modelViewLayer = view1.createLayer({
    id: "model",
    visible: true
});

As in the previous example, we'll now create a SceneModel containing two model SceneObjects representing a building foundation and walls, along with two environmental ViewerObjects representing a skybox and ground plane.

const sceneModel = myViewer.scene.createModel({
     id: "myModel"
});

// (calls to SceneModel createGeometry and
// createLayerMesh omitted for brevity)

sceneModel.createObject({
     id: "ground",
     meshIds: ["groundMesh}],
     layerId: "environment"
});

sceneModel.createObject({
     id: "skyBox",
     meshIds: ["skyBoxMesh}],
     layerId: "environment"
});

sceneModel.createObject({
     id: "houseFoundation",
     meshIds: ["myMesh}],
     layerId: "model"
});

sceneModel.createObject({
     id: "houseWalls",
     meshIds: ["myMesh}],
     layerId: "model"
});

sceneModel.build();

This time, however, our View has created ViewObjects only for the "model" SceneObjects, while ignoring the "environment" SceneObjects.

From this View's perspective, the "environment" SceneObjects don't exist because no "environment" ViewLayer exists.

const modelLayer = view1.layers["model"];
modelLayer.setObjectsVisible(modelLayer.objectIds, true);

Loading a model into a ViewLayer

Create a Viewer:

import {Viewer} from "@xeokit/sdk/viewer";
import {loadDotBIM} from "@xeokit/sdk/dotbim";

const myViewer = new Viewer({
     id: "myViewer"
});

Create a View, with autoLayers set true:


const view1 = myViewer.createView({
     id: "myView",
     elementId: "myView1",
     autoLayers: true // <<----------- Default
});

view1.camera.eye = [-3.933, 2.855, 27.018];
view1.camera.look = [4.400, 3.724, 8.899];
view1.camera.up = [-0.018, 0.999, 0.039];

Create a SceneModel, with layerId "environmental", and create some environmental objects in it.

const environentSceneModel = myViewer.scene.createModel({
     id: "myModel",
     layerId: "environment"
});

//...

environentSceneModel.createObject({
     id: "ground",
     meshIds: ["groundMesh}]
});

environentSceneModel.createObject({
     id: "skyBox",
     meshIds: ["skyBoxMesh}]
});

environentSceneModel.build();

Create a second SceneModel, with layerId "model", and load a BIM model into it.

const modelSceneModel = myViewer.scene.createModel({
     id: "myModel2",
     layerId: "model",
});

fetch(`model.bim`)
    .then(response => {
        response
            .json()
            .then(fileData => {
                loadDotBIM({
                    fileData,
                    modelSceneModel
                })
                .then(()=>{
                    modelSceneModel.build();
                })
                .catch(err => {
                    console.error(err);
                });
             }).catch(err => {
                 console.error(err);
             });
    }).catch(err => {
        console.error(err);
    });

All our model objects are now in the "model" ViewLayer, and all our environmental objects are in the "environment" ViewLayer.

Let's show all the model objects, and hide all the environmental objects:

const modelLayer = view1.layers["model"];
modelLayer.setObjectsVisible(modelLayer.objectIds, true);

const environmentLayer = view1.layers["environmentLayer"];
environmentLayer.setObjectsVisible(environmentLayer.objectIds, false);

Hierarchy (View Summary)

Constructors

constructor

Properties

colorizedObjects destroyed dirty gammaOutput highlightedObjects id objects opacityObjects selectedObjects view viewer visibleObjects xrayedObjects

Accessors

colorizedObjectIds gammaFactor highlightedObjectIds numColorizedObjects numHighlightedObjects numObjects numOpacityObjects numSelectedObjects numVisibleObjects numXRayedObjects objectIds opacityObjectIds renderModes selectedObjectIds visibleObjectIds xrayedObjectIds

Methods

clean cleanIfDirty destroy error fromParams log setDirty setObjectsClippable setObjectsCollidable setObjectsColorized setObjectsCulled setObjectsHighlighted setObjectsOpacity setObjectsPickable setObjectsSelected setObjectsVisible setObjectsXRayed toParams warn withObjects

Events

onDestroyed onObjectCreated onObjectDestroyed onObjectVisibility

Constructors

constructor

Properties

ReadonlycolorizedObjects

colorizedObjects: { [key: string]: ViewObject }

Map of currently colorized ViewObjects in this ViewLayer.

Each ViewObject is mapped here by ViewObject.id.

destroyed

destroyed: boolean

True once this Component has been destroyed.

Don't use this Component if this is true.

Protecteddirty

dirty: boolean

gammaOutput

gammaOutput: boolean

ReadonlyhighlightedObjects

highlightedObjects: { [key: string]: ViewObject }

Map of currently highlighted ViewObjects in this ViewLayer.

A ViewObject is highlighted when ViewObject.highlighted is true.

Each ViewObject is mapped here by ViewObject.id.

Readonlyid

id: string

ID of this ViewLayer, unique within the View.

This ViewLayer is mapped by this ID in View.layers.

Readonlyobjects

objects: { [key: string]: ViewObject }

Map of the all ViewObjects in this ViewLayer.

These are the ViewObjects for which SceneObject.layerId has the same value as the ViewLayer.id.

Each ViewObject is mapped here by ViewObject.id.

The ViewLayer automatically ensures that there is a ViewObject here for each scene!RendererObject in the Viewer

ReadonlyopacityObjects

opacityObjects: { [key: string]: ViewObject }

Map of ViewObjects in this ViewLayer whose opacity has been updated.

Each ViewObject is mapped here by ViewObject.id.

ReadonlyselectedObjects

selectedObjects: { [key: string]: ViewObject }

Map of currently selected ViewObjects in this ViewLayer.

A ViewObject is selected when ViewObject.selected is true.

Each ViewObject is mapped here by ViewObject.id.

Readonlyview

view: View

The View to which this ViewLayer belongs.

Readonlyviewer

viewer: Viewer

The Viewer to which this ViewLayer belongs.

ReadonlyvisibleObjects

visibleObjects: { [key: string]: ViewObject }

Map of the currently visible ViewObjects in this ViewLayer.

A ViewObject is visible when ViewObject.visible is true.

Each ViewObject is mapped here by ViewObject.id.

ReadonlyxrayedObjects

xrayedObjects: { [key: string]: ViewObject }

Map of currently x-rayed ViewObjects in this ViewLayer.

A ViewObject is x-rayed when ViewObject.xrayed is true.

Each ViewObject is mapped here by ViewObject.id.

Accessors

colorizedObjectIds

gammaFactor

highlightedObjectIds

numColorizedObjects

numHighlightedObjects

numObjects

numOpacityObjects

numSelectedObjects

numVisibleObjects

numXRayedObjects

objectIds

opacityObjectIds

renderModes

selectedObjectIds

visibleObjectIds

xrayedObjectIds

Methods

Protectedclean

ProtectedcleanIfDirty

destroy

Protectederror

  • error(message: string): void
  • Protected

    Logs an error for this component to the JavaScript console.

    The console message will have this format: [ERROR] [<component type> =<component id>: <message>

    Parameters

    • message: string

      The error message to log

    Returns void

fromParams

Protectedlog

  • log(message: string): void
  • Protected

    Logs a message for this component.

    The message will have this format: [LOG] [<component type> <component id>: <message>

    Parameters

    • message: string

      The message to log

    Returns void

ProtectedsetDirty

setObjectsClippable

  • setObjectsClippable(objectIds: string[], clippable: boolean): boolean

  • Sets the clippability of the given ViewObjects in this ViewLayer.

    Parameters

    • objectIds: string[]

      Array of ViewObject.id values.

    • clippable: boolean

      Whether or not to set clippable.

    Returns boolean

    True if any ViewObjects were updated, else false if all updates were redundant and not applied.

setObjectsCollidable

setObjectsColorized

setObjectsCulled

setObjectsHighlighted

setObjectsOpacity

setObjectsPickable

  • setObjectsPickable(objectIds: string[], pickable: boolean): boolean

  • Sets the pickability of the given ViewObjects in this ViewLayer.

    Parameters

    • objectIds: string[]

      Array of ViewObject.id values.

    • pickable: boolean

      Whether or not to set pickable.

    Returns boolean

    True if any ViewObjects were updated, else false if all updates were redundant and not applied.

setObjectsSelected

setObjectsVisible

setObjectsXRayed

toParams

Protectedwarn

  • warn(message: string): void
  • Protected

    Logs a warning for this component to the JavaScript console.

    The console message will have this format: [WARN] [<component type> =<component id>: <message>

    Parameters

    • message: string

      The warning message to log

    Returns void

withObjects

Events

onDestroyed

onDestroyed: EventEmitter<Component, null>

Emits an event when the Component has been destroyed.

ReadonlyonObjectCreated

onObjectCreated: EventEmitter<ViewLayer, ViewObject>

Emits an event each time a ViewObject is created in this ViewLayer.

ReadonlyonObjectDestroyed

onObjectDestroyed: EventEmitter<ViewLayer, ViewObject>

Emits an event each time a ViewObject is destroyed in this ViewLayer.

ReadonlyonObjectVisibility

onObjectVisibility: EventEmitter<ViewLayer, ViewObject>

Emits an event each time the visibility of a ViewObject changes.

ViewObjects are shown and hidden with View.setObjectsVisible, ViewLayer.setObjectsVisible or ViewObject.visible.

Settings

Member Visibility

On This Page

Automatic vs. Manual ViewLayersAutomatic ViewLayersManual ViewLayersLoading a model into a ViewLayer
Constructors
Properties
Accessors
Methods
Events