The xbim 3D viewer component enabling *.wexbim files to be viewed with WebGL.

  • A minimal example of using the viewer would be
  <canvas id="viewer" width="500" height="300"></canvas>
<script type="text/javascript">
var viewer = new Viewer('viewer');
viewer.on('loaded', () => {
viewer.show(ViewType.DEFAULT);
});
viewer.load('../data/SampleHouse.wexbim');
viewer.start();
</script>

Hierarchy

  • Viewer

Accessors

Methods

Properties

Constructors

Accessors

  • get adaptivePerformanceOn(): boolean
  • The viewer is watching the performance based on the FPS. When performance drops down, it can reduce amount of geometry to be rendered. This is usefull for some navigation and animations but might not be convenient in all scenarios like in a wals mode. This property can be used to switch the addaptive performance on and off.

    Returns boolean

  • set adaptivePerformanceOn(value: boolean): void
  • Parameters

    • value: boolean

    Returns void

  • get adjustments(): CameraAdjustment
  • This can be used to adjust ortgographic and perspective camera properties to be close. Particularly useful when restoring orthographic view with displaced camera.

    Returns CameraAdjustment

  • get background(): number[]
  • Array of four integers between 0 and 255 representing RGBA colour components. This defines background colour of the viewer. You can change this value at any time with instant effect.

    Member

    Viewer#background

    Returns number[]

  • set background(value: number[]): void
  • Parameters

    • value: number[]

    Returns void

  • get brightness(): number
  • Allows to adjust brightness of the view

    Returns number

  • set brightness(value: number): void
  • Parameters

    • value: number

    Returns void

  • get contrast(): number
  • Allows to adjust contrast of the view

    Returns number

  • set contrast(value: number): void
  • Parameters

    • value: number

    Returns void

  • get gamma(): number
  • Allows to adjust gamma of the view

    Returns number

  • set gamma(value: number): void
  • Parameters

    • value: number

    Returns void

  • get height(): number
  • Returns number

  • set height(value: number): void
  • Parameters

    • value: number

    Returns void

  • get highlightingColour(): number[]
  • Array of four integers between 0 and 255 representing RGBA colour components. This defines colour for highlighted elements. You can change this value at any time with instant effect.

    Member

    Viewer#highlightingColour

    Returns number[]

  • set highlightingColour(value: number[]): void
  • Parameters

    • value: number[]

    Returns void

  • get hoverPickColour(): number[]
  • Array of four integers between 0 and 255 representing RGBA colour components. This defines colour for elements when hovered over. You can change this value at any time with instant effect.

    Member

    Viewer#hoverPickColour

    Returns number[]

  • set hoverPickColour(value: number[]): void
  • Parameters

    • value: number[]

    Returns void

  • get hoverPickEnabled(): boolean
  • Determines whether the viewer raised 'hoverpick' events when the mouse hovers over an element. When enabled the currently hovered item will be be highlighted. The 'hoverpicked' event can be used to provide tooltips/context menus etc.

    Returns boolean

  • set hoverPickEnabled(value: boolean): void
  • Parameters

    • value: boolean

    Returns void

  • get isRunning(): boolean
  • Indicates if the viewer is running the rendering loop

    Returns boolean

  • get mvMatrix(): mat4
  • World matrix

    Member

    Viewer#mvMatrix

    Returns mat4

  • set mvMatrix(value: mat4): void
  • Parameters

    • value: mat4

    Returns void

  • get mvMatrixAge(): number
  • Returns number of milliseconds for which Model View Matris hasn't been changed. This can be used for optimisations and actions to happen after vertain amount of time after the last movement of the model.

    Returns number

  • get pMatrix(): mat4
  • Camera matrix (perspective or orthogonal)

    Member

    Viewer#pMatrix

    Returns mat4

  • set pMatrix(value: mat4): void
  • Parameters

    • value: mat4

    Returns void

  • get unitsInMeter(): number
  • Returns number of units in active model (1000 is model is in mm)

    Member

    Viewer#unitsInMeter

    Returns number

  • get width(): number
  • Returns number

  • set width(value: number): void
  • Parameters

    • value: number

    Returns void

  • get xrayColour(): number[]
  • Array of four integers between 0 and 255 representing RGBA colour components. This defines colour for xray mode rendering. You can change this value at any time with instant effect.

    Member

    Viewer#xrayColour

    Returns number[]

  • set xrayColour(value: number[]): void
  • Parameters

    • value: number[]

    Returns void

