@spiffcommerce/preview 5.5.8-alpha.4 → 5.6.0

package/dist/index.d.ts

@@ -0,0 +1,1170 @@
+import { Engine } from '@babylonjs/core/Engines/engine';
+import { ISceneLoaderProgressEvent } from '@babylonjs/core/Loading/sceneLoader';
+import { Scene } from '@babylonjs/core/scene';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { AutoRotationBehavior } from '@babylonjs/core/Behaviors/Cameras/autoRotationBehavior';
+import { FramingBehavior } from '@babylonjs/core/Behaviors/Cameras/framingBehavior';
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { Color4 } from '@babylonjs/core/Maths/math.color';
+
+/**
+ * Defines the different behaviors supported by the camera system
+ * for control when viewing a product.
+ */
+declare enum ProductCameraRig {
+    Orbit = 0,
+    Pan = 1
+}
+/**
+ * Details relating to a model for use in the preview.
+ */
+type ModelDetails = {
+    /**
+     * The source of the model to load.
+     */
+    readonly model?: string;
+    /**
+     * A reference to the renderable context service to use.
+     */
+    readonly contextService?: RenderableContextService;
+};
+/**
+ * Identical to CameraAnimation typing, however the
+ * target is always available and hence is not optional.
+ */
+type CameraPose = {
+    readonly lonDeg: number;
+    readonly radius: number;
+    readonly latDeg: number;
+    readonly target: {
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+    };
+};
+type ThreeDPreviewService = {
+    /**
+     * Returns a promise which resolves when the scene has been initialized.
+     */
+    getInitializationPromise(): Promise<void>;
+    /**
+     * True when the scene has been initialized. This is when the initializationPromise resolves. Remember you may need
+     * to await a model's initialization promise as well if you want to hide the scene until the model is loaded.
+     */
+    getInitializationComplete(): boolean;
+    /**
+     * Allows listeners to be aware of the camera losing focus of the
+     * main product.
+     * @param listener A function to be called when focus is lost.
+     */
+    registerFocusLostListener(listener: () => void): void;
+    /**
+     * Removes a listener from the focusLost observers. The listener will
+     * no longer be notified
+     * @param listener The listener to remove.
+     */
+    unregisterFocusLostListener(listener: () => void): void;
+    /**
+     * Provides listeners with information about model load events.
+     * @param listener A function to get load events. The eventType will be 'load' or 'unload',
+     * and the modelContainer will be the model that was loaded or unloaded.
+     */
+    registerModelLoadEventListener(listener: (e: ModelLoadEventData) => void): void;
+    /**
+     * Allows you to pass any function that originally called registerModelLoadEventListener()
+     * to have it excluded from load events.
+     * If the function was never registered this call has no effect.
+     * @param listener The listener to exclude from load events.
+     */
+    unregisterModelLoadEventListener(listener: (e: ModelLoadEventData) => void): void;
+    /**
+     * Request that the scene renders to a given canvas
+     * @param canvas The canvas we should render to.
+     */
+    registerView(canvas: HTMLCanvasElement): void;
+    /**
+     * Returns the number of active viewers of the scene. Useful for
+     * avoiding unnecessary rendering when there are no active viewers.
+     */
+    getNumViewports(): number;
+    /**
+     * Tells babylon that we no longer want the given canvas to be rendered to.
+     * @param canvas The canvas to be excluded from rendering.
+     */
+    unregisterView(canvas: HTMLCanvasElement): void;
+    /**
+     * Shutdown the preview engine and all registered plugins. Noop if the engine is not initialized.
+     */
+    shutdown(): void;
+    /**
+     * Executes an animation of the camera.
+     * @param animation The animation to execute.
+     */
+    executeCameraAnimation(animation: CameraAnimation): Promise<void>;
+    /**
+     * Returns the values of the Arc Rotate Camera
+     */
+    getCameraPose(): CameraPose | undefined;
+    /**
+     * Sets the values of the Arc Rotate Camera
+     */
+    setCameraPose(cameraPose: CameraPose): void;
+    /**
+     * Controls the current control state of the camera.
+     * @param rigType The control type to use.
+     */
+    setCameraState(rigType: ProductCameraRig): void;
+    /**
+     * Restores the product camera to it's last set focus point. If the user has
+     * been panning this will animate the camera to the original focus point. If the camera is still
+     * focused on it's origin point this function is a noop.
+     */
+    animateToLastCameraFocus(): Promise<void>;
+    /**
+     * When configuration has allowed for auto rotation we
+     * can pause the rotation via this function.
+     * @param shouldAutoRotate When true rotation is running, paused otherwise.
+     */
+    setAutoRotation(shouldAutoRotate: boolean): void;
+    /**
+     * Returns the current configuration object applied to the scene.
+     */
+    getCurrentConfiguration(): PreviewOptions | undefined;
+    /**
+     * Takes a screenshot of the scene using a given
+     * camera animation otherwise using the existing orientation
+     * of the camera in the scene. A resolution must be provided
+     * to render the scene at.
+     */
+    renderSceneScreenshot(resolution: number, cameraAnimation: CameraAnimation): Promise<string>;
+    /**
+     * Returns true when the current configuration allows the user
+     * to rotate around the product.
+     */
+    orbitEnabled(): boolean;
+    /**
+     * Flips a given transform from one handedness to another.
+     * NOTE: Will provide sensible defaults if only some values are provided.
+     * @param position The position vector for the transform
+     * @param rotation The rotation vector for the transform. NOTE: Should be expressed in radians.
+     * @param scale The scale vector for the transform
+     */
+    flipTransform(position?: Vector, rotation?: Vector, scale?: Vector): {
+        position: Vector;
+        rotation: Vector;
+        scale: Vector;
+    };
+    /**
+     * When called will trigger the internal engine to match the current
+     * canvas size. This ensures the image renders correctly in the view and
+     * also prevents performance problems.
+     */
+    fireResizeEvent(): void;
+    /**
+     * Designed for use when utilizing the 3D preview in an editor format.
+     * Given a list of material names, highlights the associated meshes in the scene.
+     */
+    setHighlights(materials: readonly MaterialHandle[], color?: readonly [number, number, number]): void;
+    /**
+     * Sets the rendering pipeline configuration for the scene. Overwrites any existing configuration.
+     * @param renderingPipelineConfiguration The configuration to apply. Empty values will be set to default.
+     */
+    setRenderingPipelineConfiguration(renderingPipelineConfiguration: RenderingPipelineConfiguration): void;
+    /**
+     * Loads a model into the scene.
+     * @param modelDetails The details of the model to load.
+     * @returns A reference to the model container. Call `getInitializationPromise()` to wait for the model to be loaded.
+     */
+    loadModel(modelDetails: ModelDetails): ModelContainer;
+    /**
+     * Preloads a model into the scene. This will load the model into memory, but it will not be visible in the scene.
+     * @param url The url of the model to preload.
+     */
+    preloadModel(url: string): Promise<void>;
+    /**
+     * Returns all loaded models.
+     * @returns A map of id to model container.
+     */
+    getAllModels(): ReadonlyArray<ModelContainer>;
+    /**
+     * Retrieves a loaded model by it's id.
+     * @param id The id of the model to retrieve.
+     * @returns The model container if it exists, undefined otherwise.
+     */
+    getModelById(id: string): ModelContainer | undefined;
+    /**
+     * Registers a plugin with the preview service.
+     * @param plugin The plugin to register.
+     */
+    registerPlugin(plugin: PreviewServicePlugin): void;
+    /**
+     * Removes a plugin from the preview service.
+     * @param plugin The plugin to remove.
+     */
+    unregisterPlugin(plugin: PreviewServicePlugin): void;
+    /**
+     * Sets the preview options for the scene. Certain options may not be applied, as they are only applicable upon initialization.
+     * @param options The options to apply.
+     */
+    updatePreviewOptions(options: PreviewOptions): void;
+};
+/**
+ * Represents a service capable of managing and returning contexts that
+ * can be used for rendering to textures in the 3D preview.
+ */
+type RenderableContextService = {
+    /**
+     * Returns all managed renderable contexts.
+     */
+    getAll(): ReadonlyMap<string, RenderableContext>;
+};
+/**
+ * A renderable context represents the relationship of a texture in the 3D preview
+ * with an external canvas. This context allows external clients to render to a texture
+ * in the 3D preview with a simple interface.
+ */
+type RenderableContext = {
+    /**
+     * A unique identifier for this renderable context.
+     */
+    getID(): string;
+    /**
+     * A name for this renderable.
+     */
+    getName(): string;
+    /**
+     * Sets the render context associated to this renderable.
+     * @param ctx The context to use for rendering.
+     */
+    setStaticContext(ctx: CanvasRenderingContext2D): void;
+    /**
+     * Get the render context associated to this renderable.
+     */
+    getStaticContext(): CanvasRenderingContext2D | undefined;
+    /**
+     * Sets whether or not this renderable is dirty and will need re-rendering.
+     * @param value The new value
+     */
+    setStaticContextDirty(value: boolean): void;
+    /**
+     * When this context has been set as dirty, returns true.
+     */
+    getStaticContextDirty(): boolean;
+    /**
+     * A timestamp for the last successful render of the context.
+     */
+    getLastCompletedStaticRender(): number | undefined;
+};
+type ModelLoadEventData = {
+    /**
+     * The type of event that has occurred.
+     */
+    readonly eventType: "load" | "unload";
+    /**
+     * The model that has been loaded or unloaded.
+     */
+    readonly modelContainer: ModelContainer;
+};
+type LoadProgressEventData = {
+    /**
+     * The total load value of the scene, this is an average of all
+     * 'in progress' loading events. when all events are fully loaded this value will be 100.
+     */
+    readonly loadValue: number;
+    /**
+     * This value is true when the base model and scene have been initialized.
+     */
+    readonly sceneInitialized: boolean;
+};
+/**
+ * Used to specify the behavior of a material effect such as clearcoat, sheen and translucency.
+ */
+declare enum MaterialEffectMode {
+    /**
+     * When a material variant effect specifies 'None' the effect doesn't change in any way. This is the default behavior.
+     */
+    None = "None",
+    /**
+     * When a material variant effect specifies 'RemoveWhenSelected' the effect is removed.
+     */
+    RemoveWhenSelected = "RemoveWhenSelected",
+    /**
+     * When a material variant effect specifies 'ApplyWhenSelected' the effect is enabled.
+     */
+    ApplyWhenSelected = "ApplyWhenSelected"
+}
+interface Asset {
+    fileLink?: string;
+}
+/**
+ * Represents a material resource that can be additively applied to
+ * a material targeted in the scene.
+ */
+type MaterialResource = {
+    /**
+     * A unique identified for this material.
+     */
+    id: string;
+    /**
+     * The name of this material
+     */
+    name: string;
+    /**
+     * Defines the base color of a surface before any other calculations are made.
+     */
+    albedoMap?: Asset;
+    /**
+     * Defines the transparency of a surface.
+     */
+    alphaMap?: Asset;
+    /**
+     * Defines shadowing on a surface.
+     */
+    ambientMap?: Asset;
+    /**
+     * Defines the amount of light being emitted from a surface.
+     */
+    emissionMap?: Asset;
+    /**
+     * Identical to roughness.
+     */
+    metallicMap?: Asset;
+    /**
+     * Defines the direction light will bounce in when it hits a point on a surface.
+     */
+    normalMap?: Asset;
+    /**
+     * Used to define how smooth a surface is.
+     */
+    roughnessMap?: Asset;
+    /**
+     * Used to define refraction of light on a surface.
+     */
+    refractionMap?: Asset;
+    /**
+     * The intensity of refraction, when refraction is enabled via a texture.
+     */
+    refractionIntensity?: number;
+    /**
+     * Used to define reflection of light on a surface.
+     */
+    reflectionMap?: Asset;
+    /**
+     * The intensity of reflection, when reflection is enabled via a texture.
+     */
+    reflectionIntensity?: number;
+    /**
+     * The rotation of the reflection texture (along the up axis), in degrees.
+     */
+    reflectionRotation?: number;
+    /**
+     * When enabled the material will be displayed with a clearcoat affect for simulating coated plastic surfaces.
+     */
+    clearCoat: MaterialEffectMode;
+    /**
+     * Index of refraction when clear coat is enabled.
+     */
+    clearCoatIOR?: number;
+    /**
+     * The date that this material resource was created
+     */
+    createdAt: string;
+    /**
+     * The date that this material resource was last updated.
+     */
+    updatedAt: string;
+};
+/**
+ * Represents a handle to a material in the 3D scene. The underlying complexity of materials is abstracted
+ * away so the client doesn't need to know anything more than the ID they're given and the name.
+ */
+type MaterialHandle = {
+    /**
+     * The identifier for the material.
+     */
+    readonly id: string;
+    /**
+     * The human readable name for the material.
+     */
+    readonly name: string;
+};
+/**
+ * Settings related to the 3D preview.
+ */
+type PreviewOptions = {
+    /**
+     * The color expected to be seen in the background of the product. Expects a hexadecimal value.
+     */
+    readonly backgroundColor?: string;
+    /**
+     * Image to be used as a background when running withh transparency, the image
+     * will be scaled and centered to fill the preview based on aspect ratio.
+     * Will implicitly set transparency to true.
+     */
+    readonly backgroundImage?: string;
+    /**
+     * When true, the canvas background will be transparent.
+     */
+    readonly transparentBackground?: boolean;
+    /**
+     * The closest zoom the camera can achieve to the product.
+     */
+    readonly maxZoomOverride?: number;
+    /**
+     * The furthest zoom the camera can achieve to the product.
+     */
+    readonly minZoomOverride?: number;
+    /**
+     * The environment file used to calculate product lighting.
+     */
+    readonly environmentFile?: string;
+    /**
+     * The intensity of the environment lighting.
+     */
+    readonly environmentIntensity?: number;
+    /**
+     * The rotation (around the y axis) of the environment lighting, in degrees.
+     */
+    readonly environmentRotationY?: number;
+    /**
+     * The lowest point, vertically, that the camera can rotate to.
+     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
+     */
+    readonly lowerBetaLimitDeg?: number;
+    /**
+     * The highest point, vertically, that the camera can rotate to.
+     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
+     */
+    readonly upperBetaLimitDeg?: number;
+    /**
+     * The leftmost point, horizontally, that the camera can rotate to.
+     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
+     */
+    readonly lowerAlphaLimitDeg?: number;
+    /**
+     * The rightmost point, horizontally, that the camera can rotate to.
+     * https://doc.babylonjs.com/divingDeeper/cameras/camera_introduction
+     */
+    readonly upperAlphaLimitDeg?: number;
+    /**
+     * When set the product while rotate slowly
+     */
+    readonly autoRotation?: boolean;
+    /**
+     * Time in milliseconds before the product starts rotating after a user input has taken control.
+     */
+    readonly idleTimeBeforeRotation?: number;
+    /**
+     * When set the 3D preview won't attempt to orient the product automatically to its front view at load.
+     */
+    readonly disableAutomaticOrientation?: boolean;
+    /**
+     * When true the action bar won't be displayed to the user.
+     */
+    readonly disableActionBar?: boolean;
+    /**
+     * When set, mousing over the model in this preview will highlight the associated mesh/material.
+     * When layout contexts are provided, only the materials with matching names will highlight.
+     */
+    readonly highlightOnMaterialHover?: boolean;
+    /**
+     * Sets the color of highlights when enabled. Expects hexadecimal value.
+     */
+    readonly highlightColor?: string;
+    /**
+     * Configuration rleated to lighting of the scene.
+     */
+    readonly lighting?: {
+        /**
+         * Sets camera exposure. Higher values will make the scene brighter.
+         */
+        exposure?: number;
+        /**
+         * Sets camera contrast. Higher values will increase the contrast of the scene.
+         */
+        contrast?: number;
+    };
+    /**
+     * The intensity of the glow effect that is present when a material has an emissive texture.
+     */
+    readonly emissiveGlowIntensity?: number;
+    /**
+     * When true the preview system operates in a noRender mode. It silently accepts all requests and modifies internal state
+     * based on those requests. However no rendering will actually be occuring. Can be useful in situations where testing requires
+     * a 3D preview but the actual rendering is not important.
+     */
+    readonly noRender?: boolean;
+    /**
+     * When true the preview system will not allow the user to pan the camera.
+     */
+    readonly noPan?: boolean;
+    /**
+     * Configuration for post-processing effects.
+     */
+    readonly renderingPipelineConfiguration?: RenderingPipelineConfiguration;
+    /**
+     * Function that returns a canvas to be used for rendering. Useful when using the preview in a headless environment.
+     * @returns A canvas to be used for rendering.
+     */
+    readonly createCanvas?: () => HTMLCanvasElement;
+};
+/**
+ * Defines an animation to be played on a product.
+ */
+type ModelAnimation = {
+    /**
+     * A value it seconds along the animation timeline to begin at.
+     */
+    readonly from?: number;
+    /**
+     * A value in seconds along the animation timeline to end at.
+     */
+    readonly to?: number;
+    /**
+     * When true the animation will loop. The only behavior currently is to reset
+     * back to from but we could have it bounce back and forth and/or follow a curve.
+     */
+    readonly loop?: boolean;
+    /**
+     * The name of the animation to play.
+     */
+    readonly name?: string;
+};
+/**
+ * A CameraAnimation specifies a discrete state that the camera should
+ * animate to. This state represents the final position of the camera after animations have run.
+ */
+type CameraAnimation = {
+    /**
+     * The longitude in degrees the camera should animate to.
+     */
+    readonly lonDeg: number;
+    /**
+     * The latitude in degrees the camera should animate to.
+     */
+    readonly latDeg: number;
+    /**
+     * An optional target for the camera to focus on in the scene.
+     */
+    readonly target?: {
+        readonly x: number;
+        readonly y: number;
+        readonly z: number;
+    };
+    /**
+     * A value in scene units specifying camera distance from the target.
+     */
+    readonly radius?: number;
+};
+/**
+ * Configuration for various post processing effects.
+ */
+interface RenderingPipelineConfiguration {
+    antiAliasing?: AntiAliasingPipelineConfiguration;
+    bloom?: BloomPipelineConfiguration;
+    chromaticAberration?: ChromaticAberrationPipelineConfiguration;
+    colorCurves?: ColorCurvesConfiguration;
+    depthOfField?: DepthOfFieldPipelineConfiguration;
+    grain?: GrainPipelineConfiguration;
+    misc?: MiscPipelineConfiguration;
+    sharpen?: SharpenPipelineConfiguration;
+    vignette?: VignettePipelineConfiguration;
+}
+/**
+ * Anti-aliasing is a technique used to smooth out jagged edges on objects.
+ */
+interface AntiAliasingPipelineConfiguration {
+    /**
+     * The number of samples to use for MSAA. 1, 2, 3, or 4.
+     */
+    samples?: number;
+    /**
+     * When true FXAA will be used instead of MSAA.
+     */
+    fxaaEnabled?: boolean;
+}
+/**
+ * Bloom is a post processing effect that adds a glow to bright areas of the scene.
+ */
+interface BloomPipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * The size of the bloom blur kernel.
+     */
+    kernel?: number;
+    /**
+     * The scale of the bloom effect. Lower values will provide better performance.
+     */
+    scale?: number;
+    /**
+     * The threshold at which the bloom effect will be applied.
+     */
+    threshold?: number;
+    /**
+     * The strength of the bloom effect.
+     */
+    weight?: number;
+}
+/**
+ * Chromatic Aberration is a post processing effect that separates the RGB channels.
+ */
+interface ChromaticAberrationPipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * The amount of separation between the rgb channels.
+     */
+    aberrationAmount?: number;
+    /**
+     * The direction of the separation, in screen space.
+     */
+    direction?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * How much the effect will increase towards the edges of the screen.
+     */
+    radialIntensity?: number;
+}
+/**
+ * Color Curves is a post processing effect that allows for color correction.
+ */
+interface ColorCurvesConfiguration {
+    enabled?: boolean;
+    globalDensity?: number;
+    globalExposure?: number;
+    globalHue?: number;
+    globalSaturation?: number;
+    highlightsDensity?: number;
+    highlightsExposure?: number;
+    highlightsHue?: number;
+    highlightsSaturation?: number;
+    midtonesDensity?: number;
+    midtonesExposure?: number;
+    midtonesHue?: number;
+    midtonesSaturation?: number;
+    shadowsDensity?: number;
+    shadowsExposure?: number;
+    shadowsHue?: number;
+    shadowsSaturation?: number;
+}
+/**
+ * Depth of Field is a post processing effect that blurs the scene based on distance from the camera.
+ */
+interface DepthOfFieldPipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * The quality of the blur. Higher values will provide better quality but will be slower.
+     */
+    blurLevel?: "Low" | "Medium" | "High";
+    /**
+     * The distance from the camera to the focus point.
+     */
+    focusDistance?: number;
+    /**
+     * The focal length of the camera, in millimeters.
+     */
+    focalLength?: number;
+    /**
+     * The f-stop of the camera. The diameter of the lens aperture will be calculated by lensSize / fStop.
+     */
+    fStop?: number;
+    /**
+     * The size of the lens, in millimeters. The diameter of the lens aperture will be calculated by lensSize / fStop.
+     */
+    lensSize?: number;
+}
+/**
+ * Grain is a post processing effect that adds noise to the scene.
+ */
+interface GrainPipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * Set this to true to randomize the noise pattern each frame.
+     */
+    animated?: boolean;
+    /**
+     * The intensity of the noise.
+     */
+    intensity?: number;
+}
+/**
+ * Miscellaneous post processing effects.
+ */
+interface MiscPipelineConfiguration {
+    /**
+     * The amount of contrast to apply to the scene.
+     */
+    contrast?: number;
+    /**
+     * The amount of exposure to apply to the scene.
+     */
+    exposure?: number;
+    /**
+     * Applies a pre-defined color grading LUT to the scene.
+     */
+    toneMappingEnabled?: boolean;
+    /**
+     * The type of tone mapping to use. "Standard" or "ACES". "ACES" applies a tone that is similar to Unity and Unreal.
+     * @default "standard"
+     */
+    toneMappingType?: "Standard" | "ACES";
+}
+/**
+ * Sharpening is a post processing effect that increases the contrast between pixels.
+ */
+interface SharpenPipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * How much of the original color to apply. 0.0 - 1.0.
+     */
+    colorAmount?: number;
+    /**
+     * The intensity of the sharpening effect.
+     */
+    edgeAmount?: number;
+}
+interface VignettePipelineConfiguration {
+    enabled?: boolean;
+    /**
+     * "Multiply" or "Opaque". "Multiply" will mix the vignette color with the scene color. "Opaque" will replace the scene color with the vignette color.
+     */
+    blendMode?: "Multiply" | "Opaque";
+    /**
+     * The FOV of the camera. This is used to calculate the vignette size.
+     */
+    cameraFov?: number;
+    /**
+     * The offset of the vignette center, in screen space.
+     */
+    center?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The color of the vignette, provided as an RGBA value.
+     */
+    colorRgba?: Color4Configuration;
+    /**
+     * The color of the vignette, provided as a hex string.
+     */
+    colorHex?: string;
+    /**
+     * Horizontal stretch of the vignette. Higher values will cause the vignette to be appear more like bars on the top and bottom of the screen.
+     */
+    stretch?: number;
+    /**
+     * The strength/size of the vignette effect.
+     */
+    weight?: number;
+}
+interface Color4Configuration {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+interface Vector {
+    x: number;
+    y: number;
+    z: number;
+}
+/**
+ * Wraps functionality for interacting with models in the scene.
+ */
+type ModelContainer = {
+    /**
+     * Applies a given material modifier to a target material in the scene.
+     * @param targetMaterial The material to target.
+     * @param key A unique key used to identify this action.
+     * @param material The material modifier to apply.
+     * @param removeWhenUndefined Whether or not to remove the material modifier when the material is undefined.
+     */
+    applyMaterialVariant(targetMaterial: string, key: string, material: Partial<MaterialResource>, removeWhenUndefined?: boolean): Promise<void>;
+    /**
+     * Applies a given model variant to the scene.
+     * @param key A unique key used to identify this action.
+     * @param model modelDetails -> An asset containing a model file to be loaded into the scene.
+     * If undefined, the model will be removed from the scene.
+     * @param replaceProductModel Whether or not to replace the product model with the new model.
+     */
+    applyModelVariant(key: string, modelDetails: ModelDetails | undefined, replaceProductModel: boolean): Promise<void>;
+    /**
+     * Executes an animation on the model.
+     * @param animation The animation track to run.
+     * @returns A promise which resolves when the animation has completed. If the animation is looping, the promise will resolve after the first loop.
+     */
+    executeAnimation(animation: ModelAnimation): Promise<void>;
+    /**
+     * Disposes all resources associated with the model container.
+     * Note: This will also remove the container from the preview service.
+     */
+    dispose(): void;
+    /**
+     * Returns the animations available on the model.
+     * @param includeVariants When true, animations on model variants will be included. Defaults to false.
+     */
+    getAnimations(includeVariants?: boolean): readonly ModelAnimation[];
+    /**
+     * Returns the unique ID of the model container.
+     */
+    getId(): string;
+    /**
+     * Returns a promise which resolves when the model has been initialized.
+     */
+    getInitializationPromise(): Promise<ModelContainer>;
+    /**
+     * Returns true if the model has been initialized.
+     */
+    getIsInitialized(): boolean;
+    /**
+     * List named materials that are available on the model.
+     * Designed for use when utilizing the 3D preview in an editor format.
+     */
+    listMaterials(): readonly MaterialHandle[];
+    /**
+     * Registers a callback that will be invoked when a material is under the cursor.
+     * @param callback The callback to register.
+     */
+    registerMaterialSelectedCallback(callback: (material: MaterialHandle) => void): void;
+    /**
+     * Removes a callback that was previously registered to be invoked when a material is under the cursor.
+     * @param callback The callback to unregister.
+     */
+    unregisterMaterialSelectedCallback(callback: (material: MaterialHandle) => void): void;
+    /**
+     * Registers a callback that will be invoked when a material is no longer under the cursor.
+     * @param callback The callback to register.
+     */
+    registerMaterialDeselectedCallback(callback: (material: MaterialHandle) => void): void;
+    /**
+     * Removes a callback that was previously registered to be invoked when a material is no longer under the cursor.
+     * @param callback The callback to unregister.
+     */
+    unregisterMaterialDeselectedCallback(callback: (material: MaterialHandle) => void): void;
+    /**
+     * The position of the model, in scene space.
+     */
+    position: Vector;
+    /**
+     * The rotation of the model, in scene space.
+     */
+    rotation: Vector;
+    /**
+     * The scale of the model, in scene space.
+     */
+    scale: Vector;
+    /**
+     * Custom metadata associated with the model.
+     */
+    metadata: Map<string, any>;
+};
+/**
+ * Provides references to 3D preview engine objects.
+ * The types of these objects are dependent on the engine being used.
+ */
+type EngineContext = {
+    /**
+     * The camera being used by the ThreeDPreviewService.
+     */
+    camera: any;
+    /**
+     * The 3D engine.
+     */
+    engine: any;
+    /**
+     * The active scene.
+     */
+    scene: any;
+};
+/**
+ * A plugin that provides additional functionality to the preview service.
+ */
+type PreviewServicePlugin = {
+    /**
+     * Called when the plugin is first registered with the preview service.
+     * @param previewService A reference to the preview service.
+     * @param context A reference to the engine context.
+     */
+    initialize(previewService: ThreeDPreviewService, context: EngineContext): void;
+    /**
+     * Called when the plugin is unregistered from the preview service.
+     * Use this to cleanup any resources that have been allocated.
+     * This will be called automatically when the preview service is shutdown, or when the plugin is unregistered.
+     * @param isServiceShutdown True if the service is being shutdown, false if the plugin is being unregistered.
+     */
+    dispose(isServiceShutdown: boolean): void;
+};
+
+/**
+ * Automatically manages construction and destruction of the glow layer.
+ */
+declare class GlowLayerManager {
+    private readonly scene;
+    private intensity;
+    private glowLayer?;
+    private meshCount;
+    constructor(scene: Scene, intensity: number);
+    setIntensity(intensity: number): void;
+    includeMeshes(meshes: readonly Mesh[]): void;
+    removeMeshes(meshes: readonly Mesh[]): void;
+}
+
+/**
+ * Configuration for the preview. Optionally, you can provide a custom configuration. (from a workflow for example) Sensible
+ * defaults will be specified for all properties otherwise.
+ */
+declare class Configuration {
+    readonly customOptions?: PreviewOptions;
+    constructor(options?: PreviewOptions);
+    createCanvas(): HTMLCanvasElement;
+    get options(): PreviewOptions | undefined;
+    /**
+     * Configuration related to the scene
+     */
+    get scene(): {
+        clearColor: Color4;
+        transparentBackground: string | true | undefined;
+        environment: {
+            file: string;
+            intensity: number;
+            rotationY: number;
+        };
+    };
+    /**
+     * Configuration related to the camera used to view and interact with the scene.
+     */
+    get camera(): {
+        autoOrientation: boolean;
+        autoRotation: {
+            enabled: boolean;
+            idleTimeMs: number;
+        };
+        limits: {
+            min: {
+                alpha: number | undefined;
+                beta: number | undefined;
+                radius: number | undefined;
+            };
+            max: {
+                alpha: number | undefined;
+                beta: number | undefined;
+                radius: number | undefined;
+            };
+        };
+    };
+    /**
+     * Configuration related to the highlighting system. Highlights are used to add
+     * a visual cue to the user that something is moused over in the preview.
+     */
+    get highlights(): {
+        enabled: boolean;
+        color: Color4;
+    };
+    get lighting(): {
+        exposure: number;
+        contrast: number;
+    };
+    get emissiveGlowIntensity(): number;
+    /**
+     * Will return clear color based on custom configuration or a sensible default.
+     * @returns A Color4 object for use as a clear color.
+     */
+    private getSceneClearColor;
+    private highlightColorFromConfig;
+    private hexToColor4;
+}
+
+/**
+ * A slightly extended version of the ArcRotateCamera.
+ * Configures the camera in a way that best suites product visualization.
+ * Also provides some convenience functions for interacting with the camera at runtime.
+ */
+declare class ProductCamera extends ArcRotateCamera {
+    constructor(name: string, alpha: number, beta: number, radius: number, target: Vector3, scene: Scene, configuration: Configuration, setActiveOnSceneIfNoneActive?: boolean);
+    updateConfiguration(configuration: Configuration): void;
+    /**
+     * Stores the current executed target point of the camera. If the camera target changes
+     * via panning we can notify ui about the fact to help users reset the camera.
+     */
+    readonly lastFocus: Vector3;
+    get isRunningFramingBehavior(): boolean;
+    set isRunningFramingBehavior(value: boolean);
+    private _isRunningFramingBehavior;
+    private framingBehaviourCallback?;
+    private panDenominator;
+    private panEnabled;
+    setPanEnabled(enabled: boolean): void;
+    /**
+     * Returns the framing behavior of this camera.
+     */
+    getFramingBehavior(): FramingBehavior;
+    /**
+     * Returns the auto rotation behavior of this camera, this may
+     * not always be available.
+     */
+    getAutoRotationBehavior(): AutoRotationBehavior | undefined;
+    /**
+     * Activates framing on this camera causing the camera to focus on
+     * the scene and bound itself in a sensible fashion to the scene content.
+     */
+    enableFramingBehavior(): FramingBehavior;
+    /**
+     * Animates the camera back to the initial target when it has drifted to another position.
+     * @param onAnimationComplete A callback when the camera has finished animating.
+     * @param time The time in milliseconds the animation should take.
+     */
+    rerunFramingBehavior(onAnimationComplete?: () => void, time?: number): void;
+    /**
+     * Activates the auto rotation behavior causing the camera to rotate slowly around
+     * it's target.
+     * @param idleTime The number of milliseconds before the camera starts rotating after the user last interacted.
+     */
+    enableAutoRotationBehavior(idleTime?: number): void;
+    /**
+     * Stops the auto rotation functionality immediately.
+     */
+    disableAutoRotationBehavior(): void;
+    updateRadiusBounds(radius: number): void;
+    /**
+     * A static function used to instantiate a single product camera instance on a scene. This camera will assume
+     * the active camera role on the scene and any existing active camera will be disposed.
+     * @param scene The scene to attach the camera to.
+     * @param configuration A configuration object to define the cameras limitations.
+     * @param assignActive If true the camera will be assigned as the active camera on the scene.
+     * @param disablePan If true the camera will not allow panning.
+     */
+    static create(scene: Scene, configuration: Configuration, assignActive?: boolean): ProductCamera;
+}
+
+/**
+ * An example implementation of the ThreeDPreviewService interface. The inclusion of 3D previews
+ * is designed to be optional, anyone can come along and implement their own 3D preview service or
+ * they can use this one to get things running more quickly.
+ */
+declare class SpiffCommerce3DPreviewService implements ThreeDPreviewService {
+    private readonly camera;
+    private readonly engine;
+    private readonly scene;
+    private configuration;
+    /**
+     * The last camera animation requested if the scene wasn't ready.
+     */
+    private queuedCameraAnimation?;
+    /**
+     * When listeners have been notified of a change in camera target position
+     * this field will be set to true.
+     */
+    private focusLostNotified;
+    /**
+     * An observable handling loss of target focus by the camera.
+     */
+    private focusLostObservable;
+    /**
+     * A collection of callbacks to be invoked when a model is loaded or unloaded.
+     */
+    private modelLoadEventCallbacks;
+    private glowLayerManager;
+    /**
+     * When instantiated, contains a list of meshes that contribute to highlighting
+     * in the scene.
+     */
+    private highlightLayer?;
+    private renderingPipeline;
+    private modelContainers;
+    private plugins;
+    private screenshotPrepareResolve;
+    private readonly initPromise;
+    private initComplete;
+    private isAnimatingCamera;
+    private queuedAnimationFunction?;
+    constructor(options?: PreviewOptions);
+    getInitializationPromise(): Promise<void>;
+    getInitializationComplete(): boolean;
+    getEngineContext(): {
+        engine: Engine;
+        scene: Scene;
+        camera: ProductCamera;
+    };
+    registerFocusLostListener(listener: () => void): void;
+    unregisterFocusLostListener(listener: () => void): void;
+    registerModelLoadEventListener(listener: (e: ModelLoadEventData) => void): void;
+    unregisterModelLoadEventListener(listener: (e: ModelLoadEventData) => void): void;
+    registerView(canvas: HTMLCanvasElement): void;
+    getNumViewports(): number;
+    unregisterView(canvas: HTMLCanvasElement): void;
+    shutdown(): void;
+    private renderLoop;
+    executeCameraAnimation(animation: CameraAnimation): Promise<void>;
+    getCameraPose(): CameraPose | undefined;
+    setCameraPose(cameraPose: CameraPose): void;
+    setCameraState(rigType: ProductCameraRig): void;
+    animateToLastCameraFocus(): Promise<void>;
+    setAutoRotation(shouldAutoRotate: boolean): void;
+    getCurrentConfiguration(): PreviewOptions | undefined;
+    renderSceneScreenshot(resolution: number, camAnim: CameraAnimation): Promise<string>;
+    orbitEnabled(): boolean;
+    fireResizeEvent(): void;
+    setHighlights(materials: readonly MaterialHandle[], color?: readonly [number, number, number]): void;
+    setRenderingPipelineConfiguration(renderingPipelineConfiguration: RenderingPipelineConfiguration): void;
+    loadModel(modelDetails: ModelDetails, progressHandler?: (event: ISceneLoaderProgressEvent) => void): ModelContainer;
+    preloadModel(url: string): Promise<void>;
+    getAllModels(): ReadonlyArray<ModelContainer>;
+    getModelById(id: string): ModelContainer | undefined;
+    registerPlugin(plugin: PreviewServicePlugin): void;
+    unregisterPlugin(plugin: PreviewServicePlugin): void;
+    getGlowLayerManager(): GlowLayerManager;
+    modelUnloaded(modelContainer: ModelContainer): void;
+    private triggerModelLoadEvent;
+    /**
+     * Flips a transform around the origin.
+     */
+    flipTransform(position?: Vector, rotation?: Vector, scale?: Vector): {
+        position: Vector;
+        rotation: Vector;
+        scale: Vector;
+    };
+    updatePreviewOptions(options: PreviewOptions): void;
+    /**
+     * Given a valid canvas element, will remove any existing input controls
+     * and re-attach them to the given canvas. The pan mouse button can be set
+     * to either 0 (left mouse) or 2 (right mouse).
+     */
+    private reattachControls;
+}
+
+/**
+ * Represents the dimensions of a texture, enforcing power of two numbers.
+ */
+type RenderDimensions = {
+    readonly width: PowerOfTwoNumber;
+    readonly height: PowerOfTwoNumber;
+};
+/**
+ * A class containing largely static configuration information.
+ */
+declare class RenderingConfiguration {
+    /**
+     * Returns the resolution expected for generated textures.
+     */
+    static getDynamicTextureResolution(): RenderDimensions;
+    /**
+     * Returns true when textures should generate mip maps
+     */
+    static shouldMipMap(): boolean;
+    /**
+     * Returns true when multithreaded rendering is supported.
+     */
+    static offscreenRenderingSupported(): boolean;
+    /**
+     * Returns the resolution expected for mirror textures.
+     */
+    static getMirrorTextureResolution(): PowerOfTwoNumber;
+    private static getIsMobile;
+}
+declare const REFLECTION_PROBE_RESOLUTION = 128;
+type PowerOfTwoNumber = 128 | 256 | 512 | 1024 | 2048 | 4096 | 8192;
+declare const renderingPipelineDefaults: RenderingPipelineConfiguration;
+
+export { AntiAliasingPipelineConfiguration, Asset, BloomPipelineConfiguration, CameraAnimation, CameraPose, ChromaticAberrationPipelineConfiguration, Color4Configuration, ColorCurvesConfiguration, DepthOfFieldPipelineConfiguration, EngineContext, GrainPipelineConfiguration, LoadProgressEventData, MaterialEffectMode, MaterialHandle, MaterialResource, MiscPipelineConfiguration, ModelAnimation, ModelContainer, ModelDetails, ModelLoadEventData, PowerOfTwoNumber, PreviewOptions, PreviewServicePlugin, ProductCameraRig, REFLECTION_PROBE_RESOLUTION, RenderableContext, RenderableContextService, RenderingConfiguration, RenderingPipelineConfiguration, SharpenPipelineConfiguration, SpiffCommerce3DPreviewService, ThreeDPreviewService, Vector, VignettePipelineConfiguration, renderingPipelineDefaults };