Skip to main content

Class: ViewerApp

Core-API.ViewerApp

The main entry point for the 3D viewer SDK. Creates a scene, renderer and attaches itself to a canvas.

Hierarchy

  • SimpleEventDispatcher<"update" | "preRender" | "postRender" | "preFrame" | "postFrame" | "dispose" | "addPlugin" | "renderEnabled" | "renderDisabled">

    ViewerApp

    ↳↳ CoreViewerApp

    ↳↳ CoreEditorApp

Implements

Properties

VERSION

Static Readonly VERSION: "0.9.2"

Defined in

webgi/src/viewer/ViewerApp.ts:121


console

console: Console = console

Implementation of

IViewerApp.console

Defined in

webgi/src/viewer/ViewerApp.ts:123


scene

Readonly scene: RootScene<CameraController>

The Scene attached to the viewer, this cannot be changed.

Implementation of

IViewerApp.scene

Defined in

webgi/src/viewer/ViewerApp.ts:136


plugins

Readonly plugins: Record<string, IViewerPlugin<IViewerApp, boolean>> = {}

Implementation of

IViewerApp.plugins

Defined in

webgi/src/viewer/ViewerApp.ts:153


renderFilter

Readonly renderFilter: IFilter<RenderPass2, "render">

The IFilter wrapper for the main render pass for the effect composer.

Defined in

webgi/src/viewer/ViewerApp.ts:161


resizeObserver

Readonly resizeObserver: undefined | ResizeObserver

The ResizeObserver observing the canvas element. Add more elements to this observer to resize viewer on their size change.

Defined in

webgi/src/viewer/ViewerApp.ts:187


enabled

enabled: boolean = true

If the viewer is enabled. Set this false to disable RAF loop.

Defined in

webgi/src/viewer/ViewerApp.ts:410


renderEnabled

renderEnabled: boolean = true

Enable or disable all rendering, Animation loop including any frame/render events won't be fired when this is false.

Defined in

webgi/src/viewer/ViewerApp.ts:416


maxFramePerLoop

maxFramePerLoop: number = 1

Specifies how many frames to render in a single request animation frame. Keep to 1 for realtime rendering. Note: should be max (screen refresh rate / animation frame rate) like 60Hz / 30fps

Defined in

webgi/src/viewer/ViewerApp.ts:429

Accessors

useRgbm

get useRgbm(): boolean

Use RGBM HDR Pipeline for rendering, which makes it faster on smaller devices but disables some features like transparency.

Returns

boolean

Implementation of

IViewerApp.useRgbm

Defined in

webgi/src/viewer/ViewerApp.ts:142


screenShader

get screenShader(): TViewerScreenShader

Screen shader used for final rendering on screen, this can be used by other plugins to render on screen like TonemapPlugin. so it's readonly.

Returns

TViewerScreenShader

Defined in

webgi/src/viewer/ViewerApp.ts:149


useGBufferDepth

get useGBufferDepth(): boolean

Whether to use the rendered gbuffer as depth-prepass. Requires GBufferPlugin This gives performance improvements but sometimes creates issues with z-fighting

Returns

boolean

Implementation of

IViewerApp.useGBufferDepth

Defined in

webgi/src/viewer/ViewerApp.ts:167


isAntialiased

get isAntialiased(): boolean

Whether using Multisample render targets for rendering.

Returns

boolean

Implementation of

IViewerApp.isAntialiased

Defined in

webgi/src/viewer/ViewerApp.ts:177


renderer

get renderer(): BaseRenderer

The renderer for the viewer that's attached to the canvas. This is wrapper around WebGLRenderer and EffectComposer and manages post-processing passes and rendering logic

Returns

BaseRenderer

Implementation of

IViewerApp.renderer

Defined in

webgi/src/viewer/ViewerApp.ts:376


state

get state(): ViewerState

deprecated State of the viewer. Not implemented.

see ViewerApp.enabled.

Returns

ViewerState

Implementation of

IViewerApp.state

Defined in

