Viewer

class cee.Viewer()

The Viewer manages the Views it contains and handles user interaction (navigation and picking).

You can add a new view with the addView function. The Viewer owns and manages the View, and you delete the view by using the deleteViewAt function.

A Viewer can have multiple views. A single model can be shared in each view, or multiple different models can be added to specific views. By default, the views are positioned automatically, but you can set the position and size of each view manually using the ViewLayoutMode accessor.

The Viewer handles the interaction with the user, both navigation (pan/rotate/zoom/walk) and selection/picking.

You can trigger a redraw of the 3D view(s) with the requestRedraw function.

Examples of the different highlight modes (See ViewerOptions.highlightMode )

None

Accessors

cee.Viewer.disableContextMenu()
get disableContextMenu(): boolean

Disable the context menu on right click

Returns: boolean

set disableContextMenu(disable: boolean): void

Parameters

disable: boolean

Returns: void

cee.Viewer.pixelScaleFactor()
get pixelScaleFactor(): number

The current pixel scale factor ( > 1 for ‘retina’/’high-dpi’) screen.

Returns: number

cee.Viewer.viewCount()
get viewCount(): number

The number of views in the Viewer

Returns: number

cee.Viewer.viewLayoutMode()
get viewLayoutMode(): ViewLayoutMode

The view layout mode for the viewer

Returns: ViewLayoutMode

set viewLayoutMode(layoutMode: ViewLayoutMode): void

Parameters

layoutMode: ViewLayoutMode

Returns: void

Methods

cee.Viewer.addView()
addView(): View

Adds a view to the viewer.

This functions creates a view, adds it to the viewer and returns the newly created view.

You need at least one view in a viewer in order to display a model.

Returns: View

cee.Viewer.deleteAllViews()
deleteAllViews(): void

Deletes all views from the viewer.

Returns: void

cee.Viewer.deleteViewAt()
deleteViewAt(viewIndex: number): void

Deletes the view at the given index.

The index must be zero-based and between 0 and viewCount - 1

Parameters

viewIndex: number

Returns: void

cee.Viewer.enableMouseButtonTracking()
enableMouseButtonTracking(enable: boolean): void

Deprecated

Parameters

enable: boolean

Returns: void

cee.Viewer.enableNavigationHandling()
enableNavigationHandling(enable: boolean): void

Deprecated

Parameters

enable: boolean

Returns: void

cee.Viewer.flyCameraTo()
flyCameraTo(cameraPos: Vec3Like, viewDir: Vec3Like, upVec: Vec3Like, fieldOfViewYDegOrFrontPlaneFrustumHight: number, animDuration: number, view: View): void

Flies the camera from the current position to the specified new position in the given view.

If the current projection in the active View camera is perspective, the fieldOfViewYDegOrFrontPlaneFrustumHight parameter is the final field of view in Y direction in degrees (as passed to Camera.setProjectionAsPerspective()).

If the current projection is ortho, the fieldOfViewYDegOrFrontPlaneFrustumHight parameter is the final front plane frustum height (as passed to Camera.setProjectionAsOrtho()).

If view is not specified then the operation is performed on the first view.

Parameters

cameraPos: Vec3Like

viewDir: Vec3Like

upVec: Vec3Like

fieldOfViewYDegOrFrontPlaneFrustumHight: number

animDuration: number

view: View

Returns: void

cee.Viewer.getViewArray()
getViewArray(): readonly  View[]

Returns a read only array with all views in the viewer

Returns: readonly  View[]

cee.Viewer.getViewAt()
getViewAt(viewIndex: number): View

Returns the view at the given index.

The index must be zero-based and between 0 and viewCount - 1

Parameters

viewIndex: number

Returns: View

cee.Viewer.getViewFromCssCoordinate()
getViewFromCssCoordinate(offsetX: number, offsetY: number): View

Get the view containing the given Canvas/Viewer local CSS coordinate. This coordinate is relative to the top left corner of the canvas/viewer element in css pixels.

The input coordinates can be set from MouseEvent.offsetX/offsetY.

Parameters

offsetX: number

The x coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

offsetY: number

The y coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

Returns: View

The View containing the given coordinate, or null if no view contains the coordinate.
cee.Viewer.oglWinPosFromClientCoord()
oglWinPosFromClientCoord(clientX: number, clientY: number): Vec2

Convert from client (DOM content) coordinates to WebGL style coordinates

Parameters

clientX: number

The X coordinate of the mouse pointer in local (DOM content) coordinates.

clientY: number

The Y coordinate of the mouse pointer in local (DOM content) coordinates.

