Class View

An independent view within a Viewer, with its own Canvas, Camera and object visual states.

See @xeokit/viewer for usage.

Overview

A View is an independently-configurable view of the objects in a Viewer, with its own HTML canvas, camera, light sources, object states, slicing planes etc.

A View automatically contains a ViewObject for each SceneObject in the Viewer's Scene. Each ViewObject functions as a sort of proxy through which we control the appearance of its SceneObject in the View. (show/hide/highlight etc.) within the View.

Using Views, we can essentially have multiple canvases viewing the same model, each canvas perhaps showing a different subset of the objects, with different visual effects, camera position etc.

Quickstart

Examples

Create a view in a given canvas, with three objects visible and a couple of object X-rayed (rendered translucent):

const view1 = myViewer.createView({
     id: "myView",
     elementId: "myView1"
});

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];

view1.setObjectsVisible(["myObject1", "myObject2", "myObject3", ...], true);
view1.setObjectsXRayed(["myObject1", "myObject", ...], true);

Create a second view, using a different canvas, that shows two objects visible, with one of them highlighted:

const view2 = myViewer.createView({
     id: "myView2",
     elementId: "myView2"
});

view2.camera.eye = [-1.4, 1.5, 15.8];
view2.camera.look = [4.0, 3.7, 1.8];
view2.camera.up = [0.0, 0.9, 0.0];

view2.setObjectsVisible(["myObject1", "myObject3", ...], true);
view2.setObjectsHighlighted(["myObject3", ...], true);

Hierarchy

  • Component
    • View

Properties

autoLayers boundary camera colorizedObjects destroyed dirty edges gammaOutput highlightMaterial highlightedObjects htmlElement id layers lights lightsList linesMaterial metrics objects opacityObjects pointsMaterial resolutionScale sao sectionPlanes sectionPlanesList selectedMaterial selectedObjects texturing transparent viewId viewer visibleObjects xrayMaterial xrayedObjects

Accessors

aabb backgroundColor backgroundColorFromAmbientLight colorizedObjectIds gammaFactor highlightedObjectIds numColorizedObjects numHighlightedObjects numObjects numOpacityObjects numSelectedObjects numVisibleObjects numXRayedObjects objectIds opacityObjectIds qualityRender renderMode selectedObjectIds visibleObjectIds xrayedObjectIds

Methods

beginSnapshot clean cleanIfDirty clearLights clearSectionPlanes createLayer createSectionPlane destroy error getNumAllocatedSectionPlanes getSnapshot log pick setDirty setObjectsClippable setObjectsCollidable setObjectsColorized setObjectsCulled setObjectsHighlighted setObjectsOpacity setObjectsPickable setObjectsSelected setObjectsVisible setObjectsXRayed setRenderMode warn withObjects

Events

onBoundary onDestroyed onLayerCreated onLayerDestroyed onObjectCreated onObjectDestroyed onObjectVisibility onObjectXRayed onSectionPlaneCreated onSectionPlaneDestroyed onSnapshotFinished onSnapshotStarted

Properties

Readonly autoLayers

autoLayers: boolean

Whether the View will automatically create ViewLayers on-demand as RendererObject | ViewerObjects are created.

When true (default), the View will automatically create ViewLayers as needed for each new RendererObject.layerId encountered, including a "default" ViewLayer for ViewerObjects that have no layerId. This default setting therefore ensures that a ViewObject is created in the View for every SceneObject that is created.

If you set this false, however, then the View will only create ViewObjects for RendererObject | ViewerObjects that have a RendererObject.layerId that matches the ID of a @xeokit/viewer!ViewLayer that you have explicitly created previously with View.createLayer.

Setting this parameter false enables Views to contain only the ViewObjects that they actually need to show, i.e. to represent only ViewerObjects that they need to view. This enables a View to avoid wastefully creating and maintaining ViewObjects for ViewerObjects that it never needs to show.

Readonly boundary

boundary: number[]

Boundary of the canvas in absolute browser window coordinates. Format is [xmin, ymin, xwidth, ywidth].

Readonly camera

camera: Camera

Manages the Camera for this View.

Readonly colorizedObjects

colorizedObjects: {
    [key: string]: ViewObject;
}