webgi/src/viewer/ViewerApp.ts:523


container

get container(): HTMLElement

Get the HTML Element containing the canvas

Returns

HTMLElement

Implementation of

IViewerApp.container

Defined in

webgi/src/viewer/ViewerApp.ts:531


canvas

get canvas(): HTMLCanvasElement

Get the HTML Canvas Element where the viewer is rendering

Returns

HTMLCanvasElement

Implementation of

IViewerApp.canvas

Defined in

webgi/src/viewer/ViewerApp.ts:539


renderManager

get renderManager(): BaseRenderer

Returns

BaseRenderer

Defined in

webgi/src/viewer/ViewerApp.ts:1049


assetManager

get assetManager(): undefined | AssetManagerPlugin

Returns

undefined | AssetManagerPlugin

Defined in

webgi/src/viewer/ViewerApp.ts:1053

Constructors

constructor

new ViewerApp(__namedParameters)

Create a viewer instance for using the webgi viewer SDK.

Parameters

NameType
__namedParametersIViewerAppOptions

Overrides

SimpleEventDispatcher<'update'|'preRender'|'postRender'|'preFrame'|'postFrame'|'dispose'|'addPlugin'|'renderEnabled'|'renderDisabled'\>.constructor

Defined in

webgi/src/viewer/ViewerApp.ts:197

Methods

resize

resize(): void

Mark that the canvas is resized. If the size is changed, the renderer and all render targets are resized. This happens before the render of the next frame.

Returns

void

Defined in

webgi/src/viewer/ViewerApp.ts:355


setDirty

setDirty(source?, event?): void

Set the viewer to dirty and trigger render of the next frame.

Parameters

NameTypeDescription
source?anyThe source of the dirty event. like plugin or 3d object
event?IEvent<any>The event that triggered the dirty event.

Returns

void

Implementation of

IViewerApp.setDirty

Defined in

webgi/src/viewer/ViewerApp.ts:366


dispose

dispose(): void

Disposes the viewer and frees up all resource and events. Do not use the viewer after calling dispose.

note - If you want to reuse the viewer, set viewer.enabled to false instead, then set it to true again when required. To dispose all the objects, materials in the scene use viewer.scene.disposeSceneModels() This function is not fully implemented yet. There might be some memory leaks.

Returns

void

Defined in

webgi/src/viewer/ViewerApp.ts:385


getPlugin

getPlugin<T>(type): undefined | T

Get the Plugin by a type.

Type parameters

NameType
Textends IViewerPlugin<IViewerApp, boolean, T>

Parameters

NameTypeDescription
typestring | Class<T>The class of the plugin to get.

Returns

undefined | T

  • The plugin of the specified type.

Implementation of

IViewerApp.getPlugin

Defined in

webgi/src/viewer/ViewerApp.ts:548


getPluginByType

getPluginByType<T>(type): undefined | T

Get the Plugin by the string type. Use this function if the plugin is not a dependency and you don't want to bundle the plugin.

Type parameters

NameType
Textends IViewerPlugin<ViewerApp, boolean, T>

Parameters

NameTypeDescription
typestringThe string type of the plugin to get. This in the static PluginType property of the plugin

Returns

undefined | T

Implementation of

IViewerApp.getPluginByType

Defined in

webgi/src/viewer/ViewerApp.ts:558


getOrAddPlugin

getOrAddPlugin<T>(type, ...args): Promise<T>

Type parameters

NameType
Textends IViewerPlugin<IViewerApp, boolean, T>

Parameters

NameType
typeClass<T>
...argsany[]

Returns

Promise<T>

Implementation of

IViewerApp.getOrAddPlugin

Defined in

webgi/src/viewer/ViewerApp.ts:562


getOrAddPluginSync

getOrAddPluginSync<T>(type, ...args): T

Type parameters

NameType
Textends IViewerPluginSync<IViewerApp, T>

Parameters

NameType
typeClass<T>
...argsany[]

Returns

T

Defined in