Methods

  • Adds plugin to the viewer. Plugins can implement certain methods which get called in certain moments in time like before draw, after draw etc. This makes it possible to implement functionality tightly integrated into Viewer like navigation cube or others.

    Function

    Viewer#addPlugin

    Parameters

    Returns void

  • You can use this function to change state of products in the model. State has to have one of values from State enumeration. Target is either enumeration from ProductType or array of product IDs. If you specify type it will effect all elements of the type.

    Function

    Viewer#setState

    Parameters

    • state: State

      One of State enumeration values.

    • target: number | number[]

      Target of the change. It can either be array of product IDs or product type from ProductType.

    • Optional modelId: number

      Id of the model

    Returns void

  • This is a static function which should always be called before Viewer is instantiated. It will check all prerequisites of the viewer and will report all issues. If CheckResult.errors contains any messages viewer won't work. If CheckResult.warnings contain any messages it will work but some functions may be restricted or may not work or it may have poor performance.

    Function

    Viewer.check

    Returns

    Returns CheckResult

  • Clears all highlighting in all visible models

    Returns void

  • Use this method to clip the model with A plane. Use unclip() method to unset clipping plane.

    Function

    Viewer#clip

    Parameters

    • point: number[]

      point in clipping plane

    • normal: number[]

      normal pointing to the half space which will be hidden

    Returns void

  • Use this function to define up to 224 optional styles which you can use to change appearance of products and types if you pass the index specified in this function to setState() function.

    Function

    Viewer#defineStyle

    Parameters

    • index: number

      Index of the style to be defined. This has to be in range 0 - 224. Index can than be passed to change appearance of the products in model

    • colour: number[]

      Array of four numbers in range 0 - 255 representing RGBA colour. If there are less or more numbers exception is thrown.

    Returns void

  • This is the main draw method. You can use it if you just want to render model once with no navigation and interaction. If you want interactive model, call start() method.

    Function

    Viewer#draw

    Fires

    Viewer#frame

    Parameters

    • Optional framebuffer: Framebuffer
    • disablePlugins: boolean = false

    Returns void

  • Parameters

    • msg: any

      Fires error event. This might be used by plugins.

    Returns void

  • Use this method to get camera direction

    Function

    Viewer#getCameraDirection

    Returns vec3

  • Use this method to get camera direction

    Function

    Viewer#getCameraHeading

    Returns vec3

  • Use this method to get actual camera position.

    Function

    Viewer#getCameraPosition

    Returns vec3

  • Use this method to get camera position in the WCS coordinates. Useful for persistance accross executions.

    Returns vec3

  • Gets clipping plane of the defined model or of the first clipping plane curently visible. Bare in mind that every model might have different clipping plane

    Parameters

    • Optional modelId: number

      Optional ID of the model which clipping plane we want to obtain

    Returns {
        PlaneA: number[];
        PlaneB: number[];
    }

    • PlaneA: number[]
    • PlaneB: number[]
  • Parameters

    • callback: ((blob: Blob) => void)
        • (blob: Blob): void
        • Parameters

          • blob: Blob

          Returns void

    Returns void

  • Parameters

    • width: number = ...
    • height: number = ...

    Returns Uint8ClampedArray

  • Parameters

    • width: number = ...
    • height: number = ...
    • type: "png" | "jpeg" = 'png'

    Returns string

  • Parameters

    • width: number = ...
    • height: number = ...

    Returns HTMLImageElement

  • Gets current WCS displacement used for visualisation

    Returns vec3

  • This renders the colour coded model into the memory buffer not to the canvas and use it to identify ID, model id and 3D location at canvas location [x,y]

    Parameters

    • points: {
          x: number;
          y: number;
      }[]

    Returns {
        id: number;
        model: number;
    }[]

  • Parameters

    • bBox: Float32Array | number[]
    • viewDirection: vec3
    • upDirection: vec3

    Returns {
        distance: number;
        height: number;
    }

    • distance: number
    • height: number
  • Parameters

    • x: number
    • y: number

    Returns {
        id: number;
        model: number;
        xyz: vec3;
    }

    • id: number
    • model: number
    • xyz: vec3
  • Parameters

    • event: MouseEvent | Touch
    • raw: boolean = false

    Returns {
        id: number;
        model: number;
        xyz: vec3;
    }

    • id: number
    • model: number
    • xyz: vec3
  • This renders the colour coded model into the memory buffer not to the canvas and use it to identify ID, model id and 3D location at canvas location [x,y]

    Parameters

    • x: number

      X coordinate on the canvas

    • y: number

      Y coordinate on the canvas

    Returns {
        location: vec3;
        modelId: number;
        renderId: number;
    }

    • location: vec3
    • modelId: number
    • renderId: number
  • This function can be used to place HTML markup relative to the centroid of a product

    Returns

    HTML coordinates of the centroid of the product bounding box

    Parameters

    • productId: number

      ID of the product

    • modelId: number

      ID of the model

    Returns number[]

  • This function can be used to identify the XY location on the canvas for a given 3D WCS vector. For example this can be used to identity the XY location of a pick event in 3D space.

    Returns

    HTML coordinates of the provided WCS vector

    Parameters

    Returns number[]

  • Parameters

    • event: MouseEvent | Touch

    Returns vec3

  • Gets list of isolated product IDs

    Parameters

    • modelId: number

    Returns number[]

  • Gets complete model state and style. Resulting object can be used to restore the state later on.

    Returns

    • Array representing model state in compact form suitable for serialization

    Parameters

    • modelId: number

      Model ID which you can get from loaded event.

    Returns number[][]

  • Counts number of triangles for every product. This is usefull to understand performance of certain models. The default sort order is by number of triangles, but density of triangles (number of triangles per a volume unit) might also be a good measure to find the most expensive products to draw.

    Returns

    List of product analytical results sorted in descendent order by number of triangles or density (number of triangles per volumetric unit of the product bounding box)

    Parameters

    • orderBy: "triangles" | "density" = 'triangles'

      Measure to use for the default ascending sort order. Default value: 'triangles'

    Returns ProductAnalyticalResult[]

  • Function

    Viewer#getProductBoundingBox

    Returns

    Bounding box of the product in model coordinates (not reduced by current WCS)

    Parameters

    • prodId: number
    • Optional modelId: number

      Optional Model ID. If not defined first type of a product with certain ID will be returned. This might be ambiguous.

    Returns Float32Array

  • Function

    Viewer#getProductType

    Returns

    Product type ID. This is either null if no type is identified or one of type ids.

    Parameters

    • prodId: number
    • Optional modelId: number

      Optional Model ID. If not defined first type of a product with certain ID will be returned. This might be ambiguous.

    Returns number

  • Parameters

    • modelId: number

    Returns {
        id: number;
        states: State[];
    }[]

  • Parameters

    Returns {
        id: number;
        model: number;
    }[]

  • Use this function to get state of the products in the model. You can compare result of this function with one of values from State enumeration. 0xFF is the default value.

    Function

    Viewer#getState

    Parameters

    • id: number

      Id of the product. You would typically get the id from pick event or similar event.

    • Optional modelId: number

      Id of the model

    Returns number

  • Use this function to get overriding colour style of the products in the model. The number you get is the index of your custom colour which you have defined in defineStyle() function. 0xFF is the default value.

    Function

    Viewer#getStyle

    Returns

    Returns style index or 255 (State.UNDEFINED) if there is no overriding style defined for the product. Use viewer.defineStyle() to define overriding style and viewer.setStyle() to set it for a product.

    Parameters

    • id: number

      Id of the product. You would typically get the id from pick event or similar event.

    • Optional modelId: number

      Optional Model ID. If not defined first style available for a product with certain ID will be returned. This might be ambiguous.

    Returns number

  • This method returns specified product's bounding box or bbox of the current acite models if no product ID is specified.

    Function

    Viewer#setCameraTarget

    Returns

    Returns bounding box of the target, null if not found

    Parameters

    • Optional prodId: number

      [optional] Product ID. You can get ID either from semantic structure of the model or from pick event.

    • Optional modelId: number

      Optional ID of a specific model.

    Returns Float32Array | number[]

  • Parameters

    • targets: {
          id: number;
          model: number;
      }[]

    Returns Float32Array | number[]

  • Checks if the model with defined ID is currently loaded in the viewer.

    Returns

    True if model is loaded, false otherwise

    Parameters

    • id: number

      Model ID

    Returns boolean

  • Checks if the model with defined ID is currently loaded and running

    Returns

    True if model is loaded and running, false otherwise

    Parameters

    • id: number

      Model ID

    Returns boolean

  • Returns true if model participates in picking, false otherwise

    Parameters

    • modelId: number

      ID of the model

    Returns boolean

  • Checks if product with this ID exists in the model

    Parameters

    • productId: number
    • modelId: number

    Returns boolean

  • Stops all models and only shows a single product

    Parameters

    • productIds: number[]
    • modelId: number

      Model ID

    Returns void

  • Isolates products which have most geometry (number of triangles). This function is meant for data debugging, identifying products which are likely to be over-detailed or poorly modeled.

    Use isolate() to cancel this operation

    Returns

    The set of product analytical results isolated, sorted in descendent order by number of triangles or density (number of triangles per volumetric unit of the product bounding box)

    Parameters

    • measure: "triangles" | "density" = 'triangles'

      Measure to use for sorting and selection. Defaul value: 'triangles'

    • ratio: number = 0.2

      Top ratio to isolate. Should be a number between 0.0 - 1.0. Default value is 0.2 which means top 20% of the geometry

    Returns ProductAnalyticalResult[]

  • This method is used to load model data into viewer. Model has to be either URL to wexBIM file or Blob or File representing wexBIM file binary data. Any other type of argument will throw an exception. Region extend is determined based on the region of the model Default view if 'front'. If you want to define different view you have to set it up in handler of loaded event.
    You can load more than one model if they occupy the same space, use the same scale and have unique product IDs. Duplicated IDs won't affect visualization itself but would cause unexpected user interaction (picking, zooming, ...)

    Function

    Viewer#load

    Fires

    Viewer#loaded

    Parameters

    • model: string | Blob | File

      Model has to be either URL to wexBIM file or Blob or File representing wexBIM file binary data.

    • Optional tag: any

      [optional] - Tag to be used to identify the model in loaded event.

    • Optional headers: {
          [name: string]: string;
      }

      [optional] - Headers to be used for request. This can be used for authorized access for example.

      • [name: string]: string
    • Optional progress: ((message: Message) => void)

      [optional] - Progress reporting delegate

    Returns void

  • This method uses WebWorker if available to load the model into this viewer. Model has to be either URL to wexBIM file or Blob or File representing wexBIM file binary data. Any other type of argument will throw an exception. You can load more than one model if they occupy the same space, use the same scale and have unique product IDs. Duplicated IDs won't affect visualization itself but would cause unexpected user interaction (picking, zooming, ...).

    Function

    Viewer#load

    Fires

    Viewer#loaded

    Parameters

    • model: string | Blob | File

      Model has to be either URL to wexBIM file or Blob or File representing wexBIM file binary data.

    • Optional tag: any

      [optional] - Tag to be used to identify the model in loaded event.

    • Optional headers: {
          [name: string]: string;
      }

      [optional] - Headers to be used for request. This can be used for authorized access for example.

      • [name: string]: string
    • Optional progress: ((message: Message) => void)

    Returns void

  • Use this method to unregister handlers from events. You can add event handlers by calling the on() method.

    Function

    Viewer#off

    Parameters

    • eventName: string

      Name of the event

    • callback: any

      Handler to be removed

    Returns void

  • Use this method to register to events of the viewer like :pick, mousedown, :loaded and others. You can define arbitrary number of event handlers for any event. You can remove handler by calling off() method.

    Function

    Viewer#on

    Type Parameters

    Parameters

    • eventName: K

      Name of the event you would like to listen to.

    • handler: ((args: ViewerEventMap[K]) => void)

      Callback handler of the event which will consume arguments and perform any custom action.

    Returns void

  • Removes plugin from the viewer. Plugins can implement certain methods which get called in certain moments in time like before draw, after draw etc. This makes it possible to implement functionality tightly integrated into Viewer like navigation cube or others.

    Function

    Viewer#removePlugin

    Parameters

    Returns void

  • Parameters

    • state: State
    • target: number | number[]
    • Optional modelId: number

    Returns void

  • Use this function to reset state of all products to 'UNDEFINED' which means visible and not highlighted. You can use optional hideSpaces parameter if you also want to show spaces. They will be hidden by default.

    Function

    Viewer#resetStates

    Parameters

    • target: number | number[]

      Target of the change. It can either be array of product IDs or product type from ProductType.

    • Optional modelId: number

    Returns void

  • Use this function to reset appearance of all products to their default styles.

    Function

    Viewer#resetStyles

    Parameters

    • Optional modelId: number

      Optional ID of a specific model.

    Returns void

  • Restores model state from the data previously captured with getModelState() function

    Parameters

    • modelId: number

      ID of the model

    • state: number[][]

      State of the model as obtained from getModelState() function

    Returns void

  • Parameters

    • modelId: number
    • stateMap: {
          id: number;
          states: State[];
      }[]

    Returns void

  • This method can be used for batch setting of viewer members. It doesn't check validity of the input.

    Function

    Viewer#set

    Parameters

    • settings: Partial<Viewer>

      Object containing key - value pairs

    Returns void

  • Use this method to clip the model with A plane. Use unclip() method to unset clipping plane.

    Function

    Viewer#setClippingPlaneA

    Parameters

    • plane: number[]

      normal equation of the plane

    • Optional modelId: number

      Optional ID of the model to be clipped. All models are clipped otherwise.

    Returns void

  • Use this method to clip the model with B plane. Use unclip() method to unset clipping plane.

    Function

    Viewer#setClippingPlaneB

    Parameters

    • plane: number[]

      normal equation of the plane

    • Optional modelId: number

      Optional ID of the model to be clipped. All models are clipped otherwise.

    Returns void

  • Sets state of the given item to be hovered over, unsetting an previous item. Setting the id to undefined will clear the current.

    Parameters

    • id: number

      The product Id

    • model: number

      Id of the model

    Returns void

  • Sets the provided product as the center of rotation

    Parameters

    • productId: number

      ID of the product

    • modelId: number

      ID of the model

    Returns void

  • Sets camera parameters (near and far clipping planes) from current active models. This should be called whenever active models are very different (size, units)

    Returns void

  • Parameters

    • state: State
    • target: number | number[]
    • Optional modelId: number

    Returns void

  • Use this method for restyling of the model. This doesn't change the default appearance of the products so you can think about it as an overlay. You can remove the overlay if you set the style to State.UNSTYLED value. You can combine restyling and hiding in this way. Use defineStyle() to define styling first.

    Function

    Viewer#setStyle

    Parameters

    • style: number

      style defined in defineStyle() method

    • target: number | number[]

      Target of the change. It can either be array of product IDs or product type from ProductType.

    • Optional modelId: number

      Optional ID of a specific model.

    Returns void

  • Use this function to show default views.

    Function

    Viewer#show

    Parameters

    • type: ViewType

      Type of view. Allowed values are 'top', 'bottom', 'front', 'back', 'left', 'right'. Directions of this views are defined by the coordinate system. The camera target and distance is determined by 'id' param, if present, or the full model extent when omitted

    • Optional id: number

      Optional parameter indicating the product ID to target the camera at

    • Optional model: number

      Optional parameter indicating the model ID the product is in

    • withAnimation: boolean = true

      Optional parameter, default is 'true'. When true, transition to the view is animated. When false, view is changed imediately.

    Returns Promise<void>

  • Use this function to start animation of the model. If you start animation before geometry is loaded it will wait for content to render it. This function is bound to browser framerate of the screen so it will stop consuming any resources if you switch to another tab.

    Function

    Viewer#start

    Parameters

    • Optional modelId: number

      [optional] - Optional ID of the model to be stopped. You can get this ID from loaded event.

    Returns void

  • Use this function to start all models. You can switch animation of the model off by calling stop().

    Function

    Viewer#startAll

    Returns void

  • Use this function to enable picking of the objects in the specified model. All models are pickable by default when loaded. You can stop the model from being pickable using stopPicking function.

    Function

    Viewer#startPicking

    Parameters

    • id: number

      ID of the model to be stopped. You can get this ID from loaded event.

    Returns void

  • Starts rotation around to present the model

    Returns void

  • Use this function to stop animation of the model. User will still be able to see the latest state of the model. You can switch animation of the model on again by calling start().

    Function

    Viewer#stop

    Parameters

    • Optional id: number

      [optional] - Optional ID of the model to be stopped. You can get this ID from loaded event.

    Returns void

  • Use this function to stop all models. You can switch animation of the model on again by calling start().

    Function

    Viewer#stopAll

    Returns void

  • Use this function to stop picking of the objects in the specified model. It will behave as if not present for all picking operations. All models are pickable by default when loaded.

    Function

    Viewer#stopPicking

    Parameters

    • id: number

      ID of the model to be stopped. You can get this ID from loaded event.

    Returns void

  • Stops rotation of the model

    Returns void

  • This method will cancel any clipping plane if it is defined. Use clip() method to define clipping by point and normal of the plane.

    Function

    Viewer#unclip

    Parameters

    • Optional modelId: number

      Optional ID of the model to be unclipped. All models are unclipped otherwise.

    Returns void

  • Unloads model from the GPU. This action is not reversible.

    Parameters

    • modelId: number

      ID of the model which you can get from loaded event.

    Returns void

  • Use this method to zoom to specified element. If you don't specify a product ID it will zoom to full extent. If you specify list of products, this function will zoom to grouped bounding box. You should use this only for elements which are close to each other (like aggregations)

    Function

    Viewer#zoomTo

    Returns

    True if target exists and zoom was successful, False otherwise

    Parameters

    • Optional target: number | {
          id: number;
          model: number;
      }[]

      Optional product ID or a list of products in models

    • Optional model: number

      Optional model ID

    • withAnimation: boolean = true

      Optional parameter, default is 'true'. When true, transition to the view is animated. When false, view is changed imediately.

    • checkVisibility: boolean = true

    Returns Promise<void>