Map of currently colorized ViewObjects in this View.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

destroyed

destroyed: boolean

True once this Component has been destroyed.

Don't use this Component if this is true.

Protected dirty

dirty: boolean

Readonly edges

edges: Edges

Configures the appearance of edges belonging to @xeokit/viewer!ViewObject in this View.

gammaOutput

gammaOutput: boolean

Readonly highlightMaterial

highlightMaterial: EmphasisMaterial

Configures the highlighted appearance of ViewObjects in this View.

Readonly highlightedObjects

highlightedObjects: {
    [key: string]: ViewObject;
}

Map of currently highlighted ViewObjects in this View.

A ViewObject is highlighted when @xeokit/viewer!ViewObject.highlighted is true.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

htmlElement

htmlElement: HTMLElement

The HTML canvas.

id

id: string

Unique ID of this Component.

Readonly layers

layers: {
    [key: string]: ViewLayer;
}

Map of the all @xeokit/viewer!ViewLayers in this View.

Each @xeokit/viewer!ViewLayer is mapped here by @xeokit/viewer!ViewLayer.id.

Type declaration

Readonly lights

lights: {
    [key: string]: AmbientLight | PointLight | DirLight;
}

Map of light sources in this View.

Type declaration

Readonly lightsList

lightsList: (PointLight | DirLight | AmbientLight)[] = []

List of light sources in this View.

Readonly linesMaterial

linesMaterial: LinesMaterial

Configures the appearance of lines belonging to ViewObjects in this View.

Readonly metrics

metrics: Metrics

Manages measurement units, origin and scale for this View.

Readonly objects

objects: {
    [key: string]: ViewObject;
}

Map of the all ViewObjects in this View.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

The View automatically ensures that there is a @xeokit/viewer!ViewObject here for each RendererObject in the Viewer

Type declaration

Readonly opacityObjects

opacityObjects: {
    [key: string]: ViewObject;
}

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

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

Readonly pointsMaterial

pointsMaterial: PointsMaterial

Configures the appearance of point primitives belonging to ViewObjects in this View .

Readonly resolutionScale

resolutionScale: ResolutionScale

Configures resolution scaling for this View.

Readonly sao

sao: SAO

Configures Scalable Ambient Obscurance (SAO) for this View.

Readonly sectionPlanes

sectionPlanes: {
    [key: string]: SectionPlane;
}

Map of SectionPlanes in this View.

Each SectionPlane is mapped here by SectionPlane.id.

Type declaration

Readonly sectionPlanesList

sectionPlanesList: SectionPlane[] = []

List of SectionPlanes in this View.

Readonly selectedMaterial

selectedMaterial: EmphasisMaterial

Configures the appearance of ViewObjects in this View.

Readonly selectedObjects

selectedObjects: {
    [key: string]: ViewObject;
}

Map of currently selected ViewObjects in this View.

A ViewObject is selected when @xeokit/viewer!ViewObject.selected is true.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

Readonly texturing

texturing: Texturing

Configures when textures are rendered for this View.

Readonly transparent

transparent: boolean

Indicates if this View is transparent.

viewId

viewId: string

ID of this View, unique within the Viewer.

Readonly viewer

viewer: Viewer

The Viewer to which this View belongs.

Readonly visibleObjects

visibleObjects: {
    [key: string]: ViewObject;
}

Map of the currently visible ViewObjects in this View.

A ViewObject is visible when @xeokit/viewer!ViewObject.visible is true.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

Readonly xrayMaterial

xrayMaterial: EmphasisMaterial

Configures the X-rayed appearance of ViewObjects in this View.

Readonly xrayedObjects

xrayedObjects: {
    [key: string]: ViewObject;
}

Map of currently x-rayed ViewObjects in this View.

A ViewObject is x-rayed when @xeokit/viewer!ViewObject.xrayed is true.

Each @xeokit/viewer!ViewObject is mapped here by @xeokit/viewer!ViewObject.id.

Type declaration

Accessors

aabb

backgroundColor

  • get backgroundColor(): FloatArrayParam

  • Gets the canvas clear color.

    Default value is [1, 1, 1].

    Returns FloatArrayParam

  • set backgroundColor(value): void

  • Sets the canvas clear color.

    Default value is [1, 1, 1].

    Parameters

    • value: FloatArrayParam

    Returns void