webgi/src/viewer/ViewerApp.ts:567


addPlugin

addPlugin<T>(plugin, ...args): Promise<T>

Add a plugin to the viewer.

Type parameters

NameType
Textends IViewerPlugin<IViewerApp, boolean, T>

Parameters

NameTypeDescription
pluginT | Class<T>The instance of the plugin to add or the class of the plugin to add.
...argsany[]Arguments for the constructor of the plugin, in case a class is passed.

Returns

Promise<T>

  • The plugin added.

Implementation of

IViewerApp.addPlugin

Defined in

webgi/src/viewer/ViewerApp.ts:579


addPluginSync

addPluginSync<T>(plugin, ...args): T

Add a plugin to the viewer(sync).

Type parameters

NameType
Textends IViewerPluginSync<IViewerApp, T>

Parameters

NameType
pluginT | Class<T>
...argsany[]

Returns

T

Defined in

webgi/src/viewer/ViewerApp.ts:617


addPlugins

addPlugins(plugins): Promise<void>

Parameters

NameType
plugins(IViewerPlugin<IViewerApp, boolean> | Class<IViewerPlugin<IViewerApp, boolean>>)[]

Returns

Promise<void>

Defined in

webgi/src/viewer/ViewerApp.ts:651


addPluginsSync

addPluginsSync(plugins): Promise<void>

Parameters

NameType
plugins(IViewerPluginSync<IViewerApp> | Class<IViewerPluginSync<IViewerApp>>)[]

Returns

Promise<void>

Defined in

webgi/src/viewer/ViewerApp.ts:656


removePlugin

removePlugin(p, dispose?): Promise<void>

Remove a plugin instance or a plugin class. Works similar to {@see ViewerApp.addPlugin}

Parameters

NameTypeDefault value
pIViewerPlugin<IViewerApp, boolean>undefined
disposebooleantrue

Returns

Promise<void>

Implementation of

IViewerApp.removePlugin

Defined in

webgi/src/viewer/ViewerApp.ts:666


removePluginSync

removePluginSync(p, dispose?): void

Parameters

NameTypeDefault value
pIViewerPluginSync<IViewerApp>undefined
disposebooleantrue

Returns

void

Defined in

webgi/src/viewer/ViewerApp.ts:676


createCamera

createCamera(camera): CameraController

Converts a three.js Camera instance to be used in the viewer.

Parameters

NameTypeDescription
cameraOrthographicCamera | PerspectiveCameraThe three.js OrthographicCamera or PerspectiveCamera instance

Returns

CameraController

  • A wrapper around the camera with some useful methods and properties.

Implementation of

IViewerApp.createCamera

Defined in

webgi/src/viewer/ViewerApp.ts:691


setSize

setSize(size?): void

Set size of the canvas and update the renderer. If no width/height is passed, canvas is set to 100% of the container.

Parameters

NameType
size?Object
size.width?number
size.height?number

Returns

void

Defined in

webgi/src/viewer/ViewerApp.ts:710


doOnce

doOnce<TRet>(event, func?): Promise<undefined | TRet>

Type parameters

Name
TRet

Parameters

NameType
event"preRender" | "postRender" | "preFrame" | "postFrame" | "renderEnabled" | "renderDisabled"
func?(...args: any[]) => TRet

Returns

Promise<undefined | TRet>

Defined in

webgi/src/viewer/ViewerApp.ts:765


setBackgroundColor

setBackgroundColor(color): void

Set the background color.

deprecated use {@see RootScene.setBackgroundColor} instead.

Parameters

NameTypeDescription
colorstring | number | Colorcolor in sRGB space.

Returns

void

Implementation of

IViewerApp.setBackgroundColor

Defined in

webgi/src/viewer/ViewerApp.ts:793


setBackground

setBackground(asset): void

Set the background color or texture, toggle it to show the environment as the background. This function is async because the background can be processed by some plugins after setting. This assumes the color to be in the Linear RGB color space, to use with sRGB use function {@see setBackgroundColor}.

