Create a viewer instance for using the webgi viewer SDK.
Private Readonly _canvasPrivate Optional _canvasPrivate Readonly _containerPrivate Readonly _defaultPrivate _isPrivate _lastPrivate _lastPrivate _lastPrivate _lastPrivate _needsPrivate _needsPrivate _objectPrivate Readonly _sceneThe Scene attached to the viewer, this cannot be changed.
Private _tempPrivate _tempReadonly assetReadonly debugIf the viewer is enabled. Set this false to disable RAF loop.
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
Readonly pluginsEnable or disable all rendering, Animation loop including any frame/render events won't be fired when this is false.
Readonly renderNumber of times to run composer render. If set to more than 1, preRender and postRender events will also be called multiple times.
Readonly resizeThe ResizeObserver observing the canvas element. Add more elements to this observer to resize viewer on their size change.
Readonly typeStatic Readonly ConfigStatic ConsoleStatic DialogStatic Readonly VERSIONStatic ViewerIf any of the viewers are in debug mode, this will be true. This is required for debugging/logging in some cases.
Get the HTML Canvas Element where the viewer is rendering
Create and get a three.js CanvasTexture from the viewer's canvas.
Get the HTML Element containing the canvas
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
Protected _animationPrivate _onPrivate _onPrivate _renderPrivate _resolvePrivate _setAdd a plugin to the viewer.
Add a plugin to the viewer(sync).
Add multiple plugins to the viewer.
List of plugin instances or classes
Add multiple plugins to the viewer(sync).
List of plugin instances or classes
Add an object to the scene model root. If an imported scene model root is passed, it will be loaded with viewer configuration, unless importConfig is false
Optional options: AddObjectOptionsDeserialize all the plugins and their settings from a preset. Used in fromJSON.
The output of serializePlugins.
Optional meta: SerializationMetaTypeThe meta object.
Disposes the viewer and frees up all resource and events. Do not use the viewer after calling dispose.
viewer.scene.disposeSceneModels()
This function is not fully implemented yet. There might be some memory leaks.Exports an object/mesh/material/texture/render-target/plugin-preset/viewer to a blob. If no object is given, a glb is exported with the current viewer state.
Optional obj: ITexture | ThreeViewer | IMaterial<IMaterialEvent<IMaterialEventTypes>, IMaterialEventTypes> | IObject3D<IObject3DEvent<IObject3DEventTypes>, IObject3DEventTypes> | IRenderTarget | IViewerPlugin<ThreeViewer, boolean>Optional options: ExportFileOptionsUses the FileTransferPlugin to export a blob. If the plugin is not available, it will download the blob. FileTransferPlugin can be configured by other plugins to export the blob to a specific location like local file system, cloud storage, etc.
The blob or file to export/download
Optional name: stringSerialize all the viewer and plugin settings.
Indicate that the output will be converted and saved as binary data. (default: false)
Optional pluginFilter: string[]List of PluginType to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.
Serialize a single plugin settings.
Optional plugin: string | IViewerPlugin<ThreeViewer, boolean> | Class<IViewerPlugin<ThreeViewer, boolean>>Serialize multiple plugin settings.
Optional filter: string[]List of PluginType to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.
Export the scene to a file (default: glb with viewer config) and return a blob
Optional options: ExportFileOptionsOptional selected: Object3D<Event, string>Optional duration: numberOptional ease: "linear" | Easing | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | "bounceOut" | "bounceIn" | "bounceInOut" | "easeInOutSine"Deserialize all the viewer and plugin settings.
The serialized JSON object retured from toJSON.
Optional meta: SerializationMetaTypeThe meta object
use async ThreeViewer.importConfig to import a json/config exported with ThreeViewer.exportConfig or ThreeViewer.toJSON.
use assetManager instead. Gets the Asset manager, contains useful functions for managing, loading and inserting assets.
Get the Plugin by a constructor type or add a new plugin of the specified type if it doesn't exist.
Get the Plugin by a constructor type or add a new plugin to the viewer of the specified type if it doesn't exist(sync).
Get the Plugin by a constructor type or by the string type. Use string type if the plugin is not a dependency and you don't want to bundle the plugin.
Get the Plugin by the string type.
Imports an object/model/material/texture/viewer-config/plugin-preset/... to the viewer scene from url or an IAsset object. Same as AssetImporter.importSingle
Optional options: ImportAddOptionsDeserialize and import all the viewer and plugin settings, exported with exportConfig.
Deserialize and import a single plugin settings. Can also use ThreeViewer.importConfig to import only plugin config.
Optional plugin: IViewerPlugin<ThreeViewer, boolean>Add an object/model/material/viewer-config/plugin-preset/... to the viewer scene from url or an IAsset object. Same as AssetManager.addAssetSingle
Optional options: ImportAddOptionsOptional extraResources: Partial<SerializationResourcesType>Remove a plugin instance or a plugin class. Works similar to ThreeViewer.addPlugin
Remove a plugin instance or a plugin class(sync). Works similar to ThreeViewer.addPluginSync
Serialize all the plugins and their settings to save or create presets. Used in toJSON.
The meta object.
Optional filter: string[]List of PluginType for the to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.
Set the background image of the scene from url or an IAsset object.
Set the viewer to dirty and trigger render of the next frame.
Optional source: anyThe source of the dirty event. like plugin or 3d object
Optional event: EventThe event that triggered the dirty event.
Set the environment map of the scene from url or an IAsset object.
Set the render size of the viewer to fit in the container according to the specified mode, maintaining aspect ratio. Changes the renderScale accordingly. Note: the canvas needs to be centered in the container to work properly, this can be done with the following css on the container:
display: flex;
justify-content: center;
align-items: center;
or in js:
viewer.container.style.display = 'flex';
viewer.container.style.justifyContent = 'center';
viewer.container.style.alignItems = 'center';
Modes: 'contain': The canvas is scaled to fit within the container while maintaining its aspect ratio. The canvas will be fully visible, but there may be empty space around it. 'cover': The canvas is scaled to fill the entire container while maintaining its aspect ratio. Part of the canvas may be clipped to fit the container. 'fill': The canvas is stretched to completely fill the container, ignoring its aspect ratio. 'scale-down': The canvas is scaled down to fit within the container while maintaining its aspect ratio, but it won't be scaled up if it's smaller than the container. 'none': container size is ignored, but devicePixelRatio is used
The size to set the render to. The canvas will render to this size.
'contain', 'cover', 'fill', 'scale-down' or 'none'. Default is 'contain'.
typically set to window.devicePixelRatio, or Math.min(1.5, window.devicePixelRatio) for performance. Use this only when size is derived from dom elements.
Optional containerSize: { (optional) The size of the container, if not passed, the bounding client rect of the container is used.
Set size of the canvas and update the renderer. If no size or width/height is passed, canvas is set to 100% of the container.
See also ThreeViewer.setRenderSize to set the size of the render target by automatically calculating the renderScale and fitting in container.
Note: Apps using this should ideally set max-width: 100% for the canvas in css.
Optional size: { Optional height?: numberOptional width?: numberSerialize all the viewer and plugin settings and versions.
Indicate that the output will be converted and saved as binary data. (default: true)
Optional pluginFilter: string[]List of PluginType to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.
Generated using TypeDoc
Three Viewer
The ThreeViewer is the main class in the framework to manage a scene, render and add plugins to it.