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.7"

Defined in​

webgi/src/viewer/ViewerApp.ts:123

console​

• console: Console = console

Implementation of​

IViewerApp.console

Defined in​

webgi/src/viewer/ViewerApp.ts:125

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:138

plugins​

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

Implementation of​

IViewerApp.plugins

Defined in​

webgi/src/viewer/ViewerApp.ts:155

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:163

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:189

enabled​

• enabled: boolean = true

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

Defined in​

webgi/src/viewer/ViewerApp.ts:412

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:418

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:431

rendersPerFrame​

• rendersPerFrame: number = 1

Number of times to run composer render. Used in WebVR plugin.

Defined in​

webgi/src/viewer/ViewerApp.ts:437

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:144

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:151

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:169

isAntialiased​

• get isAntialiased(): boolean

Whether using Multisample render targets for rendering.

Returns​

boolean

Implementation of​

IViewerApp.isAntialiased

Defined in​

webgi/src/viewer/ViewerApp.ts:179

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:378

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:533

container​

• get container(): HTMLElement

Get the HTML Element containing the canvas

Returns​

HTMLElement

Implementation of​

IViewerApp.container

Defined in​

webgi/src/viewer/ViewerApp.ts:541

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:553

canvasTexture​

• get canvasTexture(): CanvasTexture

Returns​

CanvasTexture

Defined in​

webgi/src/viewer/ViewerApp.ts:559

renderManager​

• get renderManager(): BaseRenderer

Returns​

BaseRenderer

Defined in​

webgi/src/viewer/ViewerApp.ts:1079

assetManager​

• get assetManager(): undefined | AssetManagerPlugin

Returns​

undefined | AssetManagerPlugin

Defined in​

webgi/src/viewer/ViewerApp.ts:1083

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:199

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:357

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:368

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:387

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:574

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:584

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:588

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:593

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:605

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:643

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:677

addPluginsSync​

▸ addPluginsSync(plugins): Promise<void>

Parameters​

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

Returns​

Promise<void>

Defined in​

webgi/src/viewer/ViewerApp.ts:682

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:692

removePluginSync​

▸ removePluginSync(p, dispose?): void

Parameters​

NameTypeDefault value
pIViewerPluginSync<IViewerApp>undefined
disposebooleantrue

Returns​

void

Defined in​

webgi/src/viewer/ViewerApp.ts:702

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:717

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:736

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:791

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:823

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:835

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:871

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:886

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:899

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:922

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:935

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:942

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:950

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:966

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:980

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:1000

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:1010

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:1035

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:1093

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:1103

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:1115

alert​

▸ alert(message?): Promise<void>

Parameters​

NameType
message?string

Returns​

Promise<void>

Implementation of​

IViewerApp.alert

Defined in​

webgi/src/viewer/ViewerApp.ts:1132

confirm​

▸ confirm(message?): Promise<boolean>

Parameters​

NameType
message?string

Returns​

Promise<boolean>

Implementation of​

IViewerApp.confirm

Defined in​

webgi/src/viewer/ViewerApp.ts:1133

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:1134