ThreePipe
    Preparing search index...

    Class ThreeViewer

    Three Viewer

    The ThreeViewer is the main class in the framework to manage a scene, render and add plugins to it.

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    assetManager debug deleteImportedViewerConfigOnLoad deleteImportedViewerConfigOnLoadWait enabled maxFramePerLoop object3dManager plugins renderEnabled renderManager rendersPerFrame renderStats? resizeObserver serializePluginsIgnored timeline type uiConfig ConfigTypeSlug Console Dialog VERSION ViewerDebugging

    Accessors

    canvas canvasTexture console container dialog materialManager renderer scene

    Methods

    _animationLoop addPlugin addPluginListener addPlugins addPluginsSync addPluginSync addSceneObject deserializePlugins dispatchEvent dispose doOnce export exportBlob exportConfig exportPluginConfig exportPluginsConfig exportScene fitToView forPlugin fromJSON getManager getOrAddPlugin getOrAddPluginSync getPlugin getPluginByType getScreenshotBlob getScreenshotDataUrl import importConfig importPluginConfig load loadConfigResources removePlugin removePluginListener removePluginSync resize serializePlugins setBackgroundMap setDirty setEnvironmentMap setRenderSize setSize toJSON traverseSceneObjects

    Constructors

    Properties

    assetManager: AssetManager
    debug: boolean
    deleteImportedViewerConfigOnLoad: boolean = true
    deleteImportedViewerConfigOnLoadWait: number = 2000
    enabled: boolean = true

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

    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

    object3dManager: Object3DManager
    plugins: Record<string, IViewerPlugin> = {}
    renderEnabled: boolean = true

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

    renderManager: ViewerRenderManager
    rendersPerFrame: number = 1

    Number of times to run composer render. If set to more than 1, preRender and postRender events will also be called multiple times.

    renderStats?: GLStatsJS

    Helper to track and visualize rendering performance while in debug mode.

    resizeObserver: undefined | ResizeObserver = ...

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

    serializePluginsIgnored: string[] = []

    plugins that are not serialized/deserialized with the viewer from config. useful when loading files exported from the editor, etc (runtime only, not serialized itself)

    timeline: ViewerTimeline = ...

    Main timeline for the viewer.

    It's a WIP, API might change.

    type: "ThreeViewer" = 'ThreeViewer'
    uiConfig: UiObjectConfig
    ConfigTypeSlug: "vjson" = 'vjson'
    Console: IConsoleWrapper = ...
    Dialog: IDialogWrapper = windowDialogWrapper
    VERSION: "0.1.1" = VERSION
    ViewerDebugging: boolean = false

    If any of the viewers are in debug mode, this will be true. This is required for debugging/logging in some cases.

    Accessors

    • get canvas(): HTMLCanvasElement

      Get the HTML Canvas Element where the viewer is rendering

      Returns HTMLCanvasElement

    Methods

    Protected_animationLoop

    • Add a plugin to the viewer.

      Type Parameters

      Parameters

      • plugin: T | Class<T>

        The instance of the plugin to add or the class of the plugin to add.

      • ...args: any[]

        Arguments for the constructor of the plugin, in case a class is passed.

      Returns Promise<T>

      • The plugin added.

    • Parameters

      • type: "add" | "remove"
      • listener: (event: IViewerEvent) => void
      • ...plugins: (undefined | string)[]

      Returns 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, but not the viewer itself, use viewer.scene.disposeSceneModels()

      Parameters

      • clear: boolean = true

      Returns void

    • Type Parameters

      • TRet

      Parameters

      • event:
            | "preRender"
            | "postRender"
            | "preFrame"
            | "postFrame"
            | "dispose"
            | "*"
            | "update"
            | "addPlugin"
            | "removePlugin"
            | "renderEnabled"
            | "renderDisabled"
            | "renderError"
      • Optionalfunc: (...args: any[]) => TRet

      Returns Promise<undefined | TRet>

    • Uses the FileTransferPlugin to export a Blob/File. 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.

      Parameters

      • blob: File | Blob

        The blob or file to export/download

      • Optionalname: string

        name of the file, if not provided, the name of the file is used if it's a file.

      Returns Promise<void>

    • Serialize all the viewer and plugin settings.

      Parameters

      • binary: boolean = false

        Indicate that the output will be converted and saved as binary data. (default: false)

      • OptionalpluginFilter: string[]

        List of PluginType to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.

      Returns ISerializedViewerConfig

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

      Type Parameters

      Parameters

      • type: string | Class<T>

        The class of the plugin to get, or the string type of the plugin to get which is in the static PluginType property of the plugin

      Returns undefined | T

      • The plugin of the specified type.

    • Returns a blob with the screenshot of the canvas. If CanvasSnapshotPlugin is added, it will be used, otherwise canvas.toBlob will be used directly.

      Parameters

      • __namedParameters: { mimeType?: string; quality?: number } = {}

      Returns Promise<undefined | null | Blob>

    • Parameters

      • __namedParameters: { mimeType?: string; quality?: number } = {}

      Returns Promise<undefined | null | string>

    • 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

    • Serialize all the plugins and their settings to save or create presets. Used in toJSON.

      Parameters

      • meta: SerializationMetaType

        The meta object.

      • Optionalfilter: string[]

        List of PluginType for the to include. If empty, no plugins will be serialized. If undefined, all plugins will be serialized.

      Returns any[]

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

      This also triggers the 'update' event on the viewer. Note - update event might be triggered multiple times in a single frame, use preFrame or preRender events to get notified only once per frame.

      Parameters

      • Optionalsource: any

        The source of the dirty event. like plugin or 3d object

      • Optionalevent: Event<string, unknown>

        The event that triggered the dirty event.

      Returns void

    • 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

      Check the example for more details - https://threepipe.org/examples/#viewer-render-size/

      Parameters

      • size: { height: number; width: number }

        The size to set the render to. The canvas will render to this size.

      • mode: "contain" | "cover" | "fill" | "scale-down" | "none" = 'contain'

        'contain', 'cover', 'fill', 'scale-down' or 'none'. Default is 'contain'.

      • devicePixelRatio: number = 1

        typically set to window.devicePixelRatio, or Math.min(1.5, window.devicePixelRatio) for performance. Use this only when size is derived from dom elements.

      • OptionalcontainerSize: { height: number; width: number }

        (optional) The size of the container, if not passed, the bounding client rect of the container is used.

      Returns void

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

      Parameters

      • Optionalsize: { height?: number; width?: number }

      Returns void

    • Serialize all the viewer and plugin settings and versions.

      Parameters

      • binary: boolean = true

        Indicate that the output will be converted and saved as binary data. (default: true)

      • OptionalpluginFilter: string[]

        List of PluginType to include. If empty, no plugins will be serialized. If undefined/not-passed, all plugins will be serialized.

      Returns ISerializedViewerConfig

      • Serializable JSON object.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods