Manual Reference Source
import Viewer3D from 'modelo3d/doc/View/Viewer3D.js'
public class | source

Viewer3D

Extends:

Viewer → Viewer3D

A Viewer3D object takes in a HTML5

DOM and draw 3D models over this DOM. It captures the input methods, e.g., mouse, keyboard whenever they are enabled, and other browser events, e.g., resize and take correspoinding actions.

Constructor Summary

Public Constructor
public

constructor(containerId: string, config: Viewer3DConfig)

Constructor a 3D viewer.

Method Summary

Public Methods
public

addInput(input: Object): *

Add an input method to this viewer, e.g., mouse.

public

Clear all loaded models and terrian in the scene Release all resources loaded before

public

Stop rendering, destroy the viewer and release all internal resources.

public

dumpScreen(width: number, height: number, bgColor: Array<number>): string

Capture current frame of the viewer to the image with specified width and height

public

getCamera(): *

Get the camera of the scene.

public

When keyboard is attached to this viewer, return the keyboard object.

public

When mouse is attached to this viewer, return the mouse object.

public

Get the scene.

public

Invalidate the current rendering and refresh it again.

public

Return true if the rendering effect is enabled.

public

If the culling is enabled.

public

loadModel(modelId: string, initialTransform: Array<number>, onSuccess: function, onFail: function, onProgress: function)

Load a model into current viewer.

public

loadTerrain(terrainId: string, initialTransform: Array<number>, onSuccess: function, onFail: function, onProgress: function)

Load a terrain model into current viewer.

public

pause()

Pause the current rendering.

public

resize(width: number, height: number)

Resize the viewer.

public

resume()

Resume the rendering.

public

Set the background color of the viewer.

public

Set the background image of the viewer

public

setBackgroundMode(mode: enumerate)

The background image display mode.

public

Set the callback function when the webgl context is lost

public

Set the callback function when the webgl context is restored

public

setEffectEnabled(effect: string, enabled: boolean)

Enable/Disable rendering effect

public

setEffectParameter(effect: string, name: string, value: object)

Set the parameter for certain rendering effect.

public

If lazy rendering is on, the rendering stops when camera stops.

public

Change the lighting intensity

public

Set the height of light

public

Set the direction of light

public

Set all elements to the same color.

public

Turn on/off the line rendering in the current viewer.

public

Turn on/off the shadow

public

Enable the smart culling when rotation.

public

Turn on/off specular lighting.

public

Set the intensity of specular lighting.

public

Set the callback function when rendering is about to happen.

Inherited Summary

From class Viewer
public

Add an input method to this viewer, e.g., mouse.

public

addTool(tool: Tool): *

Add an tool to this viewer.

public

Clear content of the scene.

public

Stop rendering, destroy the viewer and release all internal resources.

public

Return the canvas DOM.

public

Get the input

public

Get the tool instance by name.

public

Invalidate the current rendering and refresh it again.

public

pause()

Pause the current rendering.

public

Remove the tool instance by its name.

public

resize(width: number, height: number)

Resize the viewer.

public

resume()

Resume the rendering.

Public Constructors

public constructor(containerId: string, config: Viewer3DConfig) source

Constructor a 3D viewer.

Override:

Viewer#constructor

Params:

NameTypeAttributeDescription
containerId string

An HTML div DOM that embodies this viewer. Viewer may create additional HTML DOMs inside this container.

config Viewer3DConfig

The configuration parameters of this viewer. It can be omitted and then default values will be used.

Public Methods

public addInput(input: Object): * source

Add an input method to this viewer, e.g., mouse.

Override:

Viewer#addInput

Params:

NameTypeAttributeDescription
input Object

Must be the instance of Modelo.Input that is compatible with current platform.

Return:

*

true if added successfully.

public clearScene() source

Clear all loaded models and terrian in the scene Release all resources loaded before

Override:

Viewer#clearScene