Returns: Vec2

The WebGL style <x,y> coordinate for the given client coordinate in the viewer.
cee.Viewer.oglWinPosFromCssCoordinate()
oglWinPosFromCssCoordinate(cssPixCoordX: number, cssPixCoordY: number): Vec2

Convert from canvas local css (DOM content) coordinates to WebGL style coordinates, similar to offsetX/Y in in MouseEvent.

The cssX/Y coordinates local Canvas coordinates in css (DOM content) coordinates. They are local to the Canvas element, so 0,0 is the top left corner of the Canvas element. The coordinates are in css pixels, so they are not affected by the device pixel ratio or any zoom in the browser. These coordinates are related to the MouseEvent.offsetX/Y coordinates.

See https://developer.mozilla.org/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems for more on CSS coordinate systems. They correspond to the “Offset” system.

Parameters

cssPixCoordX: number

The x coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

cssPixCoordY: number

The y coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

Returns: Vec2

The WebGL style <x,y> coordinate for the given css coordinate in the viewer.
cee.Viewer.rayFromCssCoordinate()
rayFromCssCoordinate(view: View, cssPixCoordX: number, cssPixCoordY: number): Ray

Get a ray from the given Canvas/Viewer local CSS coordinate. This coordinate is relative to the top left corner of the canvas/viewer element in css pixels.

Parameters

view: View

cssPixCoordX: number

The x coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

cssPixCoordY: number

The y coordinate in css pixel coordinates. This is relative to the top left corner of the Viewer’s Canvas element.

Returns: Ray

A Ray than can be used for rayIntersect() on the various models. Returns null if a ray could not be created.

The input coordinates can be set from MouseEvent.offsetX/offsetY.

cee.Viewer.requestRedraw()
requestRedraw(): void

Notifies that this viewer needs a redraw. This will schedule a redraw on the next timer event.

Use this method to force a redraw if you have changed something that does not update the viewer. This is not usually needed.

Returns: void

cee.Viewer.resizeViewer()
resizeViewer(canvasDisplayWidthCSSPixels: number, canvasDisplayHeightCSSPixels: number): void

Sets the display size of the viewer’s canvas in CSS pixels.

Note that the input width and height is in CSS pixels which. This means that the resulting size of the canvas in physical pixels may end up being larger than the specified size depending on the currently set pixel scale factor (devicePixelRatio)

Parameters

canvasDisplayWidthCSSPixels: number

canvasDisplayHeightCSSPixels: number

Returns: void

cee.Viewer.rubberBandZoom()
rubberBandZoom(view: View, clientX: number, clientY: number, width: number, height: number): void

Zooms in or out in the view by the given rubber band rectangle.

clientX and clientY are the Top Left corner of the rectangle, specified in client coordinates (HTML window coordinates) (from e.g. a MouseEvent.clientX/Y)

NOTE: This is the only method using client coordinates. All other relevant methods use Canvas/Viewer local CSS coordinates. This behavior will change in an upcoming major release.

Parameters

view: View

clientX: number

clientY: number

width: number

height: number

Returns: void

cee.Viewer.setActiveMouseNavigationsChangedHandler()
setActiveMouseNavigationsChangedHandler(navigationHandler: MouseNavigationChangedHandler): void

Deprecated

Parameters

Returns: void

cee.Viewer.setCameraAnimation()
setCameraAnimation(cameraAnimation: CameraAnimation): void

Sets a camera animation that will be run for this viewer

Parameters

cameraAnimation: CameraAnimation

Returns: void

cee.Viewer.setColorLegendClickHandler()
setColorLegendClickHandler(legendClickHandler: ColorLegendClickedHandler): void

Sets the handler function to be called whenever the user clicks on a color legend.

The handler function will be passed the id of the scalar result.

Parameters

legendClickHandler: ColorLegendClickedHandler

Returns: void

cee.Viewer.setPickHandler()
setPickHandler(pickHandler: PickHandler): void

Deprecated

Parameters

pickHandler: PickHandler

Returns: void

cee.Viewer.setPixelScaleFactor()
setPixelScaleFactor(pixelScaleFactor: number): void

Set pixel scale factor.

Parameters

pixelScaleFactor: number

Returns: void

cee.Viewer.setShowDebugWindow()
setShowDebugWindow(show: boolean): void

Specifies if the debug overlay info window should be shown or not

Parameters

show: boolean

Returns: void

cee.Viewer.updatePixelScaleFactor()
updatePixelScaleFactor(): void

Update the current pixel scale factor by querying window.devicePixelRatio.

Returns: void