Properties

animations: Animations

Animations functionality

canvas: HTMLCanvasElement
gl: WebGLRenderingContext
glVersion: number
lockedOrbitOrigin: vec3
zoomDuration: number = 1000

Number of milliseconds for animated zooming

Constructors

  • This is constructor of the xBIM Viewer. It gets HTMLCanvasElement or string ID as an argument. Viewer will than be initialized in the context of specified canvas. Any other argument will throw exception.

    If any Zone technology is in use, this constructor should run in the root zone without any additional load. It has global event handlers and hooks in document.mousemove, document.keyup, requestAnimationFrame and otherw which need to run fast and should not cause any additional sideeffects (like data binding refresh in Angular)

    Name

    Viewer

    Classdesc

    This is the main and the only class you need to load and render IFC models in wexBIM format. This viewer is part of xBIM toolkit which can be used to create wexBIM files from IFC, ifcZIP and ifcXML. WexBIM files are highly optimized for transmition over internet and rendering performance. Viewer uses WebGL technology for hardware accelerated 3D rendering and SVG for certain kinds of user interaction. This means that it won't work with obsolete and non-standard-compliant browsers like IE10 and less.

    Parameters

    • canvas: string | HTMLCanvasElement

      string ID of the canvas or HTML canvas element.

    • Optional errorHandler: ((__namedParameters: Object) => void)

      an error handler

        • (__namedParameters: Object): void
        • Parameters

          • __namedParameters: Object

          Returns void

    Returns Viewer

Generated using TypeDoc