deprecated use {@see RootScene.setBackground} instead.

Parameters

NameTypeDescription
assetnull | string | number | ITexture<any> | Colora Texture object, or a string/number/Color to set a solid color or {@see envMapBackground} for showing the scene environment map

Returns

void

  • returns after background is set.

Implementation of

IViewerApp.setBackground

Defined in

webgi/src/viewer/ViewerApp.ts:805


getBackground

getBackground(raw?): null | string | number | ITexture<any>

Get the background color or texture for the scene.

Parameters

NameTypeDefault valueDescription
rawbooleanfalseif true, returns the raw value that was passed to {@see setBackground}, otherwise returns the computed value. (eg. with RGBM, colors are converted to 1px textures, when raw is false, the texture is returned, else the raw color value that was set.)

Returns

null | string | number | ITexture<any>

Implementation of

IViewerApp.getBackground

Defined in

webgi/src/viewer/ViewerApp.ts:841


getManager

getManager(): undefined | AssetManagerPlugin

Gets the Asset management plugin, contains useful functions for managing, loading and inserting assets.

Returns

undefined | AssetManagerPlugin

Defined in

webgi/src/viewer/ViewerApp.ts:856


resetCamera

resetCamera(__namedParameters?): void

Sets the camera pointing towards the object at a specific distance.

Parameters

NameType
__namedParametersAnyOptions

Returns

void

Implementation of

IViewerApp.resetCamera

Defined in

webgi/src/viewer/ViewerApp.ts:869


fitToView

fitToView(selected?, distanceMultiplier?, duration?, ease?): Promise<void>

Parameters

NameTypeDefault value
selected?Object3D<Event, string>undefined
distanceMultipliernumber1.5
duration?numberundefined
ease?Easing | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | "bounceOut" | "bounceIn" | "bounceInOut" | "easeInOutSine"undefined

Returns

Promise<void>

Defined in

webgi/src/viewer/ViewerApp.ts:892


createObject3D

createObject3D(object?, addToRoot?): Promise<undefined | Object3DModel>

Create a new empty object in the scene or add an existing three.js object to the scene.

Parameters

NameTypeDefault value
object?Object3D<Event, string>undefined
addToRootbooleanfalse

Returns

Promise<undefined | Object3DModel>

Defined in

webgi/src/viewer/ViewerApp.ts:905


createPhysicalMaterial

createPhysicalMaterial(material?): undefined | MeshStandardMaterial2

Create a new physical material from a template or another material. It returns the same material if a material is passed created by the material manager.

Parameters

NameType
material?Material<Event, string> | MeshPhysicalMaterialParameters

Returns

undefined | MeshStandardMaterial2

Defined in

webgi/src/viewer/ViewerApp.ts:912


createMaterial

createMaterial<T>(template, material?): undefined | T

Create a new material from a template or another material. It returns the same material if a material is passed created by the material manager.

Type parameters

NameType
Textends IMaterial<any, T>

Parameters

NameTypeDescription
templatestringtemplate name registered in MaterialManager
material?anythree.js material object or material params to create a new material

Returns

undefined | T

Defined in

webgi/src/viewer/ViewerApp.ts:920


serializePlugins

serializePlugins(meta?, filter?): any[]

Serialize all the plugins and their settings to save or create presets. Used in {@see toJSON}.

Parameters

NameTypeDescription
meta?anyThe meta object.
filter?string[]List of PluginType for the to include.

Returns

any[]

Defined in

webgi/src/viewer/ViewerApp.ts:936


deserializePlugins

deserializePlugins(plugins, meta?): ViewerApp

Deserialize all the plugins and their settings from a preset. Used in {@see fromJSON}.

Parameters

NameTypeDescription
pluginsany[]The output of {@see serializePlugins}.
meta?anyThe meta object.

Returns

ViewerApp

Defined in

webgi/src/viewer/ViewerApp.ts:950


traverseSceneObjects

traverseSceneObjects<T>(callback): void

Traverse all objects in scene model root.

