import { HotSpotQuery, Nullable, IDisposable, IColor4Like, IReadonlyObservable, AssetContainer, PickingInfo, Camera, AbstractMesh, AbstractEngine, FrameGraph, LoadAssetContainerOptions, AbstractEngineOptions, EngineOptions, WebGPUEngineOptions } from '@babylonjs/core/index.js'; import { Observable } from '@babylonjs/core/Misc/observable.js'; import { MaterialVariantsController } from '@babylonjs/loaders/glTF/2.0/Extensions/KHR_materials_variants.js'; import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js'; import { Vector3 } from '@babylonjs/core/Maths/math.vector.js'; import { SnapshotRenderingHelper } from '@babylonjs/core/Misc/snapshotRenderingHelper.js'; import { Scene } from '@babylonjs/core/scene.js'; import * as lit from 'lit'; import { LitElement, CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; import { Color4 } from '@babylonjs/core/Maths/math.color.js'; import * as lit_html from 'lit-html'; /** * Flags for selectively resetting parts of the viewer state. */ type ResetFlag = "source" | "environment" | "camera" | "animation" | "post-processing" | "material-variant" | "shadow"; declare const shadowQualityOptions: readonly ["none", "normal", "high"]; /** * Shadow quality levels. */ type ShadowQuality = (typeof shadowQualityOptions)[number]; declare const toneMappingOptions: readonly ["none", "standard", "aces", "neutral"]; /** * Tone mapping modes. */ type ToneMapping = (typeof toneMappingOptions)[number]; declare const ssaoOptions: readonly ["enabled", "disabled", "auto"]; /** * Screen-space ambient occlusion options. */ type SSAOOptions = (typeof ssaoOptions)[number]; /** * Camera orbit as [alpha, beta, radius]. */ type CameraOrbit = [alpha: number, beta: number, radius: number]; /** * Camera target as [x, y, z]. */ type CameraTarget = [x: number, y: number, z: number]; /** * Camera auto-orbit configuration. */ type CameraAutoOrbit = { /** * Whether the camera should automatically orbit around the model when idle. */ enabled: boolean; /** * The speed at which the camera orbits around the model when idle. */ speed: number; /** * The delay in milliseconds before the camera starts orbiting around the model when idle. */ delay: number; }; /** * Environment configuration parameters. */ type EnvironmentParams = { /** * The intensity of the environment lighting. */ intensity: number; /** * The blur applied to the environment lighting. */ blur: number; /** * The rotation of the environment lighting in radians. */ rotation: number; }; /** * Shadow configuration parameters. */ type ShadowParams = { /** * The quality of shadow being used. */ quality: ShadowQuality; }; /** * Post-processing configuration. */ type PostProcessing = { /** * The tone mapping to use for rendering the scene. */ toneMapping: ToneMapping; /** * The contrast applied to the scene. */ contrast: number; /** * The exposure applied to the scene. */ exposure: number; /** * Whether to enable screen space ambient occlusion (SSAO). */ ssao: SSAOOptions; }; /** * Options for controlling which parts of the environment to update. */ type EnvironmentOptions = Partial>; /** * Options for loading an environment. */ type LoadEnvironmentOptions = EnvironmentOptions & Partial>; /** * @internal `LoadEnvironmentOptions` after the base class has resolved the optional `lighting` and * `skybox` flags to definite booleans (defaults to `true` for both when omitted, otherwise honors the * caller's choice). Engine-specific extras such as `extension` are forwarded as-is. Passed to the * subclass `_loadEnvironmentImpl` so it doesn't repeat the default-resolution logic. */ type ResolvedLoadEnvironmentOptions = Omit & { readonly lighting: boolean; readonly skybox: boolean; }; /** * A hot spot query specifying either a surface point or a fixed world position. */ type ViewerHotSpotQuery = ({ /** * The type of the hot spot. */ type: "surface"; /** * The index of the mesh within the loaded model. */ meshIndex: number; } & HotSpotQuery) | { /** * The type of the hot spot. */ type: "world"; /** * The fixed world space position of the hot spot. */ position: [x: number, y: number, z: number]; /** * The fixed world space normal of the hot spot. */ normal: [x: number, y: number, z: number]; }; /** * A hot spot definition with an optional camera pose. */ type HotSpot = ViewerHotSpotQuery & { /** * An optional camera pose to associate with the hotspot. */ cameraOrbit?: CameraOrbit; }; /** * Provides the result of a hot spot query. */ declare class ViewerHotSpotResult { /** * 2D canvas position in pixels. */ readonly screenPosition: [x: number, y: number]; /** * 3D world coordinates. */ readonly worldPosition: [x: number, y: number, z: number]; /** * Visibility range is [-1..1]. A value of 0 means camera eye is on the plane. */ visibility: number; } /** * Bounding information for a model. */ type ViewerBoundingInfo = { /** * The minimum and maximum extents of the model. */ extents: Readonly<{ /** * The minimum extent of the model. */ readonly min: readonly [x: number, y: number, z: number]; /** * The maximum extent of the model. */ readonly max: readonly [x: number, y: number, z: number]; }>; /** * The size of the model. */ readonly size: readonly [x: number, y: number, z: number]; /** * The center of the model. */ readonly center: readonly [x: number, y: number, z: number]; }; /** * Backend-agnostic options for loading a model. * @remarks * The full Viewer accepts the wider LoadAssetContainerOptions from core. * This type captures the subset that both backends support. */ type ViewerLoadModelOptions = Partial>; /** * Backend-agnostic options shared by all viewer implementations. */ type ViewerBaseOptions = Partial<{ /** * The default clear color of the scene. */ clearColor: [r: number, g: number, b: number, a?: number]; /** * When enabled, rendering will be suspended when no scene state driven by the Viewer has changed. * This can reduce resource CPU/GPU pressure when the scene is static. * Enabled by default. */ autoSuspendRendering: boolean; /** * The default source model to load into the viewer. */ source: string; /** * The file extension to use for determining the loader plugin for the default source model (e.g. ".glb", ".obj"). * @remarks * If not set, the extension is inferred from the source URL when possible. This is needed for sources whose * extension cannot be inferred from the URL (e.g. data URLs or extension-less URLs). */ pluginExtension: string; /** * The default environment to load into the viewer for lighting (IBL). */ environmentLighting: string; /** * The default environment to load into the viewer for the skybox. */ environmentSkybox: string; /** * The default environment configuration. */ environmentConfig: Partial; /** * The default camera orbit. * @remarks The default camera orbit is restored when a new model is loaded. */ cameraOrbit: Partial; /** * The default camera target. * @remarks The default camera target is restored when a new model is loaded. */ cameraTarget: Partial; /** * Automatically rotates a 3D model or scene without requiring user interaction. * @remarks The default camera auto orbit is restored when a new model is loaded. */ cameraAutoOrbit: Partial; /** * Whether to play the default animation immediately after loading. * @remarks The default animation auto play is restored when a new model is loaded. */ animationAutoPlay: boolean; /** * The default speed of the animation. * @remarks The default animation speed is restored when a new model is loaded. */ animationSpeed: number; /** * The default selected animation. * @remarks The default selected animation is restored when a new model is loaded. */ selectedAnimation: number; /** * The default post processing configuration. */ postProcessing: Partial; /** * Shadow configuration. */ shadowConfig: Partial; /** * The default selected material variant. * @remarks The default material variant is restored when a new model is loaded. */ selectedMaterialVariant: string; /** * The default hotspots. */ hotSpots: Record; /** * Boolean indicating if the scene must use right-handed coordinates system. */ useRightHandedSystem: boolean; /** * If true, load glTF files using the OpenPBR material instead of the default PBR material. * @experimental */ useOpenPBR: boolean; /** * Called when a fatal error occurs that prevents the viewer from functioning. */ onFaulted: (error: Error) => void; }>; /** * The subset of the Viewer API that ViewerElementBase depends on. * Both the full Babylon.js Viewer and ViewerLite implement this contract. */ interface IViewer extends IDisposable { /** * Fired when the environment has changed. */ readonly onEnvironmentChanged: IReadonlyObservable; /** * Fired when the environment configuration has changed. */ readonly onEnvironmentConfigurationChanged: IReadonlyObservable; /** * Fired when an error occurs while loading the environment. */ readonly onEnvironmentError: IReadonlyObservable; /** * Fired when the shadows configuration changes. */ readonly onShadowsConfigurationChanged: IReadonlyObservable; /** * Fired when the post processing state changes. */ readonly onPostProcessingChanged: IReadonlyObservable; /** * Fired when a model is loaded into the viewer (or unloaded from the viewer). */ readonly onModelChanged: IReadonlyObservable>; /** * Fired when an error occurs while loading a model. */ readonly onModelError: IReadonlyObservable; /** * Fired when progress changes on loading activity. */ readonly onLoadingProgressChanged: IReadonlyObservable; /** * Fired when the camera auto orbit state changes. */ readonly onCameraAutoOrbitChanged: IReadonlyObservable; /** * Fired when the selected animation changes. */ readonly onSelectedAnimationChanged: IReadonlyObservable; /** * Fired when the animation speed changes. */ readonly onAnimationSpeedChanged: IReadonlyObservable; /** * Fired when the selected animation is playing or paused. */ readonly onIsAnimationPlayingChanged: IReadonlyObservable; /** * Fired when the current point on the selected animation timeline changes. */ readonly onAnimationProgressChanged: IReadonlyObservable; /** * Fired when the selected material variant changes. */ readonly onSelectedMaterialVariantChanged: IReadonlyObservable; /** * Fired when the hot spots object changes to a complete new object instance. */ readonly onHotSpotsChanged: IReadonlyObservable; /** * Fired when the cameras as hot spots property changes. */ readonly onCamerasAsHotSpotsChanged: IReadonlyObservable; /** * Fired after each frame is rendered. */ readonly onAfterRenderObservable: IReadonlyObservable; /** * Fired when the clear color changes. */ readonly onClearColorChanged: IReadonlyObservable; /** * Gets or sets the clear color (background color) of the viewer. */ clearColor: IColor4Like; /** * Gets the camera auto-orbit configuration. */ get cameraAutoOrbit(): Readonly; /** * Sets the camera auto-orbit configuration. Only specified fields are updated. */ set cameraAutoOrbit(value: Partial>); /** * Resets the camera to its default state. * @param reframe If true, reframes the camera to fit the model. If undefined, automatically determined. */ resetCamera(reframe?: boolean): void; /** * Updates the camera pose. * @param pose The new pose of the camera. Any unspecified values are left unchanged. */ updateCamera(pose: { alpha?: number; beta?: number; radius?: number; targetX?: number; targetY?: number; targetZ?: number; }): void; /** * Gets the environment configuration. */ get environmentConfig(): Readonly; /** * Sets the environment configuration. Only specified fields are updated. */ set environmentConfig(value: Partial>); /** * Loads an environment from the specified URL. * @param url The URL of the environment to load. * @param options The options for loading the environment. * @param abortSignal An optional signal that can be used to abort the load. */ loadEnvironment(url: string, options?: LoadEnvironmentOptions, abortSignal?: AbortSignal): Promise; /** * Resets the environment to its default state. * @param options The options to use when resetting the environment. * @param abortSignal An optional signal that can be used to abort the reset. */ resetEnvironment(options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise; /** * Gets the post-processing configuration. */ get postProcessing(): Readonly; /** * Sets the post-processing configuration. Only specified fields are updated. */ set postProcessing(value: Partial>); /** * Gets the current shadow configuration. */ readonly shadowConfig: Readonly; /** * Updates the shadow configuration. * @param value The new shadow configuration. * @param abortSignal Optional signal that can be used to abort the update. */ updateShadows(value: Partial>, abortSignal?: AbortSignal): Promise; /** * Loads a 3D model from the specified source. * @param source The source of the model to load. * @param options The options for loading the model. * @param abortSignal An optional signal that can be used to abort the load. */ loadModel(source: string | File | ArrayBufferView, options?: ViewerLoadModelOptions, abortSignal?: AbortSignal): Promise; /** * Unloads the current 3D model if one is loaded. * @param abortSignal An optional signal that can be used to abort the reset. */ resetModel(abortSignal?: AbortSignal): Promise; /** * The list of animation names for the currently loaded model. */ readonly animations: readonly string[]; /** * Gets or sets the index of the selected animation. */ selectedAnimation: number; /** * Gets or sets the speed scale at which animations are played. */ animationSpeed: number; /** * True if an animation is currently playing. */ readonly isAnimationPlaying: boolean; /** * Gets or sets the current point on the selected animation timeline, normalized between 0 and 1. */ animationProgress: number; /** * Toggles between playing and pausing the selected animation. */ toggleAnimation(): void; /** * Plays the selected animation. */ playAnimation(): void; /** * Pauses the selected animation. */ pauseAnimation(): Promise; /** * The list of material variant names for the currently loaded model. */ readonly materialVariants: readonly string[]; /** * Gets or sets the selected material variant. */ selectedMaterialVariant: Nullable; /** * Gets or sets the hot spots configuration. */ hotSpots: Record; /** * Gets or sets whether cameras embedded in the model should be exposed as hot spots. */ camerasAsHotSpots: boolean; /** * Queries a named hot spot and returns its screen and world positions. * @param name The name of the hot spot to query. * @param result The result object to populate. * @returns True if the hot spot was found. */ queryHotSpot(name: string, result: ViewerHotSpotResult): boolean; /** * Updates the camera to focus on a named hotspot. * @param name The name of the hotspot to focus on. * @returns True if the hotspot was found and the camera was updated. */ focusHotSpot(name: string): boolean; /** * True if a model is currently loaded. */ readonly isModelLoaded: boolean; /** * The current loading progress. False when not loading, true when loading with indeterminate progress, or a number between 0 and 1. */ readonly loadingProgress: boolean | number; /** * Resets the viewer to its initial state based on the options passed in to the constructor. * @param flags The flags that specify which parts of the viewer to reset. If no flags are provided, all parts will be reset. */ reset(...flags: ResetFlag[]): void; /** * Disposes the viewer and releases all resources. */ dispose(): void; } /** * Common base for the full Babylon.js {@link Viewer} and the lite Viewer. * * Encapsulates the pieces that are identical between both engine backends: * - The 18 public observables exposed by the viewer surface area * - In-flight load operation tracking (used to compute aggregate `loadingProgress`) * - The `_throwIfDisposedOrAborted` helper used at the start of every async operation * - The disposed flag and observable teardown in `dispose()` * * Subclasses are responsible for everything engine-specific (scene/engine creation, * model + environment loading orchestration, camera, post-processing, shadows, etc.) * and for declaring `implements IViewer` themselves so the public API contract is * verified at the leaf class level. */ declare abstract class ViewerBase { /** * Fired when the environment has changed. */ readonly onEnvironmentChanged: Observable; /** * Fired when the environment configuration has changed. */ readonly onEnvironmentConfigurationChanged: Observable; /** * Fired when an error occurs while loading the environment. */ readonly onEnvironmentError: Observable; /** * Fired when the shadows configuration changes. */ readonly onShadowsConfigurationChanged: Observable; /** * Fired when the post processing state changes. */ readonly onPostProcessingChanged: Observable; /** * Fired when a model is loaded into the viewer (or unloaded from the viewer). * @remarks * The event argument is the source that was loaded, or null if no model is loaded. */ readonly onModelChanged: Observable>>; /** * Fired when an error occurs while loading a model. */ readonly onModelError: Observable; /** * Fired when progress changes on loading activity. */ readonly onLoadingProgressChanged: Observable; /** * Fired when the camera auto orbit state changes. */ readonly onCameraAutoOrbitChanged: Observable; /** * Fired when the selected animation changes. */ readonly onSelectedAnimationChanged: Observable; /** * Fired when the animation speed changes. */ readonly onAnimationSpeedChanged: Observable; /** * Fired when the selected animation is playing or paused. */ readonly onIsAnimationPlayingChanged: Observable; /** * Fired when the current point on the selected animation timeline changes. */ readonly onAnimationProgressChanged: Observable; /** * Fired when the selected material variant changes. */ readonly onSelectedMaterialVariantChanged: Observable; /** * Fired when the hot spots object changes to a complete new object instance. */ readonly onHotSpotsChanged: Observable; /** * Fired when the cameras as hot spots property changes. */ readonly onCamerasAsHotSpotsChanged: Observable; /** * Fired after each frame is rendered. */ readonly onAfterRenderObservable: Observable; /** * Fired when the clear color changes. */ readonly onClearColorChanged: Observable; /** * @internal Tracks in-flight load operations (model + environment + shadows) so that * `loadingProgress` can return either an aggregate progress number, `true` (indeterminate), * or `false` (no operations in flight). */ protected readonly _loadOperations: Set; }>>; /** @internal True after `dispose()` has been called. */ protected _isDisposed: boolean; /** * @internal Backend-agnostic viewer options stored at construction time. Subclasses declare this * with their own (narrower) options type that extends {@link ViewerBaseOptions} and assign it from * their own constructor (typically via a parameter property). */ protected abstract readonly _options?: Readonly; /** * The current loading progress. False when no load is in flight, true when at least one * load is in flight with indeterminate progress, or a number between 0 and 1 representing * the average of all in-flight loads' progress. */ get loadingProgress(): boolean | number; /** * Begin tracking a new load operation. Subclasses call this at the start of an async load * and dispose the returned handle when it completes (or fails). The handle exposes a * `progress` setter that, when assigned, fires `onLoadingProgressChanged`. * @returns A handle that can be disposed when the operation completes; the `progress` setter * updates the aggregate `loadingProgress` as the operation runs. */ protected _beginLoadOperation(): IDisposable & { progress: Nullable; }; /** * @internal Throws if the viewer has been disposed or any of the supplied abort signals * are aborted. Used at the start of every async operation to bail out early. * @param abortSignals Optional abort signals to check. */ protected _throwIfDisposedOrAborted(...abortSignals: (Nullable | undefined)[]): void; /** Lock guarding lighting-side environment loads. */ private readonly _loadEnvironmentLightingLock; /** Abort controller for the currently in-flight lighting-side load (null when none). */ private _loadEnvironmentLightingAbortController; /** Lock guarding skybox-side environment loads. */ private readonly _loadEnvironmentSkyboxLock; /** Abort controller for the currently in-flight skybox-side load (null when none). */ private _loadEnvironmentSkyboxAbortController; /** * @internal The abort signal of the currently in-flight lighting-side load, or `undefined` if * none. Subclasses can use this in `_throwIfDisposedOrAborted` to bail out of dependent async * work (shadows, post-processing, etc.) when the user starts a new lighting load. */ protected get _loadEnvironmentLightingAbortSignal(): AbortSignal | undefined; /** * @internal The abort signal of the currently in-flight skybox-side load, or `undefined` if * none. Subclasses can use this in `_throwIfDisposedOrAborted` to bail out of dependent async * work (shadows, post-processing, etc.) when the user starts a new skybox load. */ protected get _loadEnvironmentSkyboxAbortSignal(): AbortSignal | undefined; /** * Loads an environment from the specified URL. The lighting and skybox sides have * independent locks and abort controllers so concurrent requests for one side don't * cancel an in-flight load for the other. * @param url The URL of the environment to load. * @param options Selects which sides to update (defaults to both) and forwards engine-specific extras. * @param abortSignal Optional signal that can be used to abort the load externally. * @returns A promise that resolves when the environment has finished loading. */ loadEnvironment(url: string, options?: LoadEnvironmentOptions, abortSignal?: AbortSignal): Promise; /** * Removes the loaded environment. By default removes both lighting and skybox; pass `options` * to remove only one side. Subclasses (notably the full Viewer) may override to add backend-specific * fallback behavior such as substituting a default environment for lighting when the scene contains * PBR materials. * @param options Selects which sides to remove (defaults to both). * @param abortSignal Optional signal that can be used to abort the operation externally. * @returns A promise that resolves when the environment has finished resetting. */ resetEnvironment(options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise; /** * @internal Internal helper exposing the dual-lock orchestration with a nullable URL. * Used by the public `loadEnvironment` (with a string URL) and by subclass `resetEnvironment` * implementations (which pass `undefined` to clear or `"auto"` to load defaults). * * Subclasses should NOT override this — override the abstract `_loadEnvironmentImpl` instead. */ protected _updateEnvironment(url: Nullable, options?: LoadEnvironmentOptions, abortSignal?: AbortSignal): Promise; /** * @internal Engine-specific environment loading. Subclasses implement this with their actual * texture loading / scene mutation logic. The base class handles only the surrounding lock + * abort-prev orchestration and the composite abort signal; everything else (`onEnvironmentChanged` / * `onEnvironmentError` notifications, snapshot-helper bracketing, etc.) is the impl's responsibility. * * Implementations should: * - Throw on failure. They should fire `onEnvironmentError` themselves before throwing if they * want external observers to be notified. * - Fire `onEnvironmentChanged` on success. * - Periodically re-check abort by calling `throwIfAborted(abortSignal, compositeAbortSignal)` * at safe points within the load (e.g. after long-running awaits). * * @param url Trimmed URL string, `undefined` (caller asked to clear), or `null`. * @param options Resolved options — `lighting` and `skybox` are guaranteed booleans indicating * which sides the caller is updating; engine-specific extras (e.g. `extension`) are forwarded as-is. * @param abortSignal The caller's external abort signal (or `undefined`). * @param compositeAbortSignal Signal that fires when ALL relevant internal load operations have aborted. */ protected abstract _loadEnvironmentImpl(url: Nullable, options: ResolvedLoadEnvironmentOptions, abortSignal: AbortSignal | undefined, compositeAbortSignal: AbortSignal): Promise; /** @internal Current environment intensity. Initialized from options in subclass constructors. */ protected _environmentIntensity: number; /** @internal Current environment skybox blur. Initialized from options in subclass constructors. */ protected _environmentBlur: number; /** @internal Current environment rotation in radians. Initialized from options in subclass constructors. */ protected _environmentRotation: number; get environmentConfig(): Readonly; set environmentConfig(value: Partial>); /** * @internal Push the current `_environmentIntensity` value into the engine's environment state. * Called by the public `environmentConfig` setter only when the value changes. */ protected abstract _applyEnvironmentIntensity(): void; /** * @internal Push the current `_environmentBlur` value into the engine's environment state. * Called by the public `environmentConfig` setter only when the value changes. */ protected abstract _applyEnvironmentBlur(): void; /** * @internal Push the current `_environmentRotation` value into the engine's environment state. * Called by the public `environmentConfig` setter only when the value changes. */ protected abstract _applyEnvironmentRotation(): void; /** @internal Initialized from options in subclass constructors. */ protected _autoOrbitEnabled: boolean; /** @internal Initialized from options in subclass constructors. */ protected _autoOrbitSpeed: number; /** @internal Initialized from options in subclass constructors. */ protected _autoOrbitDelay: number; get cameraAutoOrbit(): Readonly; set cameraAutoOrbit(value: Partial>); /** * @internal Push the current `_autoOrbitEnabled` value into engine state. * Called by the public `cameraAutoOrbit` setter only when the value changes. */ protected abstract _applyCameraAutoOrbitEnabled(): void; /** * @internal Push the current `_autoOrbitSpeed` value into engine state. * Called by the public `cameraAutoOrbit` setter only when the value changes. */ protected abstract _applyCameraAutoOrbitSpeed(): void; /** * @internal Push the current `_autoOrbitDelay` value into engine state. * Called by the public `cameraAutoOrbit` setter only when the value changes. */ protected abstract _applyCameraAutoOrbitDelay(): void; /** * @internal The current scene clear color, stored as a stable mutable record so consumers * holding a reference returned by the `clearColor` getter see updates from the setter and from * `reset("environment")`. The setter mutates this object in-place rather than replacing it. */ protected readonly _clearColor: IColor4Like; /** * The viewer clear color (e.g. background). */ get clearColor(): Readonly; set clearColor(value: Readonly); /** * @internal Push the current `_clearColor` value into the engine's scene state. Called by the * public `clearColor` setter; subclasses may also call this directly during construction to sync * engine state to the initial field values. */ protected abstract _applyClearColor(): void; /** @internal Pure state — no engine state. Subclasses initialize via the public `hotSpots` setter in their constructor body. */ private _hotSpots; /** * The set of defined hotspots. */ get hotSpots(): Record; set hotSpots(value: Record); /** Lock guarding model loads (and resets). */ private readonly _loadModelLock; /** Abort controller for the currently in-flight model load (null when none). */ private _loadModelAbortController; /** * @internal The abort signal of the currently in-flight model load, or `undefined` if none. * Subclasses can use this in `_throwIfDisposedOrAborted` to bail out of dependent async work * (shadows, environment fallback, etc.) when the user starts a new model load. */ protected get _loadModelAbortSignal(): AbortSignal | undefined; /** * Loads a 3D model from the specified source. * @param source The source of the model to load. * @param options Engine-specific options for loading the model. * @param abortSignal Optional signal that can be used to abort the load externally. * @returns A promise that resolves when the model has finished loading. */ loadModel(source: string | File | ArrayBufferView, options?: ViewerLoadModelOptions, abortSignal?: AbortSignal): Promise; /** * Unloads the current 3D model if one is loaded. * @param abortSignal Optional signal that can be used to abort the reset. * @returns A promise that resolves when the current model has been unloaded. */ resetModel(abortSignal?: AbortSignal): Promise; /** * @internal Internal helper exposing the model load orchestration with `source: undefined` meaning * "unload the current model". Subclasses should NOT override this — override `_loadModelImpl` instead. */ protected _updateModel(source: string | File | ArrayBufferView | undefined, options?: ViewerLoadModelOptions, abortSignal?: AbortSignal): Promise; /** * @internal Engine-specific model loading. Subclasses implement this with their actual model * loading logic. The base class handles only the surrounding lock + abort-prev orchestration; * everything else (load-operation progress tracking, `onModelChanged` / `onModelError` * notifications, snapshot-helper bracketing) is the impl's responsibility. * * Implementations should: * - Throw on failure. They should fire `onModelError` themselves before throwing if they want * external observers to be notified. * - Fire `onModelChanged` on success. * - Manage their own `_beginLoadOperation` / dispose pair if they want to contribute to * `loadingProgress`. * - Periodically re-check abort by calling `throwIfAborted(abortSignal, internalAbortSignal)` * at safe points within the load (e.g. after long-running awaits). * - Treat `source === undefined` as "unload the current model" — this is how `resetModel` flows * through. They should still fire `onModelChanged(null)` so consumers see the unload. * * @param source Source URL/File/ArrayBufferView, or `undefined` to unload the current model. * @param options Caller's options (or undefined). May contain engine-specific extras. * @param abortSignal The caller's external abort signal (or `undefined`). * @param internalAbortSignal Signal that fires when a NEWER model load supersedes this one. */ protected abstract _loadModelImpl(source: string | File | ArrayBufferView | undefined, options: ViewerLoadModelOptions | undefined, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; /** * @internal Optional post-lock hook invoked AFTER the model load lock is released, allowing * subclasses to do follow-up work that needs other locks (e.g. environment fallback). The base * skips this hook if the load was superseded by a newer one before we got here. * * Implementations that await additional work should re-check `internalAbortSignal.aborted` * after each await to avoid acting on stale state (a newer load may have started during the * await window). * * Default: no-op. */ protected _afterLoadModel(source: string | File | ArrayBufferView | undefined, options: ViewerLoadModelOptions | undefined, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; /** Lock guarding shadow updates. */ private readonly _updateShadowsLock; /** Abort controller for the currently in-flight shadow update (null when none). */ private _shadowsAbortController; /** * @internal The abort signal of the currently in-flight shadow update, or `undefined` if none. * Subclasses can use this in `_throwIfDisposedOrAborted` to bail out of dependent async work * when the user starts a new shadow update. */ protected get _shadowsAbortSignal(): AbortSignal | undefined; /** * @internal The currently committed shadow quality. Subclasses initialize this from their * options in their constructor and read it in their `_loadModelImpl` etc. The base class * commits a new value here only after `_updateShadowsImpl` succeeds, so failed/aborted * shadow updates don't leave this field out of sync with engine state. */ protected _shadowQuality: ShadowQuality; /** @internal */ abstract get selectedMaterialVariant(): Nullable; /** @internal */ abstract set selectedMaterialVariant(value: Nullable); /** * Gets the current shadow configuration. */ get shadowConfig(): Readonly; /** * Updates the shadow configuration. Skips work if the requested value matches the currently * committed one. Subclasses can override this to validate the requested quality (e.g. throw on * unsupported combinations) before delegating to `super.updateShadows(value, abortSignal)`. * @param value The new shadow configuration. * @param abortSignal Optional signal that can be used to abort the update externally. * @returns A promise that resolves when the shadow update completes. */ updateShadows(value: Partial>, abortSignal?: AbortSignal): Promise; /** * Runs the engine-specific shadow update at the given quality under the shared lock, with * abort-prev semantics. Subclasses should call this (rather than `_updateShadowsImpl` directly) * when they need to re-run the shadow setup (e.g. after a model change or environment change). * The public `updateShadows` also routes through this helper. * @param quality The shadow quality to apply. Defaults to the currently committed quality * (`this._shadowQuality`), which is the right choice for re-running shadow setup without * changing the committed quality. The public `updateShadows` passes a resolved new quality. * @param abortSignal Optional external abort signal. * @returns A promise that resolves when the shadow update completes. */ protected _updateShadows(quality?: ShadowQuality, abortSignal?: AbortSignal): Promise; /** * @internal Engine-specific shadow setup. Subclasses implement this with their actual shadow * generation logic. The base class handles all surrounding orchestration: lock acquisition, * abort-prev semantics, quality resolution, and the success-only commit of `_shadowQuality`. * * Implementations should: * - Throw on failure; the base class propagates the error to the caller without committing the new quality. * - Use `quality` (not `this._shadowQuality`, which still holds the pre-update value) to drive the setup. * - Periodically re-check abort by calling `throwIfAborted(abortSignal, internalAbortSignal)` at safe points. */ protected abstract _updateShadowsImpl(quality: ShadowQuality, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; /** * Disposes the viewer and releases shared resources (observables, disposed flag). * Subclasses MUST override this method to dispose their own engine-specific state * (engine, scene, abort controllers, models, etc.) and call `super.dispose()` last * so observable consumers see the engine-specific notifications before observables clear. * * Subclasses should also early-return if `_isDisposed` is already true. */ dispose(): void; /** * Resets the viewer to its initial state based on the options passed in to the constructor. * @param flags The flags that specify which parts of the viewer to reset. If no flags are provided, all parts will be reset. * - "source": Reset the loaded model. * - "environment": Reset environment related state. * - "shadow": Reset shadow related state. * - "animation": Reset animation related state. * - "camera": Reset camera related state. * - "post-processing": Reset post-processing related state. * - "material-variant": Reset material variant related state. */ reset(...flags: ResetFlag[]): void; /** * @internal * Orchestrates the reset operation in canonical flag order. The {@link interpolate} parameter is * forwarded to per-flag hooks (currently only `_resetCamera`) so internal callers can reset * without camera animation. */ protected _reset(interpolate: boolean, ...flags: ResetFlag[]): void; /** * @internal Resets the loaded model to the source specified at construction (or no model if no source was specified). */ protected _resetModel(): void; /** @internal */ protected abstract _resetEnvironment(): void; /** * @internal Resets the shadow configuration to the value specified at construction. */ protected _resetShadows(): void; /** @internal */ protected abstract _resetAnimation(): void; /** * @internal * @param interpolate If true, animate camera transitions when supported. Subclasses without bounds-based * reframing may ignore this parameter. */ protected abstract _resetCamera(interpolate: boolean): void; /** @internal */ protected abstract _resetPostProcessing(): void; /** * @internal Resets the selected material variant to the value specified at construction (or null if not specified). */ protected _resetMaterialVariant(): void; } type ActivateModelOptions = Partial<{ source: string | File | ArrayBufferView; }>; type LoadModelOptions = ViewerLoadModelOptions & LoadAssetContainerOptions; /** * Generates a HotSpot from a camera by computing its spherical coordinates (alpha, beta, radius) relative to a target point. * * The target point is determined using the camera's forward ray: * - If the ray intersects with a mesh in the model, the intersection point is used as the target. * - If no intersection is found, a fallback target is calculated by projecting the distance * between the camera and the model's center along the camera's forward direction. * * @param model The reference model used to determine the target point. * @param camera The camera from which the HotSpot is generated. * @returns A HotSpot object. */ declare function CreateHotSpotFromCamera(model: Model, camera: Camera): Promise; type ViewerDetails = { /** * Provides access to the Scene managed by the Viewer. */ scene: Scene; /** * Provides access to the Camera managed by the Viewer. */ camera: ArcRotateCamera; /** * Provides access to the currently loaded model. */ model: Nullable; /** * Suspends the render loop. * @returns A token that should be disposed when the request for suspending rendering is no longer needed. */ suspendRendering(): IDisposable; /** * Marks the scene as mutated, which will trigger a render on the next frame (unless rendering is suspended). */ markSceneMutated(): void; /** * Picks the object at the given screen coordinates. * @remarks This function ensures skeletal and morph target animations are up to date before picking, and typically should not be called at high frequency (e.g. every frame, on pointer move, etc.). * @param screenX The x coordinate in screen space. * @param screenY The y coordinate in screen space. * @returns A PickingInfo if an object was picked, otherwise null. */ pick(screenX: number, screenY: number): Promise>; /** * True if the viewer's render loop is currently suspended (not actively rendering). */ readonly isIdle: boolean; }; /** * The options for the Viewer. */ type ViewerOptions = ViewerBaseOptions & Partial<{ /** * Called once when the viewer is initialized and provides viewer details that can be used for advanced customization. */ onInitialized: (details: Readonly) => void; }>; /** * The default options for the Viewer. */ declare const DefaultViewerOptions: { readonly clearColor: [0, 0, 0, 0]; readonly autoSuspendRendering: true; readonly environmentConfig: { readonly intensity: 1; readonly blur: 0.3; readonly rotation: 0; }; readonly environmentLighting: "auto"; readonly environmentSkybox: "none"; readonly cameraAutoOrbit: { readonly enabled: false; readonly delay: 2000; readonly speed: 0.05; }; readonly animationAutoPlay: false; readonly animationSpeed: 1; readonly shadowConfig: { readonly quality: "none"; }; readonly postProcessing: { readonly toneMapping: "neutral"; readonly contrast: 1; readonly exposure: 1; readonly ssao: "auto"; }; readonly useRightHandedSystem: false; readonly useOpenPBR: false; }; type ViewerCameraConfig = { /** * The goal radius of the camera. * @remarks This is the size of the scene bounds (times a factor) */ radius: number; /** * The goal target of the camera. * @remarks Center of the bounds of the scene or 0,0,0 by default */ target: Vector3; /** * The minimum zoom distance of the camera. */ lowerRadiusLimit: number; /** * The maximum zoom distance of the camera. */ upperRadiusLimit: number; /** * The minZ of the camera. */ minZ: number; /** * The maxZ of the camera. */ maxZ: number; }; type Model = IDisposable & { /** * The asset container representing the model. */ readonly assetContainer: AssetContainer; /** * The material variants controller for the model. */ readonly materialVariantsController: Nullable; /** * The current animation. */ selectedAnimation: number; /** * Returns the world position and visibility of a hot spot. */ getHotSpotToRef(query: Readonly, result: ViewerHotSpotResult): boolean; /** * Compute and return the world bounds of the model. * The minimum and maximum extents, the size and the center. * @param animationIndex The index of the animation group to use for computation. If omitted, the current selected animation is used. * @returns The computed bounding info for the model or null if no meshes are present in the asset container. */ getWorldBounds(animationIndex?: number): Nullable; /** * Resets the computed world bounds of the model. * Should be called after the model undergoes transformations. */ resetWorldBounds(): void; /** * Makes the model the current active model in the viewer. * @param options Options for activating the model. */ makeActive(options?: ActivateModelOptions): void; /** * The selected material variant. */ selectedMaterialVariant: Nullable; }; /** * Provides an experience for viewing a single 3D model. * @remarks * The Viewer is not tied to a specific UI framework and can be used with Babylon.js in a browser or with Babylon Native. */ declare class Viewer extends ViewerBase implements IDisposable, IViewer { private readonly _engine; protected readonly _options?: Readonly | undefined; /** * When enabled, the Viewer will emit additional diagnostic logs to the console. */ showDebugLogs: boolean; /** * Gets or sets the clear color (background color) of the viewer. */ /** @internal */ protected _applyClearColor(): void; /** * True if a model is currently loaded. */ get isModelLoaded(): boolean; protected readonly _scene: Scene; protected readonly _camera: ArcRotateCamera; protected readonly _snapshotHelper: Nullable; private _defaultMaterialPromise; private readonly _defaultHardwareScalingLevel; private _lastHardwareScalingLevel; private _renderedLastFrame; private _isIdle; private _sceneOptimizer; private readonly _tempVectors; private readonly _meshDataCache; private readonly _autoRotationBehavior; private readonly _imageProcessingConfigurationObserver; private readonly _beforeRenderObserver; private _renderLoopController; private _loadedModelsBacking; private _activeModelBacking; private _environmentSkyboxMode; private _environmentLightingMode; private _skybox; private _skyboxTexture; private _reflectionTexture; private _light; private _toneMappingEnabled; private _toneMappingType; private _contrast; private _exposure; private _ssaoOption; private _ssaoPipeline; private readonly _autoSuspendRendering; private _sceneMutated; private _suspendRenderCount; private _camerasAsHotSpotsAbortController; private readonly _updateSSAOLock; private _ssaoAbortController; private _activeAnimationObservers; private _animationSpeed; private _camerasAsHotSpots; private readonly _shadowState; private _iblShadowsAnimationObserver; private _objectListFilters; private _objectListModelChangedObserver; /** * Called whenever the filtered object lists managed by an active frame graph are recomputed. * Each entry in the array corresponds to the filter at the same index passed to * {@link _setActiveFrameGraph}. Called once immediately when _setActiveFrameGraph is called, * and again after every model change. Override in a subclass to wire ObjectList input blocks * or perform other per-model setup without managing observer lifetimes manually. * @param _objectLists The filtered lists of meshes corresponding to the filters passed to _setActiveFrameGraph. */ protected _onObjectListsUpdated(_objectLists: ReadonlyArray>): void; constructor(_engine: AbstractEngine, _options?: Readonly | undefined); /** * The camera auto orbit configuration. */ /** @internal */ protected _applyCameraAutoOrbitEnabled(): void; /** @internal */ protected _applyCameraAutoOrbitSpeed(): void; /** @internal */ protected _applyCameraAutoOrbitDelay(): void; /** * Get the current environment configuration. */ /** @internal */ protected _applyEnvironmentBlur(): void; /** @internal */ protected _applyEnvironmentRotation(): void; /** @internal */ protected _applyEnvironmentIntensity(): void; /** * Updates the shadow configuration. * @param value The new shadow configuration. * @param abortSignal Optional signal that can be used to abort the update externally. * @returns A promise that resolves when the shadow update completes. */ updateShadows(value: Partial>, abortSignal?: AbortSignal): Promise; private _updateAutoClear; /** * The post processing configuration. */ get postProcessing(): PostProcessing; set postProcessing(value: Partial>); protected get _loadedModels(): readonly Model[]; protected get _activeModel(): Nullable; private _setActiveModel; private _enableSSAOPipeline; private _disableSSAOPipeline; protected _updateSSAOPipeline(): void; /** * Applies the specified FrameGraph to the scene, or clears the active frame graph when null. * Call this from a derived class after constructing and building a FrameGraph. * * Optionally accepts an array of mesh filter predicates. For each predicate, the viewer * maintains a filtered list of scene meshes and calls {@link _onObjectListsUpdated} with all * lists whenever the active model changes. The method is also called immediately on this call * so the caller can perform initial wiring without a separate code path. * * @param frameGraph The FrameGraph to activate, or null to revert to default rendering. * @param filters Optional array of predicates — one per ObjectList input block to populate. */ protected _setActiveFrameGraph(frameGraph: Nullable, filters?: ReadonlyArray<(mesh: AbstractMesh) => boolean>): void; /** * The list of animation names for the currently loaded model. */ get animations(): readonly string[]; /** * The currently selected animation index. */ get selectedAnimation(): number; set selectedAnimation(value: number); protected _selectAnimation(index: number, interpolateCamera?: boolean): void; /** * True if an animation is currently playing. */ get isAnimationPlaying(): boolean; /** * The speed scale at which animations are played. */ get animationSpeed(): number; set animationSpeed(value: number); /** * The current point on the selected animation timeline, normalized between 0 and 1. */ get animationProgress(): number; set animationProgress(value: number); private get _activeAnimation(); /** * The list of material variant names for the currently loaded model. */ get materialVariants(): readonly string[]; /** * The currently selected material variant. */ get selectedMaterialVariant(): Nullable; set selectedMaterialVariant(value: Nullable); /** * True if scene cameras should be used as hotspots. */ get camerasAsHotSpots(): boolean; set camerasAsHotSpots(value: boolean); /** * Lazily creates (on first use) and returns a viewer-scoped "clay" PBR material used for loaded meshes * that have no material of their own. The material is created in the viewer's scene and is therefore * disposed together with the scene when the viewer is disposed. PBRMaterial is dynamically imported so * that it is only pulled into the bundle when a material-less model is actually loaded. * @returns The default "clay" material. */ private _getDefaultMaterialAsync; protected _loadModel(source: string | File | ArrayBufferView, options?: LoadAssetContainerOptions, abortSignal?: AbortSignal): Promise; /** * Loads a 3D model from the specified source. * @param source The source of the model to load. * @param options Options for loading the model. See {@link LoadModelOptions}. * @param abortSignal Optional signal that can be used to abort the load externally. * @returns A promise that resolves when the model has finished loading. */ loadModel(source: string | File | ArrayBufferView, options?: LoadModelOptions, abortSignal?: AbortSignal): Promise; /** @internal */ protected _loadModelImpl(source: string | File | ArrayBufferView | undefined, options: ViewerLoadModelOptions | undefined, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; /** @internal */ protected _afterLoadModel(source: string | File | ArrayBufferView | undefined, options: ViewerLoadModelOptions | undefined, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; /** @internal */ protected _updateShadowsImpl(quality: ShadowQuality, abortSignal: AbortSignal | undefined, internalAbortSignal: AbortSignal): Promise; private _changeShadowLightIntensity; private _rotateShadowLightWithEnvironment; private _startIblShadowsRenderTime; private _updateEnvShadow; /** * Finds the light direction the environment (IBL). * If the environment changes, it will explicitly trigger the generation of CDF maps. * @param iblCdfGenerator The IblCdfGenerator to use for finding the dominant direction. * @returns A promise that resolves to the dominant direction vector. */ private _findIblDominantDirection; private _updateShadowMap; private _disposeShadows; /** * Resets the environment to its default state. * @param options The options to use when resetting the environment. * @param abortSignal An optional signal that can be used to abort the reset. */ resetEnvironment(options?: EnvironmentOptions, abortSignal?: AbortSignal): Promise; private _setEnvironmentLighting; private _setEnvironmentSkybox; /** @internal */ protected _loadEnvironmentImpl(url: Nullable, options: ResolvedLoadEnvironmentOptions, abortSignal: AbortSignal | undefined, compositeAbortSignal: AbortSignal): Promise; /** * Toggles the play/pause animation state if there is a selected animation. */ toggleAnimation(): void; /** * Plays the selected animation if there is one. */ playAnimation(): void; /** * Pauses the selected animation if there is one. */ pauseAnimation(): Promise; /** * Triggers a single IBL shadows voxelization pass. * If a voxelization is already in progress, a dirty flag is set and a new pass * will automatically run once the current one completes, ensuring the final state * is always rendered regardless of how many requests arrive in the meantime. */ private _triggerIblShadowsVoxelization; /** * Starts the per-frame update loop for IBL shadows while an animation is playing. */ private _startIblShadowsAnimationUpdate; private _stopIblShadowsAnimationUpdate; /** * Resets the camera to its initial pose. * @param reframe If true, the camera will be reframed to fit the model bounds. If false, it will use the default camera pose passed in with the options to the constructor (if present). * If undefined, default to false if other viewer state matches the default state (such as the selected animation), otherwise true. */ resetCamera(reframe?: boolean): void; /** * Updates the camera pose. * @param pose The new pose of the camera. * @remarks Any unspecified values are left unchanged. */ updateCamera(pose: { alpha?: number; beta?: number; radius?: number; targetX?: number; targetY?: number; targetZ?: number; }): void; /** @internal */ protected _resetEnvironment(): void; /** @internal */ protected _resetAnimation(): void; /** @internal */ protected _resetCamera(interpolate: boolean): void; /** @internal */ protected _resetPostProcessing(): void; /** * Disposes of the resources held by the Viewer. */ dispose(): void; /** * Return world and canvas coordinates of an hot spot. * @param query mesh index and surface information to query the hot spot positions. * @param result Query a Hot Spot and does the conversion for Babylon Hot spot to a more generic HotSpotPositions, without Vector types. * @returns true if hotspot found. */ getHotSpotToRef(query: Readonly, result: ViewerHotSpotResult): boolean; protected _getHotSpotToRef(...args: [...([assetContainer: Nullable] | [meshes: Nullable]), query: Readonly, result: ViewerHotSpotResult]): boolean; /** * Get hotspot world and screen values from a named hotspot. * @param name slot of the hot spot. * @param result resulting world and screen positions. * @returns world position, world normal and screen space coordinates. */ queryHotSpot(name: string, result: ViewerHotSpotResult): boolean; /** * Updates the camera to focus on a named hotspot. * @param name The name of the hotspot to focus on. * @returns true if the hotspot was found and the camera was updated, false otherwise. */ focusHotSpot(name: string): boolean; private _queryHotSpot; private _addCameraHotSpot; private _removeCameraHotSpot; private _toggleCamerasAsHotSpots; /** * Creates a world HotSpot from a camera. * @param camera The camera to create a HotSpot from. * @returns A HotSpot created from the camera. */ private _createHotSpotFromCamera; protected get _shouldRender(): boolean; protected _markSceneMutated(): void; protected _suspendRendering(): IDisposable; private _beginRendering; protected _reframeCamera(interpolate?: boolean, models?: readonly Model[]): void; protected _getWorldBounds(models: readonly Model[]): Nullable; protected _getCameraConfig(models: readonly Model[]): ViewerCameraConfig; private _reframeCameraFromBounds; protected _updateLight(): void; private _applyAnimationSpeed; protected _pick(screenX: number, screenY: number): Promise>; protected _startSceneOptimizer(reset?: boolean): void; protected _stopSceneOptimizer(): void; protected _log(message: string): void; } /** * Options for creating a Viewer instance that is bound to an HTML canvas. */ type CanvasViewerOptions = ViewerOptions & { onFaulted?: (error: Error) => void; } & (({ engine?: undefined; } & AbstractEngineOptions) | ({ engine: "WebGL"; } & EngineOptions) | ({ engine: "WebGPU"; } & WebGPUEngineOptions)); /** * Creates a Viewer instance that is bound to an HTML canvas. * @remarks * This function can be shared across multiple UI integrations (e.g. Web Components, React, etc.). * @param canvas The canvas element to bind the Viewer to. * @param options The options to use when creating the Viewer and binding it to the specified canvas. * @returns A Viewer instance that is bound to the specified canvas. */ declare function CreateViewerForCanvas(canvas: HTMLCanvasElement, options: Readonly) => DerivedViewer; }>): Promise; declare function CreateViewerForCanvas(canvas: HTMLCanvasElement, options?: CanvasViewerOptions): Promise; type ResetMode = "auto" | "reframe" | [ResetFlag, ...flags: ResetFlag[]]; interface ViewerElementEventMap extends HTMLElementEventMap { viewerready: Event; viewerrender: Event; environmentchange: Event; environmentconfigurationchange: Event; environmenterror: ErrorEvent; shadowsconfigurationchange: Event; modelchange: CustomEvent>; modelerror: ErrorEvent; loadingprogresschange: Event; selectedanimationchange: Event; animationspeedchange: Event; animationplayingchange: Event; animationprogresschange: Event; selectedmaterialvariantchange: Event; } interface ViewerElementBase { addEventListener(type: K, listener: (this: HTMLElement, ev: ViewerElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: ViewerElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } /** * Abstract base class for viewer custom elements. * Contains all shared UI logic and depends only on IViewer. */ declare abstract class ViewerElementBase extends LitElement { protected readonly _options: Options; private readonly _viewerLock; private _animationSliderResizeObserver; /** @internal */ protected _viewer?: ViewerClass; /** * Creates an instance of a ViewerElementBase subclass. * @param _options The options to use when creating the Viewer. */ protected constructor(_options?: Options); private readonly _propertyBindings; /** @internal */ static get observedAttributes(): string[]; /** @internal */ static styles: CSSResultGroup; /** * Get hotspot world and screen values from a named hotspot * @param name slot of the hot spot * @param result resulting world and screen positions * @returns world position, world normal and screen space coordinates */ queryHotSpot(name: string, result: ViewerHotSpotResult): boolean; /** * Updates the camera to focus on a named hotspot. * @param name The name of the hotspot to focus on. * @returns true if the hotspot was found and the camera was updated, false otherwise. */ focusHotSpot(name: string): boolean; protected accessor _isFaultedBacking: boolean; protected get _isFaulted(): boolean; /** * When true, the scene will be rendered even if no scene state has changed. */ accessor renderWhenIdle: boolean; /** * The model URL. */ accessor source: Nullable; /** * Forces the model to be loaded with the specified extension. * @remarks * If this property is not set, the extension will be inferred from the model URL when possible. */ accessor extension: Nullable; /** * If true, load glTF files using the OpenPBR material instead of the default PBR material. * @experimental */ accessor useOpenPBR: boolean; /** * The texture URLs used for lighting and skybox. Setting this property will set both environmentLighting and environmentSkybox. */ get environment(): { lighting: Nullable; skybox: Nullable; }; set environment(url: string); /** * The texture URL for lighting. */ accessor environmentLighting: Nullable; /** * The texture URL for the skybox. */ accessor environmentSkybox: Nullable; /** * A value between 0 and 2 that specifies the intensity of the environment lighting. */ accessor environmentIntensity: Nullable; /** * A value in radians that specifies the rotation of the environment. */ accessor environmentRotation: Nullable; /** * The type of shadows to use. */ accessor shadowQuality: Nullable; private accessor _loadingProgress; /** * Gets information about loading activity. * @remarks * false indicates no loading activity. * true indicates loading activity with no progress information. * A number between 0 and 1 indicates loading activity with progress information. */ get loadingProgress(): boolean | number; /** * A value between 0 and 1 that specifies how much to blur the skybox. */ accessor skyboxBlur: Nullable; /** * The tone mapping to use for rendering the scene. */ accessor toneMapping: Nullable; /** * The contrast applied to the scene. */ accessor contrast: Nullable; /** * The exposure applied to the scene. */ accessor exposure: Nullable; /** * Enables or disables screen space ambient occlusion (SSAO). */ accessor ssao: Nullable; /** * The clear color (e.g. background color) for the viewer. */ accessor clearColor: Nullable; /** * Enables or disables camera auto-orbit. */ accessor cameraAutoOrbit: boolean; /** * The speed at which the camera auto-orbits around the target. */ accessor cameraAutoOrbitSpeed: Nullable; /** * The delay in milliseconds before the camera starts auto-orbiting. */ accessor cameraAutoOrbitDelay: Nullable; /** * The set of defined hot spots. */ accessor hotSpots: Record; /** * True if the viewer has any hotspots. */ protected get _hasHotSpots(): boolean; /** * True if the default animation should play automatically when a model is loaded. */ accessor animationAutoPlay: boolean; /** * The list of animation names for the currently loaded model. */ get animations(): readonly string[]; /** * True if the loaded model has any animations. */ protected get _hasAnimations(): boolean; /** * The currently selected animation index. */ accessor selectedAnimation: Nullable; /** * True if an animation is currently playing. */ get isAnimationPlaying(): boolean; /** * The speed scale at which animations are played. */ accessor animationSpeed: number; /** * The current point on the selected animation timeline, normalized between 0 and 1. */ accessor animationProgress: number; private accessor _animations; private accessor _isAnimationPlaying; private accessor _showAnimationSlider; /** * The list of material variants for the currently loaded model. */ get materialVariants(): readonly string[]; /** * The currently selected material variant. */ accessor selectedMaterialVariant: Nullable; /** * True if scene cameras should be used as hotspots. */ accessor camerasAsHotSpots: boolean; /** * Determines the behavior of the reset function, and the associated default reset button. * @remarks * - "auto" - Resets the camera to the initial pose if it makes sense given other viewer state, such as the selected animation. * - "reframe" - Reframes the camera based on the current viewer state (ignores the initial pose). * - [ResetFlag] - A space separated list of reset flags that reset various aspects of the viewer state. */ accessor resetMode: ResetMode; private accessor _canvasContainer; private accessor _hotSpotSelect; /** * Toggles the play/pause animation state if there is a selected animation. */ toggleAnimation(): void; /** * Resets the Viewer state based on the @see resetMode property. */ reset(): void; private _reset; /** * Resets the camera to its initial pose. */ resetCamera(): void; /** * Reloads the viewer. This is typically only needed when the viewer is in a faulted state (e.g. due to the context being lost). */ reload(): void; /** @internal */ connectedCallback(): void; /** @internal */ disconnectedCallback(): void; /** @internal */ attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void; /** @internal */ protected update(changedProperties: PropertyValues): void; /** * Determines whether a full viewer reload is required for the given property changes. * Subclasses can override to add additional reload triggers. * @param changedProperties The properties that have changed. * @returns True if the viewer needs to be reloaded. */ protected _needsReload(changedProperties: Map): boolean; /** @internal */ protected render(): TemplateResult<1>; /** * Renders the progress bar. * @returns The template result for the progress bar. */ protected _renderProgressBar(): TemplateResult; /** * Renders the toolbar. * @returns The template result for the toolbar. */ protected _renderToolbar(): TemplateResult; /** * Renders the reload button. * @returns The template result for the reload button. */ protected _renderReloadButton(): TemplateResult; /** * Renders UI elements that overlay the viewer. * Override this method to provide additional rendering for the component. * @returns TemplateResult The rendered template result. */ protected _renderOverlay(): TemplateResult; /** * Dispatches a custom event. * @param type The type of the event. * @param event A function that creates the event. */ protected _dispatchCustomEvent(type: TEvent, event: (type: TEvent) => ViewerElementEventMap[TEvent]): void; /** * Handles changes to the selected animation. * @param event The change event. */ protected _onSelectedAnimationChanged(event: Event): void; /** * Handles changes to the animation speed. * @param event The change event. */ protected _onAnimationSpeedChanged(event: Event): void; /** * Handles changes to the animation timeline. * @param event The change event. */ protected _onAnimationTimelineChanged(event: Event): void; /** * Handles pointer down events on the animation timeline. * @param event The pointer down event. */ protected _onAnimationTimelinePointerDown(event: Event): void; /** * Handles changes to the selected material variant. * @param event The change event. */ protected _onMaterialVariantChanged(event: Event): void; /** * Handles changes to the hot spot list. * @param event The change event. */ protected _onHotSpotsChanged(event: Event): void; private _onAnimationSliderChanged; private _createPropertyBinding; /** * Creates a viewer for the specified canvas. * Subclasses must implement this to return an appropriate IViewer instance. * @param canvas The canvas to create the viewer for. * @returns The created viewer. */ protected abstract _createViewer(canvas: HTMLCanvasElement, options: Options): Promise; private _setupViewer; private _tearDownViewer; /** * Called during teardown after the viewer has been disposed. * Subclasses can override to clean up additional state. */ protected _onViewerTornDown(): void; private _updateModel; private _updateEnv; private _updateShadows; } /** * Viewer custom element backed by the full Babylon.js engine. * Extends ViewerElementBase with Color4-typed clearColor, viewerDetails, and engine selection. */ declare abstract class ViewerElement extends ViewerElementBase { private readonly _viewerClass; private _viewerDetails?; /** * Creates an instance of a ViewerElement subclass. * @param _viewerClass The Viewer subclass to use when creating the Viewer instance. * @param options The options to use when creating the Viewer and binding it to the specified canvas. */ protected constructor(_viewerClass: new (...args: ConstructorParameters) => ViewerClass, options?: CanvasViewerOptions); /** * Gets the underlying viewer details (when the underlying viewer is in a loaded state). * This is useful for advanced scenarios where direct access to the viewer or Babylon scene is needed. */ get viewerDetails(): Readonly | undefined; /** * The clear color (e.g. background color) for the viewer. */ accessor clearColor: Nullable; /** * The engine to use for rendering. */ accessor engine: CanvasViewerOptions["engine"]; protected _needsReload(changedProperties: Map): boolean; protected _createViewer(canvas: HTMLCanvasElement, options: CanvasViewerOptions): Promise; protected _onViewerTornDown(): void; } /** * Displays a 3D model using the Babylon.js Viewer. */ declare class HTML3DElement extends ViewerElement { /** * Creates a new HTML3DElement. * @param options The options to use for the viewer. This is optional, and is only used when programmatically creating a viewer element. */ constructor(options?: Readonly); } /** * Creates a custom HTML element that creates an HTML3DElement with the specified name and configuration. * @param elementName The name of the custom element. * @param options The options to use for the viewer. */ declare function ConfigureCustomViewerElement(elementName: string, options: Readonly): void; /** * Displays child elements at the screen space location of a hotspot in a babylon-viewer. * @remarks * The babylon-viewer-annotation element must be a child of a babylon-viewer element. */ declare class HTML3DAnnotationElement extends LitElement { /** @internal */ static styles: lit.CSSResult; private readonly _internals; private readonly _mutationObserver; private _viewerAttachment; private _connectingAbortController; private _updateAnnotation; /** * The name of the hotspot to track. */ accessor hotSpot: string; /** @internal */ connectedCallback(): void; /** @internal */ disconnectedCallback(): void; /** @internal */ protected render(): lit_html.TemplateResult<1>; /** @internal */ protected update(changedProperties: PropertyValues): void; private _sanitizeInnerHTML; } export { ConfigureCustomViewerElement, CreateHotSpotFromCamera, CreateViewerForCanvas, DefaultViewerOptions, HTML3DAnnotationElement, HTML3DElement, Viewer, ViewerElement, ViewerHotSpotResult }; export type { CameraAutoOrbit, CanvasViewerOptions, EnvironmentOptions, HotSpot, LoadModelOptions, Model, PostProcessing, ShadowQuality, ToneMapping, ViewerDetails, ViewerElementEventMap, ViewerHotSpotQuery, ViewerOptions };