public destroy() source

Stop rendering, destroy the viewer and release all internal resources.

Override:

Viewer#destroy

public dumpScreen(width: number, height: number, bgColor: Array<number>): string source

Capture current frame of the viewer to the image with specified width and height

Params:

NameTypeAttributeDescription
width number

The width of screencapture in pixels

height number

Ditto

bgColor Array<number>

The background color of dumped image.

Return:

string

The URL encoded of image data.

public getCamera(): * source

Get the camera of the scene.

Return:

*

the camera object of the viewer.

public getKeyboard(): Object source

When keyboard is attached to this viewer, return the keyboard object.

Return:

Object

The attached keyboard object.

public getMouse(): Object source

When mouse is attached to this viewer, return the mouse object.

Return:

Object

The attached mouse object.

public getScene(): Scene3D source

Get the scene.

Return:

Scene3D

The scene object of this viewer.

public invalidate() source

Invalidate the current rendering and refresh it again.

Override:

Viewer#invalidate

public isEffectEnabled(effect: string) source

Return true if the rendering effect is enabled.

Params:

NameTypeAttributeDescription
effect string

The name of the rendering effect.

public isSmartCullingEnabled(): boolean source

If the culling is enabled.

Return:

boolean

True for yes.

public loadModel(modelId: string, initialTransform: Array<number>, onSuccess: function, onFail: function, onProgress: function) source

Load a model into current viewer. Modelo API supports loading multiple models into the same scene in a sequential way. Note that these models should be different in terms of model ID though. The number of models depend on the VRAM size of the system.

Params:

NameTypeAttributeDescription
modelId string

The global unique ID to this model under developer account.

initialTransform Array<number>

The initial 4x4 transform matrix of the model.

onSuccess function

Callback when the model finishes loading.

onFail function

Callback when the model fails to load due to some error. It takes a string of error message.

onProgress function

Callback when the loading progress changes. It takes a number between 0 and 100 to show downloading progress.

public loadTerrain(terrainId: string, initialTransform: Array<number>, onSuccess: function, onFail: function, onProgress: function) source

Load a terrain model into current viewer. The terrain model is handled differently from other kind of models because they are tiles based and have LOD information. Modelo API does not realize a full set of GIS renderer. It always load the entire terrain into memory. To accelerate the rendering, it loads the top most layer and load the rest in the background.

Params:

NameTypeAttributeDescription
terrainId string

The global unique ID to this model under developer account.

initialTransform Array<number>

The initial 4x4 transform matrix of the model.

onSuccess function

Callback when the model finishes loading.

onFail function

Callback when the model fails to load due to some error. It takes a string of error message.

onProgress function

Callback when the loading progress changes. It takes a number between 0 and 100 to show downloading progress.

public pause() source

Pause the current rendering.

Override:

Viewer#pause

public resize(width: number, height: number) source

Resize the viewer.

Override:

Viewer#resize

Params:

NameTypeAttributeDescription
width number
height number

public resume() source

Resume the rendering.

Override:

Viewer#resume

public setBackgroundColor(color: Array<number>) source

Set the background color of the viewer.

Params:

NameTypeAttributeDescription
color Array<number>

The RGB of the background color

public setBackgroundImage(image: object) source

Set the background image of the viewer

Params:

NameTypeAttributeDescription
image object

An HTML image DOM or 6 HTML images for BACKGROUND_CUBEMAP mode. In the later case, the background is rendered as a 360 panorama and 6 images are the textures of environmental cubemap in the order of negx, negy, negz, posx, posy and posz.

public setBackgroundMode(mode: enumerate) source

The background image display mode.

Params:

NameTypeAttributeDescription
mode enumerate

It can one of folwwing values