Type parameters

NameType
Textends ISceneObject<any> = IModel<Object3D<Event, string>>

Parameters

NameType
callback(o: Object3D<Event, string> & T) => void

Returns

void

Defined in

webgi/src/viewer/ViewerApp.ts:970


toJSON

toJSON(meta?, pluginFilter?): any

Serialize all the viewer and plugin settings and versions.

Parameters

NameTypeDescription
meta?anyThe meta object.
pluginFilter?string[]List of PluginType to include.

Returns

any

  • Serializable JSON object.

Implementation of

IViewerApp.toJSON

Defined in

webgi/src/viewer/ViewerApp.ts:980


fromJSON

fromJSON(data, meta?): ViewerApp

Deserialize all the viewer and plugin settings.

Parameters

NameTypeDescription
dataanyThe serialized JSON object retured from {@see toJSON}.
meta?anyThe meta object

Returns

ViewerApp

Implementation of

IViewerApp.fromJSON

Defined in

webgi/src/viewer/ViewerApp.ts:1005


load

load<T>(obj, options?): Promise<undefined | T>

Add an object/model/material/viewer-config/plugin-preset/... to the viewer scene from url or an IAsset object. Same as {@link AssetManager.addAssetSingle}

Type parameters

NameType
Tany

Parameters

NameType
objnull | string | IAsset
options?ImportAddOptions

Returns

Promise<undefined | T>

Defined in

webgi/src/viewer/ViewerApp.ts:1063


setEnvironmentMap

setEnvironmentMap(map, __namedParameters?): Promise<null | ITexture<any> & Texture>

Set the environment map of the scene from url or an IAsset object.

Parameters

NameType
mapundefined | null | string | ITexture<any> | IAsset | Texture
__namedParameters{ forceImport?: boolean ; reimportDisposed?: boolean ; pathOverride?: string ; importedFile?: IFile } & { processImported?: boolean ; forceImporterReprocess?: boolean ; rootPath?: string ; generateMipmaps?: boolean ; _testDataTextureComplete?: boolean } & AddModelOptions & { pseudoCenter?: boolean ; autoCenter?: boolean ; license?: string } & AnyOptions & ImportFileOptions & { setBackground?: boolean }

Returns

Promise<null | ITexture<any> & Texture>

Defined in

webgi/src/viewer/ViewerApp.ts:1073


setBackgroundMap

setBackgroundMap(map, __namedParameters?): Promise<null | ITexture<any> & Texture>

Set the background image of the scene from url or an IAsset object.

Parameters

NameType
mapundefined | null | string | ITexture<any> | IAsset | Texture
__namedParameters{ forceImport?: boolean ; reimportDisposed?: boolean ; pathOverride?: string ; importedFile?: IFile } & { processImported?: boolean ; forceImporterReprocess?: boolean ; rootPath?: string ; generateMipmaps?: boolean ; _testDataTextureComplete?: boolean } & AddModelOptions & { pseudoCenter?: boolean ; autoCenter?: boolean ; license?: string } & AnyOptions & ImportFileOptions & { setBackground?: boolean }

Returns

Promise<null | ITexture<any> & Texture>

Defined in

webgi/src/viewer/ViewerApp.ts:1085


alert

alert(message?): Promise<void>

Parameters

NameType
message?string

Returns

Promise<void>

Implementation of

IViewerApp.alert

Defined in

webgi/src/viewer/ViewerApp.ts:1102


confirm

confirm(message?): Promise<boolean>

Parameters

NameType
message?string

Returns

Promise<boolean>

Implementation of

IViewerApp.confirm

Defined in

webgi/src/viewer/ViewerApp.ts:1103


prompt

prompt(message?, _default?, cancel?): Promise<null | string>

Parameters

NameTypeDefault value
message?stringundefined
_default?stringundefined
cancelbooleantrue

Returns

Promise<null | string>

Implementation of

IViewerApp.prompt

Defined in

webgi/src/viewer/ViewerApp.ts:1104