@babylonjs/viewer 7.41.1 → 7.42.0-alpha

package/lib/index.js

@@ -0,0 +1,2165 @@
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
+import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
+import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js';
+import { loadAssetContainerAsync } from '@babylonjs/core/Loading/sceneLoader.js';
+import { ImageProcessingConfiguration } from '@babylonjs/core/Materials/imageProcessingConfiguration.js';
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial.js';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture.js';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture.js';
+import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
+import { Vector3, Matrix } from '@babylonjs/core/Maths/math.vector.js';
+import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
+import { GetHotSpotToRef } from '@babylonjs/core/Meshes/abstractMesh.hotSpot.js';
+import { CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder.js';
+import { computeMaxExtents } from '@babylonjs/core/Meshes/meshUtils.js';
+import { BuildTuple } from '@babylonjs/core/Misc/arrayTools.js';
+import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
+import { deepMerge } from '@babylonjs/core/Misc/deepMerger.js';
+import { Observable } from '@babylonjs/core/Misc/observable.js';
+import { SnapshotRenderingHelper } from '@babylonjs/core/Misc/snapshotRenderingHelper.js';
+import { Scene } from '@babylonjs/core/scene.js';
+import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic.js';
+import { __decorate } from '@babylonjs/core/tslib.es6.js';
+import { Color4 } from '@babylonjs/core/Maths/math.color.js';
+import { Logger } from '@babylonjs/core/Misc/logger.js';
+
+const toneMappingOptions = ["none", "standard", "aces", "neutral"];
+/**
+ * Checks if the given value is a valid tone mapping option.
+ * @param value The value to check.
+ * @returns True if the value is a valid tone mapping option, otherwise false.
+ */
+function isToneMapping(value) {
+    return toneMappingOptions.includes(value);
+}
+function throwIfAborted(...abortSignals) {
+    for (const signal of abortSignals) {
+        signal?.throwIfAborted();
+    }
+}
+function createSkybox(scene, camera, reflectionTexture, blur) {
+    const hdrSkybox = CreateBox("hdrSkyBox", undefined, scene);
+    const hdrSkyboxMaterial = new PBRMaterial("skyBox", scene);
+    // Use the default image processing configuration on the skybox (e.g. don't apply tone mapping, contrast, or exposure).
+    hdrSkyboxMaterial.imageProcessingConfiguration = new ImageProcessingConfiguration();
+    hdrSkyboxMaterial.backFaceCulling = false;
+    hdrSkyboxMaterial.reflectionTexture = reflectionTexture;
+    if (hdrSkyboxMaterial.reflectionTexture) {
+        hdrSkyboxMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
+    }
+    hdrSkyboxMaterial.microSurface = 1.0 - blur;
+    hdrSkyboxMaterial.disableLighting = true;
+    hdrSkyboxMaterial.twoSidedLighting = true;
+    hdrSkybox.material = hdrSkyboxMaterial;
+    hdrSkybox.isPickable = false;
+    hdrSkybox.infiniteDistance = true;
+    updateSkybox(hdrSkybox, camera);
+    return hdrSkybox;
+}
+function updateSkybox(skybox, camera) {
+    skybox?.scaling.setAll((camera.maxZ - camera.minZ) / 2);
+}
+const defaultLoadEnvironmentOptions = {
+    lighting: true,
+    skybox: true,
+};
+/**
+ * Provides the result of a hot spot query.
+ */
+class ViewerHotSpotResult {
+    constructor() {
+        /**
+         * 2D canvas position in pixels
+         */
+        this.screenPosition = [NaN, NaN];
+        /**
+         * 3D world coordinates
+         */
+        this.worldPosition = [NaN, NaN, NaN];
+        /**
+         * visibility range is [-1..1]. A value of 0 means camera eye is on the plane.
+         */
+        this.visibility = NaN;
+    }
+}
+/**
+ * @experimental
+ * 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.
+ */
+class Viewer {
+    constructor(_engine, options) {
+        this._engine = _engine;
+        /**
+         * Fired when the environment has changed.
+         */
+        this.onEnvironmentChanged = new Observable();
+        /**
+         * Fired when an error occurs while loading the environment.
+         */
+        this.onEnvironmentError = new Observable();
+        /**
+         * Fired when the skybox blur changes.
+         */
+        this.onSkyboxBlurChanged = new Observable();
+        /**
+         * Fired when the post processing state changes.
+         */
+        this.onPostProcessingChanged = new Observable();
+        /**
+         * Fired when a model is loaded into the viewer (or unloaded from the viewer).
+         */
+        this.onModelChanged = new Observable();
+        /**
+         * Fired when an error occurs while loading a model.
+         */
+        this.onModelError = new Observable();
+        /**
+         * Fired when progress changes on loading activity.
+         */
+        this.onLoadingProgressChanged = new Observable();
+        /**
+         * Fired when the camera auto orbit state changes.
+         */
+        this.onCameraAutoOrbitChanged = new Observable();
+        /**
+         * Fired when the selected animation changes.
+         */
+        this.onSelectedAnimationChanged = new Observable();
+        /**
+         * Fired when the animation speed changes.
+         */
+        this.onAnimationSpeedChanged = new Observable();
+        /**
+         * Fired when the selected animation is playing or paused.
+         */
+        this.onIsAnimationPlayingChanged = new Observable();
+        /**
+         * Fired when the current point on the selected animation timeline changes.
+         */
+        this.onAnimationProgressChanged = new Observable();
+        /**
+         * Fired when the selected material variant changes.
+         */
+        this.onSelectedMaterialVariantChanged = new Observable();
+        this._tempVectors = BuildTuple(4, Vector3.Zero);
+        this._meshDataCache = new Map();
+        this._renderLoopController = null;
+        this._materialVariantsController = null;
+        this._skybox = null;
+        this._skyboxBlur = 0.3;
+        this._light = null;
+        this._suspendRenderCount = 0;
+        this._isDisposed = false;
+        this._loadModelLock = new AsyncLock();
+        this._loadModelAbortController = null;
+        this._loadEnvironmentLock = new AsyncLock();
+        this._loadEnvironmentAbortController = null;
+        this._loadSkyboxLock = new AsyncLock();
+        this._loadSkyboxAbortController = null;
+        this._isLoadingModel = false;
+        this._modelLoadingProgress = null;
+        this._selectedAnimation = -1;
+        this._activeAnimationObservers = [];
+        this._animationSpeed = 1;
+        {
+            const scene = new Scene(this._engine);
+            // Deduce tone mapping, contrast, and exposure from the scene (so the viewer stays in sync if anything mutates these values directly on the scene).
+            this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;
+            this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;
+            this._contrast = scene.imageProcessingConfiguration.contrast;
+            this._exposure = scene.imageProcessingConfiguration.exposure;
+            this._imageProcessingConfigurationObserver = scene.imageProcessingConfiguration.onUpdateParameters.add(() => {
+                let hasChanged = false;
+                if (this._toneMappingEnabled !== scene.imageProcessingConfiguration.toneMappingEnabled) {
+                    this._toneMappingEnabled = scene.imageProcessingConfiguration.toneMappingEnabled;
+                    hasChanged = true;
+                }
+                if (this._toneMappingType !== scene.imageProcessingConfiguration.toneMappingType) {
+                    this._toneMappingType = scene.imageProcessingConfiguration.toneMappingType;
+                    hasChanged = true;
+                }
+                if (this._contrast !== scene.imageProcessingConfiguration.contrast) {
+                    this._contrast = scene.imageProcessingConfiguration.contrast;
+                    hasChanged = true;
+                }
+                if (this._exposure !== scene.imageProcessingConfiguration.exposure) {
+                    this._exposure = scene.imageProcessingConfiguration.exposure;
+                    hasChanged = true;
+                }
+                if (hasChanged) {
+                    this.onPostProcessingChanged.notifyObservers();
+                }
+            });
+            const camera = new ArcRotateCamera("Viewer Default Camera", 0, 0, 1, Vector3.Zero(), scene);
+            camera.useInputToRestoreState = false;
+            scene.onPointerObservable.add(async (pointerInfo) => {
+                const pickingInfo = await this._pick(pointerInfo.event.offsetX, pointerInfo.event.offsetY);
+                if (pickingInfo?.pickedPoint) {
+                    const distance = pickingInfo.pickedPoint.subtract(camera.position).dot(camera.getForwardRay().direction);
+                    // Immediately reset the target and the radius based on the distance to the picked point.
+                    // This eliminates unnecessary camera movement on the local z-axis when interpolating.
+                    camera.target = camera.position.add(camera.getForwardRay().direction.scale(distance));
+                    camera.radius = distance;
+                    camera.interpolateTo(undefined, undefined, undefined, pickingInfo.pickedPoint);
+                }
+                else {
+                    camera.restoreState();
+                }
+            }, PointerEventTypes.POINTERDOUBLETAP);
+            this._details = {
+                viewer: this,
+                scene,
+                camera,
+                model: null,
+                suspendRendering: () => this._suspendRendering(),
+                pick: (screenX, screenY) => this._pick(screenX, screenY),
+            };
+        }
+        this._details.scene.skipFrustumClipping = true;
+        this._details.scene.skipPointerDownPicking = true;
+        this._details.scene.skipPointerUpPicking = true;
+        this._details.scene.skipPointerMovePicking = true;
+        this._snapshotHelper = new SnapshotRenderingHelper(this._details.scene, { morphTargetsNumMaxInfluences: 30 });
+        this._details.camera.attachControl();
+        this._updateCamera(); // set default camera values
+        this._autoRotationBehavior = this._details.camera.getBehaviorByName("AutoRotation");
+        // Default to KHR PBR Neutral tone mapping.
+        this.postProcessing = {
+            toneMapping: "neutral",
+        };
+        // Load a default light, but ignore errors as the user might be immediately loading their own environment.
+        this.resetEnvironment().catch(() => { });
+        this._beginRendering();
+        options?.onInitialized?.(this._details);
+    }
+    /**
+     * The camera auto orbit configuration.
+     */
+    get cameraAutoOrbit() {
+        return {
+            enabled: this._details.camera.behaviors.includes(this._autoRotationBehavior),
+            speed: this._autoRotationBehavior.idleRotationSpeed,
+            delay: this._autoRotationBehavior.idleRotationWaitTime,
+        };
+    }
+    set cameraAutoOrbit(value) {
+        if (value.enabled !== undefined && value.enabled !== this.cameraAutoOrbit.enabled) {
+            if (value.enabled) {
+                this._details.camera.addBehavior(this._autoRotationBehavior);
+            }
+            else {
+                this._details.camera.removeBehavior(this._autoRotationBehavior);
+            }
+        }
+        if (value.delay !== undefined) {
+            this._autoRotationBehavior.idleRotationWaitTime = value.delay;
+        }
+        if (value.speed !== undefined) {
+            this._autoRotationBehavior.idleRotationSpeed = value.speed;
+        }
+        this.onCameraAutoOrbitChanged.notifyObservers();
+    }
+    /**
+     * A value between 0 and 1 that specifies how much to blur the skybox.
+     */
+    get skyboxBlur() {
+        return this._skyboxBlur;
+    }
+    set skyboxBlur(value) {
+        if (value !== this._skyboxBlur) {
+            this._skyboxBlur = value;
+            if (this._skybox) {
+                const material = this._skybox.material;
+                if (material instanceof PBRMaterial) {
+                    this._snapshotHelper.disableSnapshotRendering();
+                    material.microSurface = 1.0 - value;
+                    this._snapshotHelper.enableSnapshotRendering();
+                }
+            }
+            this.onSkyboxBlurChanged.notifyObservers();
+        }
+    }
+    /**
+     * The post processing configuration.
+     */
+    get postProcessing() {
+        let toneMapping;
+        switch (this._toneMappingType) {
+            case ImageProcessingConfiguration.TONEMAPPING_STANDARD:
+                toneMapping = "standard";
+                break;
+            case ImageProcessingConfiguration.TONEMAPPING_ACES:
+                toneMapping = "aces";
+                break;
+            case ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL:
+                toneMapping = "neutral";
+                break;
+            default:
+                toneMapping = "none";
+                break;
+        }
+        return {
+            toneMapping,
+            contrast: this._contrast,
+            exposure: this._exposure,
+        };
+    }
+    set postProcessing(value) {
+        this._snapshotHelper.disableSnapshotRendering();
+        if (value.toneMapping !== undefined) {
+            if (value.toneMapping === "none") {
+                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = false;
+            }
+            else {
+                switch (value.toneMapping) {
+                    case "standard":
+                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_STANDARD;
+                        break;
+                    case "aces":
+                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_ACES;
+                        break;
+                    case "neutral":
+                        this._details.scene.imageProcessingConfiguration.toneMappingType = ImageProcessingConfiguration.TONEMAPPING_KHR_PBR_NEUTRAL;
+                        break;
+                }
+                this._details.scene.imageProcessingConfiguration.toneMappingEnabled = true;
+            }
+        }
+        if (value.contrast !== undefined) {
+            this._details.scene.imageProcessingConfiguration.contrast = value.contrast;
+        }
+        if (value.exposure !== undefined) {
+            this._details.scene.imageProcessingConfiguration.exposure = value.exposure;
+        }
+        this._details.scene.imageProcessingConfiguration.isEnabled = this._toneMappingEnabled || this._contrast !== 1 || this._exposure !== 1;
+        this._snapshotHelper.enableSnapshotRendering();
+    }
+    /**
+     * 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() {
+        if (this._isLoadingModel) {
+            return this._modelLoadingProgress ?? true;
+        }
+        return false;
+    }
+    /**
+     * The list of animation names for the currently loaded model.
+     */
+    get animations() {
+        return this._details.model?.animationGroups.map((group) => group.name) ?? [];
+    }
+    /**
+     * The currently selected animation index.
+     */
+    get selectedAnimation() {
+        return this._selectedAnimation;
+    }
+    set selectedAnimation(value) {
+        value = Math.round(Clamp(value, -1, this.animations.length - 1));
+        if (value !== this._selectedAnimation) {
+            const startAnimation = this.isAnimationPlaying;
+            if (this._activeAnimation) {
+                this._activeAnimationObservers.forEach((observer) => observer.remove());
+                this._activeAnimationObservers = [];
+                this._activeAnimation.pause();
+                this._activeAnimation.goToFrame(0);
+            }
+            this._selectedAnimation = value;
+            if (this._activeAnimation) {
+                this._activeAnimation.goToFrame(0);
+                this._activeAnimation.play(true);
+                if (!startAnimation) {
+                    this.pauseAnimation();
+                }
+                this._activeAnimationObservers = [
+                    this._activeAnimation.onAnimationGroupPlayObservable.add(() => {
+                        this.onIsAnimationPlayingChanged.notifyObservers();
+                    }),
+                    this._activeAnimation.onAnimationGroupPauseObservable.add(() => {
+                        this.onIsAnimationPlayingChanged.notifyObservers();
+                    }),
+                    this._activeAnimation.onAnimationGroupEndObservable.add(() => {
+                        this.onIsAnimationPlayingChanged.notifyObservers();
+                        this.onAnimationProgressChanged.notifyObservers();
+                    }),
+                ];
+                this._updateCamera(!this._isLoadingModel);
+            }
+            this.onSelectedAnimationChanged.notifyObservers();
+            this.onAnimationProgressChanged.notifyObservers();
+        }
+    }
+    /**
+     * True if an animation is currently playing.
+     */
+    get isAnimationPlaying() {
+        return this._activeAnimation?.isPlaying ?? false;
+    }
+    /**
+     * The speed scale at which animations are played.
+     */
+    get animationSpeed() {
+        return this._animationSpeed;
+    }
+    set animationSpeed(value) {
+        this._animationSpeed = value;
+        this._applyAnimationSpeed();
+        this.onAnimationSpeedChanged.notifyObservers();
+    }
+    /**
+     * The current point on the selected animation timeline, normalized between 0 and 1.
+     */
+    get animationProgress() {
+        if (this._activeAnimation) {
+            return this._activeAnimation.getCurrentFrame() / (this._activeAnimation.to - this._activeAnimation.from);
+        }
+        return 0;
+    }
+    set animationProgress(value) {
+        if (this._activeAnimation) {
+            this._activeAnimation.goToFrame(value * (this._activeAnimation.to - this._activeAnimation.from));
+            this.onAnimationProgressChanged.notifyObservers();
+            this._autoRotationBehavior.resetLastInteractionTime();
+        }
+    }
+    get _activeAnimation() {
+        return this._details.model?.animationGroups[this._selectedAnimation] ?? null;
+    }
+    /**
+     * The list of material variant names for the currently loaded model.
+     */
+    get materialVariants() {
+        return this._materialVariantsController?.variants ?? [];
+    }
+    /**
+     * The currently selected material variant.
+     */
+    get selectedMaterialVariant() {
+        return this._materialVariantsController?.selectedVariant ?? null;
+    }
+    set selectedMaterialVariant(value) {
+        if (value !== this.selectedMaterialVariant && this._materialVariantsController?.variants.includes(value)) {
+            this._snapshotHelper.disableSnapshotRendering();
+            this._materialVariantsController.selectedVariant = value;
+            this._snapshotHelper.enableSnapshotRendering();
+            this.onSelectedMaterialVariantChanged.notifyObservers();
+        }
+    }
+    /**
+     * Loads a 3D model from the specified URL.
+     * @remarks
+     * If a model is already loaded, it will be unloaded before loading the new model.
+     * @param source A url or File or ArrayBufferView that points to the model to load.
+     * @param options The options to use when loading the model.
+     * @param abortSignal An optional signal that can be used to abort the loading process.
+     */
+    async loadModel(source, options, abortSignal) {
+        await this._updateModel(source, options, abortSignal);
+    }
+    /**
+     * Unloads the current 3D model if one is loaded.
+     * @param abortSignal An optional signal that can be used to abort the reset.
+     */
+    async resetModel(abortSignal) {
+        await this._updateModel(undefined, undefined, abortSignal);
+    }
+    async _updateModel(source, options, abortSignal) {
+        this._throwIfDisposedOrAborted(abortSignal);
+        const originalOnProgress = options?.onProgress;
+        const onProgress = (event) => {
+            originalOnProgress?.(event);
+            if (this._isLoadingModel) {
+                this._modelLoadingProgress = event.lengthComputable ? event.loaded / event.total : null;
+                this.onLoadingProgressChanged.notifyObservers();
+            }
+        };
+        delete options?.onProgress;
+        const originalOnMaterialVariantsLoaded = options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants?.onLoaded;
+        const onMaterialVariantsLoaded = (controller) => {
+            originalOnMaterialVariantsLoaded?.(controller);
+            this._materialVariantsController = controller;
+        };
+        delete options?.pluginOptions?.gltf?.extensionOptions?.KHR_materials_variants?.onLoaded;
+        const defaultOptions = {
+            // Pass a progress callback to update the loading progress.
+            onProgress,
+            pluginOptions: {
+                gltf: {
+                    // Enable transparency as coverage by default to be 3D Commerce compliant by default.
+                    // https://doc.babylonjs.com/setup/support/3D_commerce_certif
+                    transparencyAsCoverage: true,
+                    extensionOptions: {
+                        // eslint-disable-next-line @typescript-eslint/naming-convention
+                        KHR_materials_variants: {
+                            // Capture the material variants controller when it is loaded.
+                            onLoaded: onMaterialVariantsLoaded,
+                        },
+                    },
+                },
+            },
+        };
+        options = deepMerge(defaultOptions, options ?? {});
+        this._loadModelAbortController?.abort("New model is being loaded before previous model finished loading.");
+        const abortController = (this._loadModelAbortController = new AbortController());
+        await this._loadModelLock.lockAsync(async () => {
+            throwIfAborted(abortSignal, abortController.signal);
+            this._snapshotHelper.disableSnapshotRendering();
+            this._details.model?.dispose();
+            this._details.model = null;
+            this._meshDataCache.clear();
+            this._materialVariantsController = null;
+            this.onSelectedMaterialVariantChanged.notifyObservers();
+            this.selectedAnimation = -1;
+            try {
+                if (source) {
+                    this._isLoadingModel = true;
+                    this._modelLoadingProgress = 0;
+                    this.onLoadingProgressChanged.notifyObservers();
+                    this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);
+                    this.onSelectedMaterialVariantChanged.notifyObservers();
+                    this._details.model.animationGroups.forEach((group) => {
+                        group.start(true, this.animationSpeed);
+                        group.pause();
+                    });
+                    this.selectedAnimation = options?.defaultAnimation ?? 0;
+                    this._snapshotHelper.fixMeshes(this._details.model.meshes);
+                    this._details.model.addAllToScene();
+                }
+                this._updateCamera();
+                this._updateLight();
+                this._applyAnimationSpeed();
+                this.onModelChanged.notifyObservers();
+            }
+            catch (e) {
+                this.onModelError.notifyObservers(e);
+                throw e;
+            }
+            finally {
+                this._isLoadingModel = false;
+                this.onLoadingProgressChanged.notifyObservers();
+                this._snapshotHelper.enableSnapshotRendering();
+            }
+        });
+    }
+    /**
+     * Loads an environment texture from the specified url and sets up a corresponding skybox.
+     * @remarks
+     * If an environment is already loaded, it will be unloaded before loading the new environment.
+     * @param url The url of the environment texture to load.
+     * @param options The options to use when loading the environment.
+     * @param abortSignal An optional signal that can be used to abort the loading process.
+     */
+    async loadEnvironment(url, options, abortSignal) {
+        await this._updateEnvironment(url, options, abortSignal);
+    }
+    /**
+     * Unloads the current environment if one is loaded.
+     * @param options The options to use when resetting the environment.
+     * @param abortSignal An optional signal that can be used to abort the reset.
+     */
+    async resetEnvironment(options, abortSignal) {
+        await this._updateEnvironment(undefined, options, abortSignal);
+    }
+    async _updateEnvironment(url, options, abortSignal) {
+        this._throwIfDisposedOrAborted(abortSignal);
+        options = options ?? defaultLoadEnvironmentOptions;
+        if (!options.lighting && !options.skybox) {
+            return;
+        }
+        const locks = [];
+        if (options.lighting) {
+            this._loadEnvironmentAbortController?.abort("New environment lighting is being loaded before previous environment lighting finished loading.");
+            locks.push(this._loadEnvironmentLock);
+        }
+        if (options.skybox) {
+            this._loadSkyboxAbortController?.abort("New environment skybox is being loaded before previous environment skybox finished loading.");
+            locks.push(this._loadSkyboxLock);
+        }
+        const environmentAbortController = (this._loadEnvironmentAbortController = options.lighting ? new AbortController() : null);
+        const skyboxAbortController = (this._loadSkyboxAbortController = options.skybox ? new AbortController() : null);
+        await AsyncLock.LockAsync(async () => {
+            throwIfAborted(abortSignal, environmentAbortController?.signal, skyboxAbortController?.signal);
+            this._snapshotHelper.disableSnapshotRendering();
+            const dispose = () => {
+                if (options.lighting) {
+                    this._details.scene.environmentTexture?.dispose();
+                    this._details.scene.environmentTexture = null;
+                }
+                if (options.skybox) {
+                    this._skybox?.dispose(undefined, true);
+                    this._skybox = null;
+                    this._details.scene.autoClear = true;
+                }
+            };
+            // First dispose the current environment and/or skybox.
+            dispose();
+            try {
+                if (url) {
+                    const cubeTexture = CubeTexture.CreateFromPrefilteredData(url, this._details.scene);
+                    if (options.lighting) {
+                        this._details.scene.environmentTexture = cubeTexture;
+                    }
+                    if (options.skybox) {
+                        const reflectionTexture = options.lighting ? cubeTexture.clone() : cubeTexture;
+                        this._skybox = createSkybox(this._details.scene, this._details.camera, reflectionTexture, this.skyboxBlur);
+                        this._snapshotHelper.fixMeshes([this._skybox]);
+                        this._details.scene.autoClear = false;
+                    }
+                    await new Promise((resolve, reject) => {
+                        const successObserver = cubeTexture.onLoadObservable.addOnce(() => {
+                            successObserver.remove();
+                            errorObserver.remove();
+                            resolve();
+                        });
+                        const errorObserver = Texture.OnTextureLoadErrorObservable.add((texture) => {
+                            if (texture === cubeTexture) {
+                                successObserver.remove();
+                                errorObserver.remove();
+                                reject(new Error("Failed to load environment texture."));
+                            }
+                        });
+                    });
+                }
+                this._updateLight();
+                this.onEnvironmentChanged.notifyObservers();
+            }
+            catch (e) {
+                dispose();
+                this.onEnvironmentError.notifyObservers(e);
+                throw e;
+            }
+            finally {
+                this._snapshotHelper.enableSnapshotRendering();
+            }
+        }, locks);
+    }
+    /**
+     * Toggles the play/pause animation state if there is a selected animation.
+     */
+    toggleAnimation() {
+        if (this.isAnimationPlaying) {
+            this.pauseAnimation();
+        }
+        else {
+            this.playAnimation();
+        }
+    }
+    /**
+     * Plays the selected animation if there is one.
+     */
+    playAnimation() {
+        this._activeAnimation?.play(true);
+    }
+    /**
+     * Pauses the selected animation if there is one.
+     */
+    async pauseAnimation() {
+        this._activeAnimation?.pause();
+    }
+    /**
+     * Resets the camera to its initial pose.
+     */
+    resetCamera() {
+        this._details.camera.restoreState();
+    }
+    /**
+     * Disposes of the resources held by the Viewer.
+     */
+    dispose() {
+        this.selectedAnimation = -1;
+        this.animationProgress = 0;
+        this._loadEnvironmentAbortController?.abort("Thew viewer is being disposed.");
+        this._loadModelAbortController?.abort("Thew viewer is being disposed.");
+        this._renderLoopController?.dispose();
+        this._details.scene.dispose();
+        this.onEnvironmentChanged.clear();
+        this.onEnvironmentError.clear();
+        this.onSkyboxBlurChanged.clear();
+        this.onPostProcessingChanged.clear();
+        this.onModelChanged.clear();
+        this.onModelError.clear();
+        this.onCameraAutoOrbitChanged.clear();
+        this.onSelectedAnimationChanged.clear();
+        this.onAnimationSpeedChanged.clear();
+        this.onIsAnimationPlayingChanged.clear();
+        this.onAnimationProgressChanged.clear();
+        this.onLoadingProgressChanged.clear();
+        this._imageProcessingConfigurationObserver.remove();
+        this._isDisposed = true;
+    }
+    /**
+     * retrun 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, result) {
+        if (!this._details.model) {
+            return false;
+        }
+        const worldNormal = this._tempVectors[2];
+        const worldPos = this._tempVectors[1];
+        const screenPos = this._tempVectors[0];
+        if (query.type === "surface") {
+            const mesh = this._details.model.meshes[query.meshIndex];
+            if (!mesh) {
+                return false;
+            }
+            if (!GetHotSpotToRef(mesh, query, worldPos, worldNormal)) {
+                return false;
+            }
+        }
+        else {
+            worldPos.copyFromFloats(query.position[0], query.position[1], query.position[2]);
+            worldNormal.copyFromFloats(query.normal[0], query.normal[1], query.normal[2]);
+        }
+        const renderWidth = this._engine.getRenderWidth(); // Get the canvas width
+        const renderHeight = this._engine.getRenderHeight(); // Get the canvas height
+        const viewportWidth = this._details.camera.viewport.width * renderWidth;
+        const viewportHeight = this._details.camera.viewport.height * renderHeight;
+        const scene = this._details.scene;
+        Vector3.ProjectToRef(worldPos, Matrix.IdentityReadOnly, scene.getTransformMatrix(), new Viewport(0, 0, viewportWidth, viewportHeight), screenPos);
+        result.screenPosition[0] = screenPos.x;
+        result.screenPosition[1] = screenPos.y;
+        result.worldPosition[0] = worldPos.x;
+        result.worldPosition[1] = worldPos.y;
+        result.worldPosition[2] = worldPos.z;
+        // visibility
+        const eyeToSurface = this._tempVectors[3];
+        eyeToSurface.copyFrom(this._details.camera.globalPosition);
+        eyeToSurface.subtractInPlace(worldPos);
+        eyeToSurface.normalize();
+        result.visibility = Vector3.Dot(eyeToSurface, worldNormal);
+        return true;
+    }
+    _suspendRendering() {
+        this._renderLoopController?.dispose();
+        this._suspendRenderCount++;
+        let disposed = false;
+        return {
+            dispose: () => {
+                if (!disposed) {
+                    disposed = true;
+                    this._suspendRenderCount--;
+                    if (this._suspendRenderCount === 0) {
+                        this._beginRendering();
+                    }
+                }
+            },
+        };
+    }
+    _beginRendering() {
+        if (!this._renderLoopController) {
+            const render = () => {
+                this._details.scene.render();
+                // Update the camera panning sensitivity related properties based on the camera's distance from the target.
+                this._details.camera.panningSensibility = 5000 / this._details.camera.radius;
+                this._details.camera.speed = this._details.camera.radius * 0.2;
+                if (this.isAnimationPlaying) {
+                    this.onAnimationProgressChanged.notifyObservers();
+                    this._autoRotationBehavior.resetLastInteractionTime();
+                }
+            };
+            this._engine.runRenderLoop(render);
+            let disposed = false;
+            this._renderLoopController = {
+                dispose: () => {
+                    if (!disposed) {
+                        disposed = true;
+                        this._engine.stopRenderLoop(render);
+                        this._renderLoopController = null;
+                    }
+                },
+            };
+        }
+    }
+    _updateCamera(interpolate = false) {
+        this._details.camera.useFramingBehavior = true;
+        const framingBehavior = this._details.camera.getBehaviorByName("Framing");
+        framingBehavior.framingTime = 0;
+        framingBehavior.elevationReturnTime = -1;
+        this._details.camera.useAutoRotationBehavior = true;
+        const currentAlpha = this._details.camera.alpha;
+        const currentBeta = this._details.camera.beta;
+        const currentRadius = this._details.camera.radius;
+        const currentTarget = this._details.camera.target;
+        const goalAlpha = Math.PI / 2;
+        const goalBeta = Math.PI / 2.4;
+        let goalRadius = 1;
+        let goalTarget = currentTarget;
+        if (this._details.model?.meshes.length) {
+            // get bounds and prepare framing/camera radius from its values
+            this._details.camera.lowerRadiusLimit = null;
+            const maxExtents = computeMaxExtents(this._details.model.meshes, this._activeAnimation);
+            const worldExtents = {
+                min: new Vector3(Math.min(...maxExtents.map((e) => e.minimum.x)), Math.min(...maxExtents.map((e) => e.minimum.y)), Math.min(...maxExtents.map((e) => e.minimum.z))),
+                max: new Vector3(Math.max(...maxExtents.map((e) => e.maximum.x)), Math.max(...maxExtents.map((e) => e.maximum.y)), Math.max(...maxExtents.map((e) => e.maximum.z))),
+            };
+            framingBehavior.zoomOnBoundingInfo(worldExtents.min, worldExtents.max);
+            const worldSize = worldExtents.max.subtract(worldExtents.min);
+            const worldCenter = worldExtents.min.add(worldSize.scale(0.5));
+            goalRadius = worldSize.length() * 1.1;
+            if (!isFinite(goalRadius)) {
+                goalRadius = 1;
+                worldCenter.copyFromFloats(0, 0, 0);
+            }
+            goalTarget = worldCenter;
+        }
+        this._details.camera.alpha = Math.PI / 2;
+        this._details.camera.beta = Math.PI / 2.4;
+        this._details.camera.radius = goalRadius;
+        this._details.camera.target = goalTarget;
+        this._details.camera.lowerRadiusLimit = goalRadius * 0.001;
+        this._details.camera.upperRadiusLimit = goalRadius * 5;
+        this._details.camera.minZ = goalRadius * 0.001;
+        this._details.camera.maxZ = goalRadius * 1000;
+        this._details.camera.wheelDeltaPercentage = 0.01;
+        this._details.camera.useNaturalPinchZoom = true;
+        this._details.camera.restoreStateInterpolationFactor = 0.1;
+        this._details.camera.storeState();
+        if (interpolate) {
+            this._details.camera.alpha = currentAlpha;
+            this._details.camera.beta = currentBeta;
+            this._details.camera.radius = currentRadius;
+            this._details.camera.target = currentTarget;
+            this._details.camera.interpolateTo(goalAlpha, goalBeta, goalRadius, goalTarget);
+        }
+        updateSkybox(this._skybox, this._details.camera);
+    }
+    _updateLight() {
+        let shouldHaveDefaultLight;
+        if (!this._details.model) {
+            shouldHaveDefaultLight = false;
+        }
+        else {
+            const hasModelProvidedLights = this._details.model.lights.length > 0;
+            const hasImageBasedLighting = !!this._details.scene.environmentTexture;
+            const hasMaterials = this._details.model.materials.length > 0;
+            const hasNonPBRMaterials = this._details.model.materials.some((material) => !(material instanceof PBRMaterial));
+            if (hasModelProvidedLights) {
+                shouldHaveDefaultLight = false;
+            }
+            else {
+                shouldHaveDefaultLight = !hasImageBasedLighting || !hasMaterials || hasNonPBRMaterials;
+            }
+        }
+        if (shouldHaveDefaultLight) {
+            if (!this._light) {
+                this._light = new HemisphericLight("defaultLight", Vector3.Up(), this._details.scene);
+            }
+        }
+        else {
+            this._light?.dispose();
+            this._light = null;
+        }
+    }
+    _applyAnimationSpeed() {
+        this._details.model?.animationGroups.forEach((group) => (group.speedRatio = this._animationSpeed));
+    }
+    async _pick(screenX, screenY) {
+        await import('@babylonjs/core/Culling/ray.js');
+        if (this._details.model) {
+            const model = this._details.model;
+            // Refresh bounding info to ensure morph target and skeletal animations are taken into account.
+            model.meshes.forEach((mesh) => {
+                let cache = this._meshDataCache.get(mesh);
+                if (!cache) {
+                    cache = {};
+                    this._meshDataCache.set(mesh, cache);
+                }
+                mesh.refreshBoundingInfo({ applyMorph: true, applySkeleton: true, cache });
+            });
+            const pickingInfo = this._details.scene.pick(screenX, screenY, (mesh) => model.meshes.includes(mesh));
+            if (pickingInfo.hit) {
+                return pickingInfo;
+            }
+        }
+        return null;
+    }
+    /**
+     * Check for disposed or aborted state (basically everything that can interrupt an async operation).
+     * @param abortSignals A set of optional AbortSignals to also check.
+     */
+    _throwIfDisposedOrAborted(...abortSignals) {
+        if (this._isDisposed) {
+            throw new Error("Viewer is disposed.");
+        }
+        throwIfAborted(...abortSignals);
+    }
+}
+(() => {
+    registerBuiltInLoaders();
+})();
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$5=t=>new n$3("string"==typeof t?t:t+"",void 0,s$1),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$3(o,t,s$1)},S$1=(s,o)=>{if(e$4)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$5(e)})(t):t;
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:i$2,defineProperty:e$3,getOwnPropertyDescriptor:r$4,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$2,getPrototypeOf:n$2}=Object,a$1=globalThis,c$1=a$1.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$1=a$1.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$2(t,s),y$1={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$1.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$4(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$1.reactiveElementVersions??=[]).push("2.0.4");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$1=globalThis,i$1=t$1.trustedTypes,s=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$1="?"+h,n$1=`<${o$1}>`,r$3=document,l=()=>r$3.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a=Array.isArray,u=t=>a(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$3.createTreeWalker(r$3,129);function P(t,i){if(!a(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$1?i$1.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l());}}}else if(8===r.nodeType)if(r.data===o$1)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r$3.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(!1),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=S(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r$3).importNode(i,!0);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r$3,e}p(t){let i=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??!0;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=S(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$3.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l()),this.O(l()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){for(this._$AP?.(!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}}class z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){S(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.2.1");const B=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let r$2 = class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}};r$2._$litElement$=!0,r$2["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r$2});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r$2});(globalThis.litElementVersions??=[]).push("4.1.1");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t=t=>(e,o)=>{void 0!==o?o.addInitializer((()=>{customElements.define(t,e);})):customElements.define(t,e);};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o={attribute:!0,type:String,converter:u$1,reflect:!1,hasChanged:f$1},r$1=(t=o,e,r)=>{const{kind:n,metadata:i}=r;let s=globalThis.litPropertyMetadata.get(i);if(void 0===s&&globalThis.litPropertyMetadata.set(i,s=new Map),s.set(r.name,t),"accessor"===n){const{name:o}=r;return {set(r){const n=e.get.call(this);e.set.call(this,r),this.requestUpdate(o,n,t);},init(e){return void 0!==e&&this.P(o,void 0,t),e}}}if("setter"===n){const{name:o}=r;return function(r){const n=this[o];e.call(this,r),this.requestUpdate(o,n,t);}}throw Error("Unsupported decorator location: "+n)};function n(t){return (e,o)=>"object"==typeof o?r$1(t,e,o):((t,e,o)=>{const r=e.hasOwnProperty(o);return e.constructor.createProperty(o,r?{...t,wrapped:!0}:t),r?Object.getOwnPropertyDescriptor(e,o):void 0})(t,e,o)}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function r(r){return n({...r,state:!0,attribute:!1})}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
+const defaultCanvasViewerOptions = {};
+/**
+ * Chooses a default engine for the current browser environment.
+ * @returns The default engine to use.
+ */
+function getDefaultEngine() {
+    // TODO: When WebGPU is fully production ready, we may want to prefer it if it is supported by the browser.
+    return "WebGL";
+}
+/**
+ * @experimental
+ * 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.
+ */
+async function createViewerForCanvas(canvas, options) {
+    const finalOptions = { ...defaultCanvasViewerOptions, ...options };
+    const disposeActions = [];
+    // If the canvas is resized, note that the engine needs a resize, but don't resize it here as it will result in flickering.
+    let needsResize = false;
+    const resizeObserver = new ResizeObserver(() => (needsResize = true));
+    resizeObserver.observe(canvas);
+    disposeActions.push(() => resizeObserver.disconnect());
+    // Create an engine instance.
+    let engine;
+    switch (finalOptions.engine ?? getDefaultEngine()) {
+        case "WebGL": {
+            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations
+            const { Engine } = await import('@babylonjs/core/Engines/engine.js');
+            engine = new Engine(canvas, undefined, options);
+            break;
+        }
+        case "WebGPU": {
+            // eslint-disable-next-line @typescript-eslint/naming-convention, no-case-declarations
+            const { WebGPUEngine } = await import('@babylonjs/core/Engines/webgpuEngine.js');
+            const webGPUEngine = new WebGPUEngine(canvas, options);
+            await webGPUEngine.initAsync();
+            engine = webGPUEngine;
+            break;
+        }
+    }
+    // Override the onInitialized callback to add in some specific behavior.
+    const onInitialized = finalOptions.onInitialized;
+    finalOptions.onInitialized = (details) => {
+        // Resize if needed right before rendering the Viewer scene to avoid any flickering.
+        const beforeRenderObserver = details.scene.onBeforeRenderObservable.add(() => {
+            if (needsResize) {
+                engine.resize();
+                needsResize = false;
+            }
+        });
+        disposeActions.push(() => beforeRenderObserver.remove());
+        // If the canvas is not visible, suspend rendering.
+        let offscreenRenderingSuspension = null;
+        const intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries.length > 0) {
+                if (entries[entries.length - 1].isIntersecting) {
+                    offscreenRenderingSuspension?.dispose();
+                    offscreenRenderingSuspension = null;
+                }
+                else {
+                    offscreenRenderingSuspension = details.suspendRendering();
+                }
+            }
+        });
+        intersectionObserver.observe(canvas);
+        disposeActions.push(() => intersectionObserver.disconnect());
+        // Call the original onInitialized callback, if one was provided.
+        onInitialized?.(details);
+    };
+    // Instantiate the Viewer with the engine and options.
+    const viewer = new Viewer(engine, finalOptions);
+    disposeActions.push(viewer.dispose.bind(viewer));
+    disposeActions.push(() => engine.dispose());
+    // Override the Viewer's dispose method to add in additional cleanup.
+    viewer.dispose = () => disposeActions.forEach((dispose) => dispose());
+    return viewer;
+}
+
+var HTML3DElement_1;
+// Icon SVG is pulled from https://iconcloud.design
+const playFilledIcon = "M5 5.27368C5 3.56682 6.82609 2.48151 8.32538 3.2973L20.687 10.0235C22.2531 10.8756 22.2531 13.124 20.687 13.9762L8.32538 20.7024C6.82609 21.5181 5 20.4328 5 18.726V5.27368Z";
+const pauseFilledIcon = "M5.74609 3C4.7796 3 3.99609 3.7835 3.99609 4.75V19.25C3.99609 20.2165 4.7796 21 5.74609 21H9.24609C10.2126 21 10.9961 20.2165 10.9961 19.25V4.75C10.9961 3.7835 10.2126 3 9.24609 3H5.74609ZM14.7461 3C13.7796 3 12.9961 3.7835 12.9961 4.75V19.25C12.9961 20.2165 13.7796 21 14.7461 21H18.2461C19.2126 21 19.9961 20.2165 19.9961 19.25V4.75C19.9961 3.7835 19.2126 3 18.2461 3H14.7461Z";
+const arrowResetFilledIcon = "M7.20711 2.54289C7.59763 2.93342 7.59763 3.56658 7.20711 3.95711L5.41421 5.75H13.25C17.6683 5.75 21.25 9.33172 21.25 13.75C21.25 18.1683 17.6683 21.75 13.25 21.75C8.83172 21.75 5.25 18.1683 5.25 13.75C5.25 13.1977 5.69772 12.75 6.25 12.75C6.80228 12.75 7.25 13.1977 7.25 13.75C7.25 17.0637 9.93629 19.75 13.25 19.75C16.5637 19.75 19.25 17.0637 19.25 13.75C19.25 10.4363 16.5637 7.75 13.25 7.75H5.41421L7.20711 9.54289C7.59763 9.93342 7.59763 10.5666 7.20711 10.9571C6.81658 11.3476 6.18342 11.3476 5.79289 10.9571L2.29289 7.45711C1.90237 7.06658 1.90237 6.43342 2.29289 6.04289L5.79289 2.54289C6.18342 2.15237 6.81658 2.15237 7.20711 2.54289Z";
+const targetFilledIcon = "M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14ZM6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12ZM12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z";
+const allowedAnimationSpeeds = [0.5, 1, 1.5, 2];
+// Converts any standard html color string to a Color4 object.
+function parseColor(color) {
+    if (!color) {
+        return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = 1;
+    const context = canvas.getContext("2d");
+    if (!context) {
+        throw new Error("Unable to get 2d context for parseColor");
+    }
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = color;
+    context.fillRect(0, 0, 1, 1);
+    const data = context.getImageData(0, 0, 1, 1).data;
+    return new Color4(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+}
+/**
+ * Displays a 3D model using the Babylon.js Viewer.
+ */
+let HTML3DElement = HTML3DElement_1 = class HTML3DElement extends r$2 {
+    constructor() {
+        super(...arguments);
+        this._viewerLock = new AsyncLock();
+        // Bindings for properties that are synchronized both ways between the lower level Viewer and the HTML3DElement.
+        this._propertyBindings = [
+            this._createPropertyBinding("clearColor", (details) => details.scene.onClearColorChangedObservable, (details) => (details.scene.clearColor = this.clearColor ?? new Color4(0, 0, 0, 0)), (details) => (this.clearColor = details.scene.clearColor)),
+            this._createPropertyBinding("skyboxBlur", (details) => details.viewer.onSkyboxBlurChanged, (details) => (details.viewer.skyboxBlur = this.skyboxBlur ?? details.viewer.skyboxBlur), (details) => (this.skyboxBlur = details.viewer.skyboxBlur)),
+            this._createPropertyBinding("toneMapping", (details) => details.viewer.onPostProcessingChanged, (details) => {
+                if (this.toneMapping) {
+                    details.viewer.postProcessing = { toneMapping: this.toneMapping };
+                }
+            }, (details) => (this.toneMapping = details.viewer.postProcessing?.toneMapping)),
+            this._createPropertyBinding("contrast", (details) => details.viewer.onPostProcessingChanged, (details) => (details.viewer.postProcessing = { contrast: this.contrast ?? undefined }), (details) => (this.contrast = details.viewer.postProcessing.contrast)),
+            this._createPropertyBinding("exposure", (details) => details.viewer.onPostProcessingChanged, (details) => (details.viewer.postProcessing = { exposure: this.exposure ?? undefined }), (details) => (this.exposure = details.viewer.postProcessing.exposure)),
+            this._createPropertyBinding("cameraAutoOrbit", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { enabled: this.cameraAutoOrbit }), (details) => (this.cameraAutoOrbit = details.viewer.cameraAutoOrbit.enabled)),
+            this._createPropertyBinding("cameraAutoOrbitSpeed", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { speed: this.cameraAutoOrbitSpeed ?? undefined }), (details) => (this.cameraAutoOrbitSpeed = details.viewer.cameraAutoOrbit.speed)),
+            this._createPropertyBinding("cameraAutoOrbitDelay", (details) => details.viewer.onCameraAutoOrbitChanged, (details) => (details.viewer.cameraAutoOrbit = { delay: this.cameraAutoOrbitDelay ?? undefined }), (details) => (this.cameraAutoOrbitDelay = details.viewer.cameraAutoOrbit.delay)),
+            this._createPropertyBinding("animationSpeed", (details) => details.viewer.onAnimationSpeedChanged, (details) => (details.viewer.animationSpeed = this.animationSpeed), (details) => {
+                let speed = details.viewer.animationSpeed;
+                speed = allowedAnimationSpeeds.reduce((prev, curr) => (Math.abs(curr - speed) < Math.abs(prev - speed) ? curr : prev));
+                this.animationSpeed = speed;
+                this._dispatchCustomEvent("animationspeedchange", (type) => new Event(type));
+            }),
+            this._createPropertyBinding("selectedAnimation", (details) => details.viewer.onSelectedAnimationChanged, (details) => (details.viewer.selectedAnimation = this.selectedAnimation ?? details.viewer.selectedAnimation), (details) => (this.selectedAnimation = details.viewer.selectedAnimation)),
+            this._createPropertyBinding("selectedMaterialVariant", (details) => details.viewer.onSelectedMaterialVariantChanged, (details) => (details.viewer.selectedMaterialVariant = this.selectedMaterialVariant ?? details.viewer.selectedMaterialVariant ?? ""), (details) => (this.selectedMaterialVariant = details.viewer.selectedMaterialVariant)),
+        ];
+        /**
+         * The engine to use for rendering.
+         */
+        this.engine = getDefaultEngine();
+        /**
+         * The model URL.
+         */
+        this.source = null;
+        /**
+         * 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.
+         */
+        this.extension = null;
+        /**
+         * The texture URL for lighting.
+         */
+        this.environmentLighting = null;
+        /**
+         * The texture URL for the skybox.
+         */
+        this.environmentSkybox = null;
+        this._loadingProgress = false;
+        /**
+         * A value between 0 and 1 that specifies how much to blur the skybox.
+         */
+        this.skyboxBlur = null;
+        /**
+         * The tone mapping to use for rendering the scene.
+         */
+        this.toneMapping = null;
+        /**
+         * The contrast applied to the scene.
+         */
+        this.contrast = null;
+        /**
+         * The exposure applied to the scene.
+         */
+        this.exposure = null;
+        /**
+         * The clear color (e.g. background color) for the viewer.
+         */
+        this.clearColor = null;
+        /**
+         * Enables or disables camera auto-orbit.
+         */
+        this.cameraAutoOrbit = false;
+        /**
+         * The speed at which the camera auto-orbits around the target.
+         */
+        this.cameraAutoOrbitSpeed = null;
+        /**
+         * The delay in milliseconds before the camera starts auto-orbiting.
+         */
+        this.cameraAutoOrbitDelay = null;
+        /**
+         * Camera orbit can only be set as an attribute, and is set on the camera each time a new model is loaded.
+         * For access to the real time camera properties, use viewerDetails.camera.
+         */
+        this._cameraOrbitCoercer = null;
+        /**
+         * Camera target can only be set as an attribute, and is set on the camera each time a new model is loaded.
+         * For access to the real time camera properties, use viewerDetails.camera.
+         */
+        this._cameraTargetCoercer = null;
+        /**
+         * A string value that encodes one or more hotspots.
+         */
+        this.hotSpots = {};
+        /**
+         * True if the default animation should play automatically when a model is loaded.
+         */
+        this.animationAutoPlay = false;
+        /**
+         * The currently selected animation index.
+         */
+        this.selectedAnimation = null;
+        /**
+         * The speed scale at which animations are played.
+         */
+        this.animationSpeed = 1;
+        /**
+         * The current point on the selected animation timeline, normalized between 0 and 1.
+         */
+        this.animationProgress = 0;
+        this._animations = [];
+        this._isAnimationPlaying = false;
+        /**
+         * The currently selected material variant.
+         */
+        this.selectedMaterialVariant = null;
+    }
+    /**
+     * 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() {
+        return this._viewerDetails;
+    }
+    /**
+     * 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, result) {
+        return this._queryHotSpot(name, result) != null;
+    }
+    _queryHotSpot(name, result) {
+        if (this._viewerDetails) {
+            const hotSpot = this.hotSpots?.[name];
+            if (hotSpot) {
+                if (this._viewerDetails.viewer.getHotSpotToRef(hotSpot, result)) {
+                    return hotSpot;
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * 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) {
+        const result = new ViewerHotSpotResult();
+        const query = this._queryHotSpot(name, result);
+        if (query && this._viewerDetails) {
+            this._viewerDetails.viewer.pauseAnimation();
+            const cameraOrbit = query.cameraOrbit ?? [undefined, undefined, undefined];
+            this._viewerDetails.camera.interpolateTo(cameraOrbit[0], cameraOrbit[1], cameraOrbit[2], new Vector3(result.worldPosition[0], result.worldPosition[1], result.worldPosition[2]));
+            return true;
+        }
+        return false;
+    }
+    /**
+     * The texture URLs used for lighting and skybox. Setting this property will set both environmentLighting and environmentSkybox.
+     */
+    get environment() {
+        return { lighting: this.environmentLighting, skybox: this.environmentSkybox };
+    }
+    set environment(url) {
+        this.environmentLighting = url;
+        this.environmentSkybox = url;
+    }
+    /**
+     * 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() {
+        return this._loadingProgress;
+    }
+    get _hasHotSpots() {
+        return Object.keys(this.hotSpots).length > 0;
+    }
+    /**
+     * The list of animation names for the currently loaded model.
+     */
+    get animations() {
+        return this._animations;
+    }
+    get _hasAnimations() {
+        return this._animations.length > 0;
+    }
+    /**
+     * True if an animation is currently playing.
+     */
+    get isAnimationPlaying() {
+        return this._isAnimationPlaying;
+    }
+    /**
+     * The list of material variants for the currently loaded model.
+     */
+    get materialVariants() {
+        return this._viewerDetails?.viewer.materialVariants ?? [];
+    }
+    /**
+     * Toggles the play/pause animation state if there is a selected animation.
+     */
+    toggleAnimation() {
+        this._viewerDetails?.viewer.toggleAnimation();
+    }
+    /**
+     * Resets the camera to its initial pose.
+     */
+    resetCamera() {
+        this._viewerDetails?.viewer.resetCamera();
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupViewer();
+    }
+    /** @internal */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._tearDownViewer();
+    }
+    /** @internal */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (this._materialSelect) {
+            this._materialSelect.value = "";
+        }
+        if (changedProperties.get("engine")) {
+            this._tearDownViewer();
+            this._setupViewer();
+        }
+        else {
+            this._propertyBindings.filter((binding) => changedProperties.has(binding.property)).forEach((binding) => binding.updateViewer());
+            if (changedProperties.has("source")) {
+                this._updateModel();
+            }
+            if (changedProperties.has("environmentLighting") || changedProperties.has("environmentSkybox")) {
+                this._updateEnv({
+                    lighting: changedProperties.has("environmentLighting"),
+                    skybox: changedProperties.has("environmentSkybox"),
+                });
+            }
+        }
+    }
+    /** @internal */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    render() {
+        const showProgressBar = this.loadingProgress !== false;
+        // If loadingProgress is true, then the progress bar is indeterminate so the value doesn't matter.
+        const progressValue = typeof this.loadingProgress === "boolean" ? 0 : this.loadingProgress * 100;
+        const isIndeterminate = this.loadingProgress === true;
+        const progressBar = x `
+            <div part="progress-bar" class="bar loading-progress-outer ${showProgressBar ? "" : "loading-progress-outer-inactive"}" aria-label="Loading Progress">
+                <div
+                    class="loading-progress-inner ${isIndeterminate ? "loading-progress-inner-indeterminate" : ""}"
+                    style="${isIndeterminate ? "" : `width: ${progressValue}%`}"
+                ></div>
+            </div>
+        `;
+        // Setup the list of toolbar controls.
+        let toolbarControls = [];
+        if (this._viewerDetails?.model != null) {
+            // If the model has animations, add animation controls.
+            if (this._hasAnimations) {
+                toolbarControls.push(x `
+                    <div class="animation-timeline">
+                        <button aria-label="${this.isAnimationPlaying ? "Pause" : "Play"}" @click="${this.toggleAnimation}">
+                            ${!this.isAnimationPlaying
+                    ? x `
+                                      <svg viewBox="0 0 24 24">
+                                          <path d="${playFilledIcon}" fill="currentColor"></path>
+                                      </svg>
+                                  `
+                    : x `
+                                      <svg viewBox="0 0 24 24">
+                                          <path d="${pauseFilledIcon}" fill="currentColor"></path>
+                                      </svg>
+                                  `}
+                        </button>
+                        <input
+                            aria-label="Animation Progress"
+                            class="animation-timeline-input"
+                            type="range"
+                            min="0"
+                            max="1"
+                            step="0.0001"
+                            .value="${this.animationProgress}"
+                            @input="${this._onAnimationTimelineChanged}"
+                            @pointerdown="${this._onAnimationTimelinePointerDown}"
+                        />
+                    </div>
+                    <select aria-label="Select Animation Speed" @change="${this._onAnimationSpeedChanged}">
+                        ${allowedAnimationSpeeds.map((speed) => x `<option value="${speed}" .selected="${this.animationSpeed === speed}">${speed}x</option> `)}
+                    </select>
+                    ${this.animations.length > 1
+                    ? x `<select aria-label="Select Animation" @change="${this._onSelectedAnimationChanged}">
+                              ${this.animations.map((name, index) => x `<option value="${index}" .selected="${this.selectedAnimation === index}">${name}</option>`)}
+                          </select>`
+                    : ""}
+                `);
+            }
+            // If the model has material variants, add material variant controls.
+            if (this.materialVariants.length > 1) {
+                toolbarControls.push(x `
+                    <select aria-label="Select Material Variant" @change="${this._onMaterialVariantChanged}">
+                        ${this.materialVariants.map((name) => x `<option value="${name}" .selected="${this.selectedMaterialVariant === name}">${name}</option>`)}
+                    </select>
+                `);
+            }
+            // Always include a button to reset the camera pose.
+            toolbarControls.push(x `
+                <button aria-label="Reset Camera Pose" @click="${this.resetCamera}">
+                    <svg viewBox="0 0 24 24">
+                        <path d="${arrowResetFilledIcon}" fill="currentColor"></path>
+                    </svg>
+                </button>
+            `);
+            // If hotspots have been defined, add hotspot controls.
+            if (this._hasHotSpots) {
+                toolbarControls.push(x `
+                    <div class="select-container">
+                        <select id="materialSelect" aria-label="Select HotSpot" @change="${this._onHotSpotsChanged}">
+                            <!-- When the select is forced to be less wide than the options, padding on the right is lost. Pad with white space. -->
+                            ${Object.keys(this.hotSpots).map((name) => x `<option value="${name}">${name}&nbsp;&nbsp;</option>`)}
+                        </select>
+                        <!-- This button is not actually interactive, we want input to pass through to the select below. -->
+                        <button style="pointer-events: none">
+                            <svg viewBox="0 0 24 24">
+                                <path d="${targetFilledIcon}" fill="currentColor"></path>
+                            </svg>
+                        </button>
+                    </div>
+                `);
+            }
+            // Add a vertical divider between each toolbar control.
+            const controlCount = toolbarControls.length;
+            const separator = x `<div class="divider"></div>`;
+            toolbarControls = toolbarControls.reduce((toolbarControls, toolbarControl, index) => {
+                if (index < controlCount - 1) {
+                    return [...toolbarControls, toolbarControl, separator];
+                }
+                else {
+                    return [...toolbarControls, toolbarControl];
+                }
+            }, new Array());
+        }
+        // NOTE: The unnamed 'slot' element holds all child elements of the <babylon-viewer> that do not specify a 'slot' attribute.
+        return x `
+            <div class="full-size">
+                <div id="canvasContainer" class="full-size"></div>
+                <slot class="full-size children-slot"></slot>
+                <slot name="progress-bar"> ${progressBar}</slot>
+                ${toolbarControls.length === 0
+            ? ""
+            : x `
+                          <slot name="tool-bar">
+                              <div part="tool-bar" class="bar ${this._hasAnimations ? "" : "bar-min"} tool-bar">${toolbarControls}</div>
+                          </slot>
+                      `}
+            </div>
+        `;
+    }
+    addEventListener(type, listener, options) {
+        super.addEventListener(type, listener, options);
+    }
+    _dispatchCustomEvent(type, event) {
+        this.dispatchEvent(event(type));
+    }
+    _onSelectedAnimationChanged(event) {
+        const selectElement = event.target;
+        this.selectedAnimation = Number(selectElement.value);
+    }
+    _onAnimationSpeedChanged(event) {
+        const selectElement = event.target;
+        this.animationSpeed = Number(selectElement.value);
+    }
+    _onAnimationTimelineChanged(event) {
+        if (this._viewerDetails) {
+            const input = event.target;
+            const value = Number(input.value);
+            if (value !== this.animationProgress) {
+                this._viewerDetails.viewer.animationProgress = value;
+            }
+        }
+    }
+    _onAnimationTimelinePointerDown(event) {
+        if (this._viewerDetails?.viewer.isAnimationPlaying) {
+            this._viewerDetails.viewer.pauseAnimation();
+            const input = event.target;
+            input.addEventListener("pointerup", () => this._viewerDetails?.viewer.playAnimation(), { once: true });
+        }
+    }
+    _onMaterialVariantChanged(event) {
+        const selectElement = event.target;
+        this.selectedMaterialVariant = selectElement.value;
+    }
+    _onHotSpotsChanged(event) {
+        const selectElement = event.target;
+        const hotSpotName = selectElement.value;
+        // We don't actually want a selected value, this is just a one time trigger.
+        selectElement.value = "";
+        this.focusHotSpot(hotSpotName);
+    }
+    // Helper function to simplify keeping Viewer properties in sync with HTML3DElement properties.
+    _createPropertyBinding(property, getObservable, updateViewer, updateElement) {
+        return {
+            property,
+            // Called each time a Viewer instance is created.
+            onInitialized: (viewerDetails) => {
+                getObservable(viewerDetails).add(() => {
+                    updateElement(viewerDetails);
+                });
+                updateViewer(viewerDetails);
+            },
+            // Called when the HTML3DElement property should be propagated to the Viewer.
+            updateViewer: () => {
+                if (this._viewerDetails) {
+                    updateViewer(this._viewerDetails);
+                }
+            },
+            // Called to re-sync the HTML3DElement property with its corresponding attribute.
+            syncToAttribute: () => {
+                const descriptor = HTML3DElement_1.elementProperties.get(property);
+                if (descriptor) {
+                    if (descriptor.attribute) {
+                        const attributeName = descriptor.attribute === true ? property : descriptor.attribute;
+                        if (this.hasAttribute(attributeName)) {
+                            const attributeValue = this.getAttribute(attributeName);
+                            const converter = typeof descriptor.converter === "function"
+                                ? descriptor.converter
+                                : descriptor.converter?.fromAttribute !== undefined
+                                    ? descriptor.converter.fromAttribute
+                                    : u$1.fromAttribute;
+                            this[property] = converter ? converter(attributeValue, descriptor.type) : attributeValue;
+                        }
+                    }
+                }
+            },
+        };
+    }
+    async _setupViewer() {
+        await this._viewerLock.lockAsync(async () => {
+            // The first time the element is connected, the canvas container may not be available yet.
+            // Wait for the first update if needed.
+            if (!this._canvasContainer) {
+                await this.updateComplete;
+            }
+            if (this._canvasContainer && !this._viewerDetails) {
+                const canvas = document.createElement("canvas");
+                canvas.className = "full-size canvas";
+                canvas.setAttribute("touch-action", "none");
+                this._canvasContainer.appendChild(canvas);
+                await createViewerForCanvas(canvas, {
+                    engine: this.engine,
+                    onInitialized: (details) => {
+                        this._viewerDetails = details;
+                        details.viewer.onEnvironmentChanged.add(() => {
+                            this._dispatchCustomEvent("environmentchange", (type) => new Event(type));
+                        });
+                        details.viewer.onEnvironmentError.add((error) => {
+                            this._dispatchCustomEvent("environmenterror", (type) => new ErrorEvent(type, { error }));
+                        });
+                        details.viewer.onModelChanged.add(() => {
+                            this._animations = [...details.viewer.animations];
+                            // When attributes are explicitly set, they are re-applied when a new model is loaded.
+                            this._propertyBindings.forEach((binding) => binding.syncToAttribute());
+                            // The same goes for camera pose attributes, but it is handled a little differently because there are no corresponding public properties
+                            // (since the underlying Babylon camera already has these properties).
+                            this._cameraOrbitCoercer?.(details.camera);
+                            this._cameraTargetCoercer?.(details.camera);
+                            // If animation auto play was set, then start the default animation (if possible).
+                            if (this.animationAutoPlay) {
+                                details.viewer.playAnimation();
+                            }
+                            this._dispatchCustomEvent("modelchange", (type) => new Event(type));
+                        });
+                        details.viewer.onModelError.add((error) => {
+                            this._animations = [...details.viewer.animations];
+                            this._dispatchCustomEvent("modelerror", (type) => new ErrorEvent(type, { error }));
+                        });
+                        details.viewer.onLoadingProgressChanged.add(() => {
+                            this._loadingProgress = details.viewer.loadingProgress;
+                            this._dispatchCustomEvent("loadingprogresschange", (type) => new Event(type));
+                        });
+                        details.viewer.onIsAnimationPlayingChanged.add(() => {
+                            this._isAnimationPlaying = details.viewer.isAnimationPlaying ?? false;
+                            this._dispatchCustomEvent("animationplayingchange", (type) => new Event(type));
+                        });
+                        details.viewer.onAnimationProgressChanged.add(() => {
+                            this.animationProgress = details.viewer.animationProgress ?? 0;
+                            this._dispatchCustomEvent("animationprogresschange", (type) => new Event(type));
+                        });
+                        details.scene.onAfterRenderCameraObservable.add(() => {
+                            this._dispatchCustomEvent("viewerrender", (type) => new Event(type));
+                        });
+                        this._updateModel();
+                        this._updateEnv({ lighting: true, skybox: true });
+                        this._propertyBindings.forEach((binding) => binding.onInitialized(details));
+                        this._dispatchCustomEvent("viewerready", (type) => new Event(type));
+                    },
+                });
+            }
+        });
+    }
+    async _tearDownViewer() {
+        await this._viewerLock.lockAsync(async () => {
+            if (this._viewerDetails) {
+                this._viewerDetails.viewer.dispose();
+                this._viewerDetails = undefined;
+            }
+            // We want to replace the canvas for two reasons:
+            // 1. When the viewer element is reconnected to the DOM, we don't want to briefly see the last frame of the previous model.
+            // 2. If we are changing engines (e.g. WebGL to WebGPU), we need to create a new canvas for the new engine.
+            if (this._canvasContainer && this._canvasContainer.firstElementChild) {
+                this._canvasContainer.removeChild(this._canvasContainer.firstElementChild);
+            }
+        });
+    }
+    async _updateModel() {
+        if (this._viewerDetails) {
+            try {
+                if (this.source) {
+                    await this._viewerDetails.viewer.loadModel(this.source, { pluginExtension: this.extension ?? undefined, defaultAnimation: this.selectedAnimation ?? 0 });
+                }
+                else {
+                    await this._viewerDetails.viewer.resetModel();
+                }
+            }
+            catch (error) {
+                Logger.Log(error);
+            }
+        }
+    }
+    async _updateEnv(options) {
+        if (this._viewerDetails) {
+            try {
+                const updates = [];
+                if (options.lighting && options.skybox && this.environmentLighting === this.environmentSkybox) {
+                    updates.push([this.environmentLighting, { lighting: true, skybox: true }]);
+                }
+                else {
+                    if (options.lighting) {
+                        updates.push([this.environmentLighting, { lighting: true }]);
+                    }
+                    if (options.skybox) {
+                        updates.push([this.environmentSkybox, { skybox: true }]);
+                    }
+                }
+                updates.forEach(async ([url, options]) => {
+                    if (url) {
+                        await this._viewerDetails?.viewer.loadEnvironment(url, options);
+                    }
+                    else {
+                        await this._viewerDetails?.viewer.resetEnvironment(options);
+                    }
+                });
+            }
+            catch (error) {
+                Logger.Log(error);
+            }
+        }
+    }
+};
+/** @internal */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+HTML3DElement.styles = i$3 `
+        :host {
+            --ui-foreground-color: white;
+            --ui-background-hue: 233;
+            --ui-background-saturation: 8%;
+            --ui-background-lightness: 39%;
+            --ui-background-opacity: 0.75;
+            --ui-background-color: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), var(--ui-background-opacity));
+            --ui-background-color-hover: hsla(
+                var(--ui-background-hue),
+                var(--ui-background-saturation),
+                calc(var(--ui-background-lightness) - 10%),
+                calc(var(--ui-background-opacity) - 0.1)
+            );
+            all: inherit;
+            overflow: hidden;
+        }
+
+        .full-size {
+            display: block;
+            position: relative;
+            width: 100%;
+            height: 100%;
+        }
+
+        .canvas {
+            outline: none;
+        }
+
+        .children-slot {
+            position: absolute;
+            top: 0;
+            background: transparent;
+            pointer-events: none;
+        }
+
+        .bar {
+            position: absolute;
+            width: calc(100% - 24px);
+            min-width: 150px;
+            max-width: 1280px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: var(--ui-background-color);
+        }
+
+        .bar-min {
+            width: unset;
+            min-width: unset;
+            max-width: unset;
+        }
+
+        .loading-progress-outer {
+            height: 4px;
+            border-radius: 4px;
+            border: 1px solid var(--ui-background-color);
+            outline: none;
+            top: 12px;
+            pointer-events: none;
+            transition: opacity 0.5s ease;
+        }
+
+        .loading-progress-outer-inactive {
+            opacity: 0;
+            /* Set the background color to the foreground color while in the inactive state so that the color seen is correct while fading out the opacity. */
+            background-color: var(--ui-foreground-color);
+        }
+
+        .loading-progress-inner {
+            width: 0;
+            height: 100%;
+            border-radius: inherit;
+            background-color: var(--ui-foreground-color);
+            transition: width 0.3s linear;
+        }
+
+        /* The right side of the inner progress bar starts aligned with the left side of the outer progress bar (container).
+           So, if the width is 30%, then the left side of the inner progress bar moves a total of 130% of the width of the container.
+           This is why the first keyframe is at 23% ((100/130)*30).
+         */
+        @keyframes indeterminate {
+            0% {
+                left: 0%;
+                width: 0%;
+            }
+            23% {
+                left: 0%;
+                width: 30%;
+            }
+            77% {
+                left: 70%;
+                width: 30%;
+            }
+            100% {
+                left: 100%;
+                width: 0%;
+            }
+        }
+
+        .loading-progress-inner-indeterminate {
+            position: absolute;
+            animation: indeterminate 1.5s infinite;
+            animation-timing-function: linear;
+        }
+
+        .tool-bar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            border-radius: 12px;
+            border-color: var(--ui-foreground-color);
+            height: 48px;
+            bottom: 12px;
+            color: var(--ui-foreground-color);
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .tool-bar * {
+            height: 100%;
+            min-width: 48px;
+        }
+
+        .tool-bar .divider {
+            min-width: 1px;
+            margin: 0px 6px;
+            height: 66%;
+            background-color: var(--ui-foreground-color);
+        }
+
+        .tool-bar select {
+            background: none;
+            min-width: 52px;
+            max-width: 128px;
+            border: 1px solid transparent;
+            border-radius: inherit;
+            color: inherit;
+            font-size: 14px;
+            padding: 0px 12px;
+            cursor: pointer;
+            outline: none;
+            appearance: none; /* Remove default styling */
+            -webkit-appearance: none; /* Remove default styling for Safari */
+        }
+
+        .tool-bar .select-container {
+            position: relative;
+            display: flex;
+            border-radius: inherit;
+            border-width: 0;
+            padding: 0;
+        }
+
+        .tool-bar .select-container select {
+            position: absolute;
+            min-width: 0;
+            width: 100%;
+        }
+
+        .tool-bar .select-container button {
+            position: absolute;
+            border-width: 0;
+        }
+
+        .tool-bar select:hover,
+        .tool-bar select:focus {
+            background-color: var(--ui-background-color-hover);
+        }
+
+        .tool-bar select option {
+            background-color: var(--ui-background-color);
+            color: var(--ui-foreground-color);
+        }
+
+        .tool-bar select:focus-visible {
+            border-color: inherit;
+        }
+
+        .tool-bar button {
+            background: none;
+            border: 1px solid transparent;
+            border-radius: inherit;
+            color: inherit;
+            padding: 0;
+            cursor: pointer;
+            outline: none;
+        }
+
+        .tool-bar button:hover {
+            background-color: var(--ui-background-color-hover);
+        }
+
+        .tool-bar button:focus-visible {
+            border-color: inherit;
+        }
+
+        .tool-bar button svg {
+            width: 32px;
+            height: 32px;
+        }
+
+        .animation-timeline {
+            display: flex;
+            flex: 1;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+            align-items: center;
+            border-radius: inherit;
+            border-color: inherit;
+        }
+
+        .animation-timeline-input {
+            -webkit-appearance: none;
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+            outline: none;
+            border: 1px solid transparent;
+            border-radius: inherit;
+            padding: 0 12px;
+            background-color: transparent;
+        }
+
+        .animation-timeline-input:focus-visible {
+            border-color: inherit;
+        }
+
+        /*Chrome -webkit */
+
+        .animation-timeline-input::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border: 2px solid;
+            color: var(--ui-foreground-color);
+            border-radius: 50%;
+            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);
+            margin-top: -10px;
+        }
+
+        .animation-timeline-input::-webkit-slider-runnable-track {
+            height: 2px;
+            -webkit-appearance: none;
+            background-color: var(--ui-foreground-color);
+        }
+
+        /** FireFox -moz */
+
+        .animation-timeline-input::-moz-range-progress {
+            height: 2px;
+            background-color: var(--ui-foreground-color);
+        }
+
+        .animation-timeline-input::-moz-range-thumb {
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--ui-foreground-color);
+            border-radius: 50%;
+            background: hsla(var(--ui-background-hue), var(--ui-background-saturation), var(--ui-background-lightness), 1);
+        }
+
+        .animation-timeline-input::-moz-range-track {
+            height: 2px;
+            background: var(--ui-foreground-color);
+        }
+    `;
+__decorate([
+    n({
+        converter: (value) => {
+            if (value === "WebGL" || value === "WebGPU") {
+                return value;
+            }
+            return getDefaultEngine();
+        },
+    })
+], HTML3DElement.prototype, "engine", void 0);
+__decorate([
+    n()
+], HTML3DElement.prototype, "source", void 0);
+__decorate([
+    n()
+], HTML3DElement.prototype, "extension", void 0);
+__decorate([
+    n({
+        hasChanged: (newValue, oldValue) => {
+            return newValue.lighting !== oldValue.lighting || newValue.skybox !== oldValue.skybox;
+        },
+    })
+], HTML3DElement.prototype, "environment", null);
+__decorate([
+    n({ attribute: "environment-lighting" })
+], HTML3DElement.prototype, "environmentLighting", void 0);
+__decorate([
+    n({ attribute: "environment-skybox" })
+], HTML3DElement.prototype, "environmentSkybox", void 0);
+__decorate([
+    r()
+], HTML3DElement.prototype, "_loadingProgress", void 0);
+__decorate([
+    n({ attribute: "skybox-blur" })
+], HTML3DElement.prototype, "skyboxBlur", void 0);
+__decorate([
+    n({
+        attribute: "tone-mapping",
+        converter: (value) => {
+            if (!value || !isToneMapping(value)) {
+                return "neutral";
+            }
+            return value;
+        },
+    })
+], HTML3DElement.prototype, "toneMapping", void 0);
+__decorate([
+    n()
+], HTML3DElement.prototype, "contrast", void 0);
+__decorate([
+    n()
+], HTML3DElement.prototype, "exposure", void 0);
+__decorate([
+    n({
+        attribute: "clear-color",
+        reflect: true,
+        converter: {
+            fromAttribute: parseColor,
+            toAttribute: (color) => (color ? color.toHexString() : null),
+        },
+    })
+], HTML3DElement.prototype, "clearColor", void 0);
+__decorate([
+    n({
+        attribute: "camera-auto-orbit",
+        type: Boolean,
+    })
+], HTML3DElement.prototype, "cameraAutoOrbit", void 0);
+__decorate([
+    n({
+        attribute: "camera-auto-orbit-speed",
+        type: Number,
+    })
+], HTML3DElement.prototype, "cameraAutoOrbitSpeed", void 0);
+__decorate([
+    n({
+        attribute: "camera-auto-orbit-delay",
+        type: Number,
+    })
+], HTML3DElement.prototype, "cameraAutoOrbitDelay", void 0);
+__decorate([
+    n({
+        attribute: "camera-orbit",
+        converter: (value) => {
+            if (!value) {
+                return null;
+            }
+            const array = value.split(/\s+/);
+            if (array.length !== 3) {
+                throw new Error("cameraOrbit should be defined as 'alpha beta radius'");
+            }
+            return (camera) => {
+                for (const [index, property] of ["alpha", "beta", "radius"].entries()) {
+                    const value = array[index];
+                    if (value !== "auto") {
+                        camera[property] = Number(value);
+                    }
+                }
+            };
+        },
+    })
+], HTML3DElement.prototype, "_cameraOrbitCoercer", void 0);
+__decorate([
+    n({
+        attribute: "camera-target",
+        converter: (value) => {
+            if (!value) {
+                return null;
+            }
+            const array = value.split(/\s+/);
+            if (array.length !== 3) {
+                throw new Error("cameraTarget should be defined as 'x y z'");
+            }
+            return (camera) => {
+                const target = camera.target;
+                for (const [index, property] of ["x", "y", "z"].entries()) {
+                    const value = array[index];
+                    if (value !== "auto") {
+                        target[property] = Number(value);
+                    }
+                }
+                camera.target = target.clone();
+            };
+        },
+    })
+], HTML3DElement.prototype, "_cameraTargetCoercer", void 0);
+__decorate([
+    n({
+        attribute: "hotspots",
+        converter: (value) => {
+            if (!value) {
+                return {};
+            }
+            return JSON.parse(value);
+        },
+    })
+], HTML3DElement.prototype, "hotSpots", void 0);
+__decorate([
+    n({ attribute: "animation-auto-play", reflect: true, type: Boolean })
+], HTML3DElement.prototype, "animationAutoPlay", void 0);
+__decorate([
+    n({ attribute: "selected-animation", type: Number })
+], HTML3DElement.prototype, "selectedAnimation", void 0);
+__decorate([
+    n({ attribute: "animation-speed" })
+], HTML3DElement.prototype, "animationSpeed", void 0);
+__decorate([
+    n({ attribute: false })
+], HTML3DElement.prototype, "animationProgress", void 0);
+__decorate([
+    r()
+], HTML3DElement.prototype, "_animations", void 0);
+__decorate([
+    r()
+], HTML3DElement.prototype, "_isAnimationPlaying", void 0);
+__decorate([
+    n({ attribute: "material-variant" })
+], HTML3DElement.prototype, "selectedMaterialVariant", void 0);
+__decorate([
+    e("#canvasContainer")
+], HTML3DElement.prototype, "_canvasContainer", void 0);
+__decorate([
+    e("#materialSelect")
+], HTML3DElement.prototype, "_materialSelect", void 0);
+HTML3DElement = HTML3DElement_1 = __decorate([
+    t("babylon-viewer")
+], HTML3DElement);
+
+/**
+ * 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.
+ */
+let HTML3DAnnotationElement = class HTML3DAnnotationElement extends r$2 {
+    constructor() {
+        super(...arguments);
+        this._internals = this.attachInternals();
+        this._viewerAttachment = null;
+        /**
+         * The name of the hotspot to track.
+         */
+        this.hotSpot = "";
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this._internals.states?.add("invalid");
+        if (!(this.parentElement instanceof HTML3DElement)) {
+            // eslint-disable-next-line no-console
+            console.warn("The babylon-viewer-annotation element must be a child of a babylon-viewer element.");
+            return;
+        }
+        const viewerElement = this.parentElement;
+        const hotSpotResult = new ViewerHotSpotResult();
+        const onViewerRendered = () => {
+            if (this.hotSpot) {
+                if (viewerElement.queryHotSpot(this.hotSpot, hotSpotResult)) {
+                    const [screenX, screenY] = hotSpotResult.screenPosition;
+                    this.style.transform = `translate(${screenX}px, ${screenY}px)`;
+                    this._internals.states?.delete("invalid");
+                    if (hotSpotResult.visibility <= 0) {
+                        this._internals.states?.add("back-facing");
+                    }
+                    else {
+                        this._internals.states?.delete("back-facing");
+                    }
+                }
+                else {
+                    this._internals.states?.add("invalid");
+                }
+            }
+        };
+        viewerElement.addEventListener("viewerrender", onViewerRendered);
+        this._viewerAttachment = {
+            dispose() {
+                viewerElement.removeEventListener("viewerrender", onViewerRendered);
+            },
+        };
+    }
+    /** @internal */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._viewerAttachment?.dispose();
+        this._viewerAttachment = null;
+        this._internals.states?.add("invalid");
+    }
+    /** @internal */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    render() {
+        return x ` <slot></slot> `;
+    }
+};
+/** @internal */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+HTML3DAnnotationElement.styles = i$3 `
+        :host {
+            display: inline-block;
+            position: absolute;
+            transition: opacity 0.25s;
+        }
+        :host([hidden]) {
+            display: none;
+        }
+        :host(:state(back-facing)) {
+            opacity: 0.2;
+        }
+        :host(:state(invalid)) {
+            display: none;
+        }
+    `;
+__decorate([
+    n({ attribute: "hotspot" })
+], HTML3DAnnotationElement.prototype, "hotSpot", void 0);
+HTML3DAnnotationElement = __decorate([
+    t("babylon-viewer-annotation")
+], HTML3DAnnotationElement);
+
+export { HTML3DAnnotationElement, HTML3DElement, Viewer, ViewerHotSpotResult, createViewerForCanvas };
+//# sourceMappingURL=index.js.map