backgroundColorFromAmbientLight

  • get backgroundColorFromAmbientLight(): boolean

  • Gets whether the canvas clear color will be derived from AmbientLight or View#backgroundColor when View#transparent is true.

    When View#transparent is true and this is true, then the canvas clear color will be taken from the ambient light color.

    When View#transparent is true and this is false, then the canvas clear color will be taken from View#backgroundColor.

    Default value is true.

    Returns boolean

  • set backgroundColorFromAmbientLight(backgroundColorFromAmbientLight): void

  • Sets if the canvas background color is derived from an AmbientLight.

    This only has effect when the canvas is not transparent. When not enabled, the background color will be the canvas element's HTML/CSS background color.

    Default value is true.

    Parameters

    • backgroundColorFromAmbientLight: boolean

    Returns void

colorizedObjectIds

gammaFactor

highlightedObjectIds

numColorizedObjects

numHighlightedObjects

numObjects

numOpacityObjects

numSelectedObjects

numVisibleObjects

numXRayedObjects

objectIds

opacityObjectIds

qualityRender

  • get qualityRender(): boolean

  • Gets whether quality rendering is enabled for this View.

    Default is false.

    Returns boolean

  • set qualityRender(value): void

  • Sets whether quality rendering is enabled for this View.

    Default is false.

    Parameters

    • value: boolean

    Returns void

renderMode

  • get renderMode(): number

  • Gets which rendering mode this View is in.

    Supported rendering modes are:

    • FastRender - Fast rendering mode for smooth interactivity.
    • QualityRender - Quality rendering mode for maximum image fidelity.

    Default value is QualityRender.

    Returns number

selectedObjectIds

visibleObjectIds

xrayedObjectIds

Methods

beginSnapshot

  • beginSnapshot(): void

  • Enter snapshot mode.

    Switches rendering to a hidden snapshot canvas.

    Exit snapshot mode using Viewer#endSnapshot.

    Returns void

Protected clean

  • clean(): void

  • Forces this component to action any deferred state updates.

    Returns void

Protected cleanIfDirty

  • cleanIfDirty(): void

  • Gives this component an opportunity to action any defered state updates.

    Returns void

clearLights

clearSectionPlanes

createLayer

createSectionPlane

destroy

  • destroy(): void

  • Destroys this View.

    Causes Viewer to fire a "viewDestroyed" event.

    Returns void

Protected error

  • error(message): 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

getNumAllocatedSectionPlanes

getSnapshot

Protected log

  • log(message): 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

pick

  • pick(pickParams, pickResult?): PickResult

  • Attempts to pick a ViewObject in this View.

    Parameters

    • pickParams: PickParams

      Picking parameters.

    • Optional pickResult: PickResult

      Picking results, when caller wants to manage them externally.

    Returns PickResult

    @xeokit/viewer!PickResult

    • Picking attempt completed.

    Throws

    SDKError

    • No View is currently attached to this Renderer.
    • Can't find a View attached to this Renderer with the given handle.
    • Illegal picking parameters given.

Protected setDirty

  • setDirty(): void

  • Flags this component as having a defered state updates it needs to perform.

    Returns void

setObjectsClippable

setObjectsCollidable

setObjectsColorized

setObjectsCulled

setObjectsHighlighted

setObjectsOpacity

setObjectsPickable

setObjectsSelected

setObjectsVisible

setObjectsXRayed

setRenderMode

  • setRenderMode(renderMode): void | SDKError

  • Sets which rendering mode this View is in.

    Supported rendering modes are:

    • FastRender - Fast rendering mode for smooth interactivity.
    • QualityRender - Quality rendering mode for maximum image fidelity.

    Default value is QualityRender.

    Parameters

    • renderMode: number

      The rendering mode

    Returns void | SDKError

    SDKError

    • Rendering mode not supported.

Protected warn

  • warn(message): 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

Readonly onBoundary

onBoundary: EventEmitter<View, IntArrayParam>

Emits an event each time the canvas boundary changes.

onDestroyed