Modelo.View.BACKGROUND_SOLIDCOLOR, Modelo.View.BACKGROUND_WALLPAPER, Modelo.View.BACKGROUND_EQUIRECTANGLE, Modelo.View.BACKGROUND_CUBEMAP, Modelo.View.BACKGROUND_WALLPAPER_TILED. The BACKGROUND_SOLIDCOLOR says the backgorund will be a solid color and call setBackgroundColor() to change the color. The BACKGROUND_WALLPAPER will put image into the viewer. The image will be stretched if their aspects are different. BACKGROUND_EQUIRECTANGLE will treat the image as an equiprectangle panorama image. BACKGROUND_CUBEMAP needs 6 images to cover a cube paranoama. BACKGROUND_WALLPAPER_TILED is very like BACKGROUND_WALLPAPER but will not stretch the image.

public setContextLostCbk(cbk: function) source

Set the callback function when the webgl context is lost

Params:

NameTypeAttributeDescription
cbk function

public setContextRestoreCbk(cbk: function) source

Set the callback function when the webgl context is restored

Params:

NameTypeAttributeDescription
cbk function

public setEffectEnabled(effect: string, enabled: boolean) source

Enable/Disable rendering effect

Params:

NameTypeAttributeDescription
effect string

The name of the rendering effect. The available effects are "SSAO" and "sketch".

enabled boolean

public setEffectParameter(effect: string, name: string, value: object) source

Set the parameter for certain rendering effect. For parameters of each effect, please refer to effect's page.

Params:

NameTypeAttributeDescription
effect string

The name of the rendering effect.

name string

The name of the parameter.

value object

The value to be set.

public setLazyRenderingEnabled(enabled: boolean) source

If lazy rendering is on, the rendering stops when camera stops. It saves the CPU cycles. Moreover, only under lazy rendering mode, we have a few computational expensive effects, e.g., ambient shadow.

Params:

NameTypeAttributeDescription
enabled boolean

Enable the lazy rendering or not.

public setLightingIntensity(intensity: number) source

Change the lighting intensity

Params:

NameTypeAttributeDescription
intensity number

A value between 0 and 1. 0 means blind dark and 1 is the brightest.

public setLightingLatitude(angle: number) source

Set the height of light

Params:

NameTypeAttributeDescription
angle number

ranges in [0, pi/2]. pi/2 when light is at north polar.

public setLightingLongitude(angle: number) source

Set the direction of light

Params:

NameTypeAttributeDescription
angle number

ranges in [0, pi*2]. 0 when light is at east.

public setOverrideColor(color: Array<number>) source

Set all elements to the same color. Note that this change only take effects temporarily at this session. It does not change the scene data so that the color setting is not preserved next time.

Params:

NameTypeAttributeDescription
color Array<number>

The new color.

public setRenderingLinesEnabled(enabled: boolean) source

Turn on/off the line rendering in the current viewer.

Params:

NameTypeAttributeDescription
enabled boolean

public setShadowEnabled(enabled: boolean) source

Turn on/off the shadow

Params:

NameTypeAttributeDescription
enabled boolean

true for shadow on.

public setSmartCullingEnabled(enabled: boolean) source

Enable the smart culling when rotation. When it is enabled, some un-important elements will be hidden during camera aniatmion to accelerate the rendering. This cull policy is based on the knowledge of the scene which is why it is called smart culling.

Params:

NameTypeAttributeDescription
enabled boolean

Enabled or disable the culling.

public setSpecularEnabled(enabled: boolean) source

Turn on/off specular lighting.

Params:

NameTypeAttributeDescription
enabled boolean

enable the specular light

public setSpecularIntensity(intensity: number) source

Set the intensity of specular lighting.

Params:

NameTypeAttributeDescription
intensity number

the intensity of specular light, ranging from 0 (dim) to 1 (bright)

public setUpdateCallback(cbk: function) source

Set the callback function when rendering is about to happen. Application can provide an update callback here to manipulate the scene objects so that rendering can reflect the application behaviour.

Params:

NameTypeAttributeDescription
cbk function