Class Viewer

The xeokit SDK's Browser-based model viewer.

See @xeokit/viewer for usage.

Hierarchy

  • Component
    • Viewer

Constructors

constructor

Properties

capabilities destroyed dirty id numViews renderer scene startTime viewList views

Methods

clean cleanIfDirty createView destroy setDirty tickify

Events

onDestroyed onLog onTick onViewCreated onViewDestroyed

Constructors

constructor

  • new Viewer(params): Viewer

  • Creates a Viewer.

    Parameters

    • params: {
          id?: string;
          origin?: FloatArrayParam;
          renderer: Renderer;
          scale?: number;
          scene?: Scene;
          units?: string;
      }

      Viewer configuration.

      • Optional id?: string

        ID for this Viewer, automatically generated by default.

      • Optional origin?: FloatArrayParam

        The Real-space 3D origin, in current measurement units, at which the World-space coordinate origin [0,0,0] sits.

      • renderer: Renderer

        Manages rendering of models.

      • Optional scale?: number

        The number of Real-space units in each World-space coordinate system unit.

      • Optional scene?: Scene

        Contains model representations.

      • Optional units?: string

        The measurement unit type. Accepted values are "meters", "metres", , "centimeters", "centimetres", "millimeters", "millimetres", "yards", "feet" and "inches".

    Returns Viewer

    Throws

    SDKError The given Renderer is already attached to some other Viewer.

Properties

Readonly capabilities

capabilities: Capabilities

Indicates the capabilities of this Viewer.

Readonly destroyed

destroyed: boolean

True once this Viewer has been destroyed.

Don't use this Viewer if this is false.

Protected dirty

dirty: boolean

Readonly id

id: string

ID of this Viewer.

numViews

numViews: number

The number of Views belonging to this Viewer.

The maxiumum number of Views that a Viewer can have is determined by the Renderer implementation it was configured with, which is provided in Capabilities.maxViews.

Readonly renderer

renderer: Renderer

The Renderer that this Viewer was configured with via the Viewer's constructor. Th Renderer is only used by the Viewer, and is not intended to for users to use directly. It's provided via this property in order to verify which Render implementation the Viewer is configured with.

Readonly scene

scene: Scene

The Viewer's scene representation.

The SceneModels is the container of SceneModels and SceneObjects, which contain the geometry and materials for models currently loaded in the Viewer.

Readonly startTime

startTime: number = ...

The time that this Viewer was created. This is the number of milliseconds since the epoch, which is defined as the midnight at the beginning of January 1, 1970, UTC.

Readonly Internal viewList

viewList: View[]

List of all the Views in this Viewer.

Each @xeokit/viewer!View is an independently configurable view of the Viewer's models, with its own canvas, camera position, section planes, lights, and object visual states.

Readonly views

views: {
    [key: string]: View;
}

Map of all the Views in this Viewer.

Each @xeokit/viewer!View is mapped here against View.id.

Each @xeokit/viewer!View is an independently configurable view of the Viewer's models, with its own canvas, camera position, section planes, lights, and object visual states.

Type declaration

Methods

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

createView

  • createView(params): SDKError | View

  • Creates a new @xeokit/viewer!View within this Viewer.

    • The maximum number of views you're allowed to create is provided in Capabilities.maxViews. This will be determined by the Renderer implementation the Viewer is configured with.
    • To destroy the View after use, call View.destroy.
    • You must add a View to the Viewer before you can create or load content into the Viewer's Viewer.

    Usage

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

    if (view1 instanceof SDKError) {
         console.log(view1.message);
    } else {
         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];

         //...
    }

    Parameters

    Returns SDKError | View

    View

    • On success.

destroy

Protected setDirty

  • setDirty(): void

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

    Returns void

tickify

  • tickify(cb): any

  • This method will "tickify" the provided cb function.

    This means, the function will be wrapped so:

    • it runs time-aligned to scene ticks
    • it runs maximum once per scene-tick

    Parameters

    • cb: any

      The function to tickify

    Returns any

Events

onDestroyed

onDestroyed: EventEmitter<Component, null>

Emits an event when the Component has been destroyed.

Readonly onLog

onLog: EventEmitter<Viewer, string>

Emits an event each time a message is logged.

Readonly onTick

onTick: EventEmitter<Viewer, TickParams>

Emits an event each time a Viewer "tick" occurs (~10-60 times per second).

Readonly onViewCreated

onViewCreated: EventEmitter<Viewer, View>

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

Readonly onViewDestroyed

onViewDestroyed: EventEmitter<Viewer, View>

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

Settings

Member Visibility

Theme

On This Page

constructorcapabilitiesdestroyeddirtyidnumViewsrendererscenestartTimeviewListviewscleancleanIfDirtycreateViewdestroysetDirtytickifyonDestroyedonLogonTickonViewCreatedonViewDestroyed