onDestroyed: EventEmitter<Component, null>

Emits an event when the Component has been destroyed.

Readonly onLayerCreated

onLayerCreated: EventEmitter<View, ViewLayer>

Emits an event each time a @xeokit/viewer!ViewLayer is created in this View.

Layers are created explicitly with View.createLayer, or implicitly with View.createModel and CreateModelParams.layerId.

Readonly onLayerDestroyed

onLayerDestroyed: EventEmitter<View, ViewLayer>

Emits an event each time a @xeokit/viewer!ViewLayer in this View is destroyed.

ViewLayers are destroyed explicitly with @xeokit/viewer!ViewLayer.destroy, or implicitly when they become empty and View.autoLayers is false.

Readonly onObjectCreated

onObjectCreated: EventEmitter<View, ViewObject>

Emits an event each time a @xeokit/viewer!ViewObject is created in this View.

Readonly onObjectDestroyed

onObjectDestroyed: EventEmitter<View, ViewObject>

Emits an event each time a @xeokit/viewer!ViewObject is destroyed in this View.

Readonly onObjectVisibility

onObjectVisibility: EventEmitter<View, ViewObject>

Emits an event each time the visibility of a @xeokit/viewer!ViewObject changes in this View.

ViewObjects are shown and hidden with View.setObjectsVisible, @xeokit/viewer!ViewLayer.setObjectsVisible or @xeokit/viewer!ViewObject.visible.

Readonly onObjectXRayed

onObjectXRayed: EventEmitter<View, ViewObject>

Emits an event each time the X-ray state of a @xeokit/viewer!ViewObject changes in this View.

ViewObjects are X-rayed with View.setObjectsXRayed, @xeokit/viewer!ViewLayer.setObjectsXRayed or @xeokit/viewer!ViewObject.xrayed.

Readonly onSectionPlaneCreated

onSectionPlaneCreated: EventEmitter<View, SectionPlane>

Emits an event each time a SectionPlane is created in this View.

Readonly onSectionPlaneDestroyed

onSectionPlaneDestroyed: EventEmitter<View, SectionPlane>

Emits an event each time a SectionPlane in this View is destroyed.

Readonly onSnapshotFinished

onSnapshotFinished: EventEmitter<View, SnapshotFinishedEvent>

Emits an event each time a snapshot is completed with View.getSnapshot.

Readonly onSnapshotStarted

onSnapshotStarted: EventEmitter<View, SnapshotStartedEvent>

Emits an event each time a snapshot is initiated with View.getSnapshot.

Settings

Member Visibility

Theme

On This Page

autoLayersboundarycameracolorizedObjectsdestroyeddirtyedgesgammaOutputhighlightMaterialhighlightedObjectshtmlElementidlayerslightslightsListlinesMaterialmetricsobjectsopacityObjectspointsMaterialresolutionScalesaosectionPlanessectionPlanesListselectedMaterialselectedObjectstexturingtransparentviewIdviewervisibleObjectsxrayMaterialxrayedObjectsaabbbackgroundColorbackgroundColorFromAmbientLightcolorizedObjectIdsgammaFactorhighlightedObjectIdsnumColorizedObjectsnumHighlightedObjectsnumObjectsnumOpacityObjectsnumSelectedObjectsnumVisibleObjectsnumXRayedObjectsobjectIdsopacityObjectIdsqualityRenderrenderModeselectedObjectIdsvisibleObjectIdsxrayedObjectIdsbeginSnapshotcleancleanIfDirtyclearLightsclearSectionPlanescreateLayercreateSectionPlanedestroyerrorgetNumAllocatedSectionPlanesgetSnapshotlogpicksetDirtysetObjectsClippablesetObjectsCollidablesetObjectsColorizedsetObjectsCulledsetObjectsHighlightedsetObjectsOpacitysetObjectsPickablesetObjectsSelectedsetObjectsVisiblesetObjectsXRayedsetRenderModewarnwithObjectsonBoundaryonDestroyedonLayerCreatedonLayerDestroyedonObjectCreatedonObjectDestroyedonObjectVisibilityonObjectXRayedonSectionPlaneCreatedonSectionPlaneDestroyedonSnapshotFinishedonSnapshotStarted