@babylonjs/viewer 7.29.0-alpha → 7.30.0

package/lib/index.js

@@ -1,1105 +0,0 @@
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js';
-import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight.js';
-import { loadAssetContainerAsync } from '@babylonjs/core/Loading/sceneLoader.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 { Color4 } from '@babylonjs/core/Maths/math.color.js';
-import { Clamp } from '@babylonjs/core/Maths/math.scalar.functions.js';
-import { Vector3, TmpVectors } from '@babylonjs/core/Maths/math.vector.js';
-import { CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder.js';
-import { computeMaxExtents } from '@babylonjs/core/Meshes/meshUtils.js';
-import { AsyncLock } from '@babylonjs/core/Misc/asyncLock.js';
-import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { Scene } from '@babylonjs/core/scene.js';
-import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic.js';
-import { Viewport } from '@babylonjs/core/Maths/math.viewport.js';
-import { GetHotSpotToRef } from '@babylonjs/core/Meshes/abstractMesh.hotSpot.js';
-import { __decorate } from '@babylonjs/core/tslib.es6.js';
-import { css, LitElement, html } from 'lit';
-import { property, state, query, customElement } from 'lit/decorators.js';
-import { Logger } from '@babylonjs/core/Misc/logger.js';
-
-function throwIfAborted(...abortSignals) {
-    for (const signal of abortSignals) {
-        signal?.throwIfAborted();
-    }
-}
-function createSkybox(scene, camera, environmentTexture, blur) {
-    const hdrSkybox = CreateBox("hdrSkyBox", undefined, scene);
-    const hdrSkyboxMaterial = new PBRMaterial("skyBox", scene);
-    hdrSkyboxMaterial.backFaceCulling = false;
-    hdrSkyboxMaterial.reflectionTexture = environmentTexture.clone();
-    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;
-    hdrSkybox.ignoreCameraMaxZ = true;
-    updateSkybox(hdrSkybox, camera);
-    return hdrSkybox;
-}
-function updateSkybox(skybox, camera) {
-    skybox?.scaling.setAll((camera.maxZ - camera.minZ) / 2);
-}
-const defaultViewerOptions = {
-    backgroundColor: new Color4(0.1, 0.1, 0.2, 1.0),
-};
-/**
- * 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.
- * Includes (or will include) support for common model viewing requirements such as:
- * - Loading different model formats.
- * - Setting up a camera and providing default behaviors like auto orbit and pose interpolation.
- * - Framing the loaded model in the camera's view.
- * - Setting up the environment, lighting, and tone mapping.
- * - Enumerating and playing (or auto playing) animations.
- * - Enumerating and switching between material variants.
- * - Full screen and XR modes.
- */
-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 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 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();
-        this._skybox = null;
-        this._light = null;
-        this._isDisposed = false;
-        this._loadModelLock = new AsyncLock();
-        this._loadModelAbortController = null;
-        this._loadEnvironmentLock = new AsyncLock();
-        this._environment = null;
-        this._loadEnvironmentAbortController = null;
-        this._selectedAnimation = -1;
-        this._activeAnimationObservers = [];
-        this._animationSpeed = 1;
-        const finalOptions = { ...defaultViewerOptions, ...options };
-        this._details = {
-            viewer: this,
-            scene: new Scene(this._engine),
-            model: null,
-        };
-        this._details.scene.performancePriority = 2 /* ScenePerformancePriority.Aggressive */;
-        this._details.scene.clearColor = finalOptions.backgroundColor;
-        this._camera = new ArcRotateCamera("camera1", 0, 0, 1, Vector3.Zero(), this._details.scene);
-        this._camera.attachControl();
-        this._updateCamera(); // set default camera values
-        this._autoRotationBehavior = this._camera.getBehaviorByName("AutoRotation");
-        // Load a default light, but ignore errors as the user might be immediately loading their own environment.
-        this.resetEnvironment().catch(() => { });
-        // TODO: render at least back ground. Maybe we can only run renderloop when a mesh is loaded. What to render until then?
-        const render = () => {
-            this._details.scene.render();
-            if (this.isAnimationPlaying) {
-                this.onAnimationProgressChanged.notifyObservers();
-                this._autoRotationBehavior.resetLastInteractionTime();
-            }
-        };
-        this._engine.runRenderLoop(render);
-        this._renderLoopController = {
-            dispose: () => this._engine.stopRenderLoop(render),
-        };
-        options?.onInitialized?.(this._details);
-    }
-    /**
-     * 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.onSelectedAnimationChanged.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;
-    }
-    /**
-     * 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);
-        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._details.model?.dispose();
-            this._details.model = null;
-            this.selectedAnimation = -1;
-            try {
-                if (source) {
-                    this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);
-                    this._details.model.animationGroups.forEach((group) => {
-                        group.start(true, this.animationSpeed);
-                        group.pause();
-                    });
-                    this.selectedAnimation = 0;
-                    this._details.model.addAllToScene();
-                }
-                this._updateCamera();
-                this._updateLight();
-                this._applyAnimationSpeed();
-                this.onModelChanged.notifyObservers();
-            }
-            catch (e) {
-                this.onModelError.notifyObservers(e);
-                throw e;
-            }
-        });
-    }
-    /**
-     * 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 abortSignal An optional signal that can be used to abort the reset.
-     */
-    async resetEnvironment(abortSignal) {
-        await this._updateEnvironment(undefined, undefined, abortSignal);
-    }
-    async _updateEnvironment(url, options, abortSignal) {
-        this._throwIfDisposedOrAborted(abortSignal);
-        this._loadEnvironmentAbortController?.abort("New environment is being loaded before previous environment finished loading.");
-        const abortController = (this._loadEnvironmentAbortController = new AbortController());
-        await this._loadEnvironmentLock.lockAsync(async () => {
-            throwIfAborted(abortSignal, abortController.signal);
-            this._environment?.dispose();
-            this._environment = null;
-            this._details.scene.autoClear = true;
-            try {
-                if (url) {
-                    this._environment = await new Promise((resolve, reject) => {
-                        const cubeTexture = CubeTexture.CreateFromPrefilteredData(url, this._details.scene);
-                        this._details.scene.environmentTexture = cubeTexture;
-                        const skybox = createSkybox(this._details.scene, this._camera, cubeTexture, 0.3);
-                        this._skybox = skybox;
-                        this._details.scene.autoClear = false;
-                        const dispose = () => {
-                            cubeTexture.dispose();
-                            skybox.dispose();
-                            this._skybox = null;
-                        };
-                        const successObserver = cubeTexture.onLoadObservable.addOnce(() => {
-                            successObserver.remove();
-                            errorObserver.remove();
-                            resolve({
-                                dispose,
-                            });
-                        });
-                        const errorObserver = Texture.OnTextureLoadErrorObservable.add((texture) => {
-                            if (texture === cubeTexture) {
-                                successObserver.remove();
-                                errorObserver.remove();
-                                dispose();
-                                reject(new Error("Failed to load environment texture."));
-                            }
-                        });
-                    });
-                }
-                this._updateLight();
-                this.onEnvironmentChanged.notifyObservers();
-            }
-            catch (e) {
-                this.onEnvironmentError.notifyObservers(e);
-                throw e;
-            }
-        });
-    }
-    /**
-     * 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();
-    }
-    /**
-     * 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.onModelChanged.clear();
-        this.onModelError.clear();
-        this.onSelectedAnimationChanged.clear();
-        this.onAnimationSpeedChanged.clear();
-        this.onIsAnimationPlayingChanged.clear();
-        this.onAnimationProgressChanged.clear();
-        this._isDisposed = true;
-    }
-    /**
-     * retrun world and canvas coordinates of an hot spot
-     * @param hotSpotQuery mesh index and surface information to query the hot spot positions
-     * @param res 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(hotSpotQuery, res) {
-        if (!this._details.model) {
-            return false;
-        }
-        const worldPos = TmpVectors.Vector3[1];
-        const screenPos = TmpVectors.Vector3[0];
-        const mesh = this._details.model.meshes[hotSpotQuery.meshIndex];
-        if (!mesh) {
-            return false;
-        }
-        GetHotSpotToRef(mesh, hotSpotQuery, worldPos);
-        const renderWidth = this._engine.getRenderWidth(); // Get the canvas width
-        const renderHeight = this._engine.getRenderHeight(); // Get the canvas height
-        const viewportWidth = this._camera.viewport.width * renderWidth;
-        const viewportHeight = this._camera.viewport.height * renderHeight;
-        const scene = this._details.scene;
-        Vector3.ProjectToRef(worldPos, mesh.getWorldMatrix(), scene.getTransformMatrix(), new Viewport(0, 0, viewportWidth, viewportHeight), screenPos);
-        res.screenPosition = [screenPos.x, screenPos.y];
-        res.worldPosition = [worldPos.x, worldPos.y, worldPos.z];
-        return true;
-    }
-    _updateCamera() {
-        // Enable camera's behaviors
-        this._camera.useFramingBehavior = true;
-        const framingBehavior = this._camera.getBehaviorByName("Framing");
-        framingBehavior.framingTime = 0;
-        framingBehavior.elevationReturnTime = -1;
-        let radius = 1;
-        if (this._details.model?.meshes.length) {
-            // get bounds and prepare framing/camera radius from its values
-            this._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));
-            radius = worldSize.length() * 1.1;
-            if (!isFinite(radius)) {
-                radius = 1;
-                worldCenter.copyFromFloats(0, 0, 0);
-            }
-            this._camera.setTarget(worldCenter);
-        }
-        this._camera.lowerRadiusLimit = radius * 0.01;
-        this._camera.wheelPrecision = 100 / radius;
-        this._camera.alpha = Math.PI / 2;
-        this._camera.beta = Math.PI / 2.4;
-        this._camera.radius = radius;
-        this._camera.minZ = radius * 0.01;
-        this._camera.maxZ = radius * 1000;
-        this._camera.speed = radius * 0.2;
-        this._camera.useAutoRotationBehavior = true;
-        this._camera.pinchPrecision = 200 / this._camera.radius;
-        this._camera.upperRadiusLimit = 5 * this._camera.radius;
-        this._camera.wheelDeltaPercentage = 0.01;
-        this._camera.pinchDeltaPercentage = 0.01;
-        this._camera.restoreStateInterpolationFactor = 0.1;
-        this._camera.storeState();
-        updateSkybox(this._skybox, this._camera);
-    }
-    _updateLight() {
-        let shouldHaveDefaultLight;
-        if (!this._details.model) {
-            shouldHaveDefaultLight = false;
-        }
-        else {
-            const hasModelProvidedLights = this._details.model.lights.length > 0;
-            const hasImageBasedLighting = !!this._environment;
-            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));
-    }
-    /**
-     * 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();
-})();
-
-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";
-}
-/**
- * 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());
-        // 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;
-}
-
-// Icon SVG is pulled from https://fluentuipr.z22.web.core.windows.net/heads/master/public-docsite-v9/storybook/iframe.html?id=icons-catalog--page&viewMode=story
-const playFilledIcon = "M17.22 8.68a1.5 1.5 0 0 1 0 2.63l-10 5.5A1.5 1.5 0 0 1 5 15.5v-11A1.5 1.5 0 0 1 7.22 3.2l10 5.5Z";
-const pauseFilledIcon = "M5 2a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H5Zm8 0a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-2Z";
-const allowedAnimationSpeeds = [0.5, 1, 1.5, 2];
-/**
- * Represents a custom element that displays a 3D model using the Babylon.js Viewer.
- */
-let HTML3DElement = class HTML3DElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._viewerLock = new AsyncLock();
-        /**
-         * 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 environment URL.
-         */
-        this.environment = null;
-        /**
-         * A string value that encodes one or more hotspots.
-         */
-        this.hotspots = 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._selectedAnimation = -1;
-        this._isAnimationPlaying = false;
-    }
-    /**
-     * 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 and screen space coordinates
-     */
-    queryHotSpot(name, result) {
-        // Retrieve all hotspots inside the viewer element
-        let resultFound = false;
-        // Iterate through each hotspot to get the 'data-surface' and 'data-name' attributes
-        if (this._viewerDetails) {
-            const hotspot = this.hotspots?.[name];
-            if (hotspot) {
-                resultFound = this._viewerDetails.viewer.getHotSpotToRef(hotspot, result);
-            }
-        }
-        return resultFound;
-    }
-    /**
-     * The list of animation names for the currently loaded model.
-     */
-    get animations() {
-        return this._animations;
-    }
-    /**
-     * The currently selected animation index.
-     */
-    get selectedAnimation() {
-        return this._selectedAnimation;
-    }
-    /**
-     * True if an animation is currently playing.
-     */
-    get isAnimationPlaying() {
-        return this._isAnimationPlaying;
-    }
-    /**
-     * Toggles the play/pause animation state if there is a selected animation.
-     */
-    toggleAnimation() {
-        this._viewerDetails?.viewer.toggleAnimation();
-    }
-    // eslint-disable-next-line babylonjs/available
-    connectedCallback() {
-        super.connectedCallback();
-        this._setupViewer();
-    }
-    // eslint-disable-next-line babylonjs/available
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._tearDownViewer();
-    }
-    // eslint-disable-next-line babylonjs/available
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.get("engine")) {
-            this._tearDownViewer();
-            this._setupViewer();
-        }
-        else {
-            if (changedProperties.has("animationSpeed")) {
-                this._updateAnimationSpeed();
-            }
-            if (changedProperties.has("_selectedAnimation")) {
-                this._updateSelectedAnimation();
-            }
-            if (changedProperties.has("source")) {
-                this._updateModel();
-            }
-            if (changedProperties.has("environment")) {
-                this._updateEnv();
-            }
-        }
-    }
-    // eslint-disable-next-line babylonjs/available
-    render() {
-        // NOTE: The unnamed 'slot' element holds all child elements of the <babylon-viewer> that do not specify a 'slot' attribute.
-        return html `
-            <div class="full-size">
-                <div id="canvasContainer" class="full-size"></div>
-                <slot class="full-size children-slot"></slot>
-                ${this.animations.length === 0
-            ? ""
-            : html `
-                          <slot name="tool-bar">
-                              <div part="tool-bar" class="tool-bar">
-                                  <div class="progress-control">
-                                      <button aria-label="${this.isAnimationPlaying ? "Pause" : "Play"}" @click="${this.toggleAnimation}">
-                                          ${!this.isAnimationPlaying
-                ? html `<svg viewBox="0 0 20 20">
-                                                    <path d="${playFilledIcon}" fill="currentColor"></path>
-                                                </svg>`
-                : html `<svg viewBox="-3 -2 24 24">
-                                                    <path d="${pauseFilledIcon}" fill="currentColor"></path>
-                                                </svg>`}
-                                      </button>
-                                      <input
-                                          aria-label="Animation Progress"
-                                          class="progress-wrapper"
-                                          type="range"
-                                          min="0"
-                                          max="1"
-                                          step="0.0001"
-                                          .value="${this.animationProgress}"
-                                          @input="${this._onProgressChanged}"
-                                          @pointerdown="${this._onProgressPointerDown}"
-                                      />
-                                  </div>
-                                  <select aria-label="Select Animation Speed" @change="${this._onAnimationSpeedChanged}">
-                                      ${allowedAnimationSpeeds.map((speed) => html `<option value="${speed}" .selected="${this.animationSpeed === speed}">${speed}x</option>`)}
-                                  </select>
-                                  ${this.animations.length > 1
-                ? html `<select aria-label="Select Animation" @change="${this._onSelectedAnimationChanged}">
-                                            ${this.animations.map((name, index) => html `<option value="${index}" .selected="${this.selectedAnimation == index}">${name}</option>`)}
-                                        </select>`
-                : ""}
-                              </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);
-    }
-    _onProgressChanged(event) {
-        if (this._viewerDetails) {
-            const input = event.target;
-            const value = Number(input.value);
-            if (value !== this.animationProgress) {
-                this._viewerDetails.viewer.animationProgress = value;
-            }
-        }
-    }
-    _onProgressPointerDown(event) {
-        if (this._viewerDetails?.viewer.isAnimationPlaying) {
-            this._viewerDetails.viewer.pauseAnimation();
-            const input = event.target;
-            input.addEventListener("pointerup", () => this._viewerDetails?.viewer.playAnimation(), { once: true });
-        }
-    }
-    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.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];
-                            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.onSelectedAnimationChanged.add(() => {
-                            this._selectedAnimation = details.viewer.selectedAnimation ?? -1;
-                            this._dispatchCustomEvent("selectedanimationchange", (type) => new Event(type));
-                        });
-                        details.viewer.onAnimationSpeedChanged.add(() => {
-                            let speed = details.viewer.animationSpeed ?? 1;
-                            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));
-                        });
-                        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));
-                        });
-                        this._updateSelectedAnimation();
-                        this._updateAnimationSpeed();
-                        this._updateModel();
-                        this._updateEnv();
-                        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);
-            }
-        });
-    }
-    _updateAnimationSpeed() {
-        if (this._viewerDetails) {
-            this._viewerDetails.viewer.animationSpeed = this.animationSpeed;
-        }
-    }
-    _updateSelectedAnimation() {
-        if (this._viewerDetails) {
-            this._viewerDetails.viewer.selectedAnimation = this._selectedAnimation;
-        }
-    }
-    async _updateModel() {
-        try {
-            if (this.source) {
-                await this._viewerDetails?.viewer.loadModel(this.source, { pluginExtension: this.extension ?? undefined });
-            }
-            else {
-                await this._viewerDetails?.viewer.resetModel();
-            }
-        }
-        catch (error) {
-            Logger.Log(error);
-        }
-    }
-    async _updateEnv() {
-        try {
-            if (this.environment) {
-                await this._viewerDetails?.viewer.loadEnvironment(this.environment);
-            }
-            else {
-                await this._viewerDetails?.viewer.resetEnvironment();
-            }
-        }
-        catch (error) {
-            Logger.Log(error);
-        }
-    }
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention, jsdoc/require-jsdoc
-HTML3DElement.styles = css `
-        :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)
-            );
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        .full-size {
-            display: block;
-            position: relative;
-            width: 100%;
-            height: 100%;
-        }
-
-        .children-slot {
-            position: absolute;
-            top: 0;
-            background: transparent;
-            pointer-events: none;
-        }
-
-        .tool-bar {
-            position: absolute;
-            display: flex;
-            flex-direction: row;
-            border-radius: 12px;
-            border-color: var(--ui-foreground-color);
-            height: 48px;
-            width: calc(100% - 24px);
-            min-width: 150px;
-            max-width: 1280px;
-            bottom: 12px;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: var(--ui-background-color);
-            color: var(--ui-foreground-color);
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        .tool-bar * {
-            height: 100%;
-            min-width: 48px;
-        }
-
-        .tool-bar select {
-            background: none;
-            min-width: 52px;
-            max-width: 128px;
-            border: 1px solid transparent;
-            border-radius: inherit;
-            color: inherit;
-            font-size: 14px;
-            padding: 12px;
-            cursor: pointer;
-            outline: none;
-            appearance: none; /* Remove default styling */
-            -webkit-appearance: none; /* Remove default styling for Safari */
-        }
-
-        .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;
-        }
-
-        .progress-control {
-            display: flex;
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-            cursor: pointer;
-            align-items: center;
-            border-radius: inherit;
-            border-color: inherit;
-        }
-
-        .progress-wrapper {
-            -webkit-appearance: none;
-            cursor: pointer;
-            width: 100%;
-            height: 100%;
-            outline: none;
-            border: 1px solid transparent;
-            border-radius: inherit;
-            padding: 0 12px;
-            background-color: transparent;
-        }
-
-        .progress-wrapper:focus-visible {
-            border-color: inherit;
-        }
-
-        /*Chrome -webkit */
-
-        .progress-wrapper::-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;
-        }
-
-        .progress-wrapper::-webkit-slider-runnable-track {
-            height: 2px;
-            -webkit-appearance: none;
-            background-color: var(--ui-foreground-color);
-        }
-
-        /** FireFox -moz */
-
-        .progress-wrapper::-moz-range-progress {
-            height: 2px;
-            background-color: var(--ui-foreground-color);
-        }
-
-        .progress-wrapper::-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);
-        }
-
-        .progress-wrapper::-moz-range-track {
-            height: 2px;
-            background: var(--ui-foreground-color);
-        }
-    `;
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "engine", void 0);
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "source", void 0);
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "extension", void 0);
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "environment", void 0);
-__decorate([
-    property({
-        type: "string",
-        converter: (value) => {
-            if (!value) {
-                return null;
-            }
-            const array = value.split(" ");
-            if (array.length % 8 !== 0) {
-                throw new Error(`hotspots should be defined in sets of 8 elements: 'name meshIndex pointIndex1 pointIndex2 pointIndex3 barycentricCoord1 barycentricCoord2 barycentricCoord3', but a total of ${array.length} elements were found in '${value}'`);
-            }
-            const hotspots = {};
-            for (let offset = 0; offset < array.length; offset += 8) {
-                hotspots[array[offset]] = {
-                    meshIndex: Number(array[offset + 1]),
-                    pointIndex: [Number(array[offset + 2]), Number(array[offset + 3]), Number(array[offset + 4])],
-                    barycentric: [Number(array[offset + 5]), Number(array[offset + 6]), Number(array[offset + 7])],
-                };
-            }
-            return hotspots;
-        },
-    })
-], HTML3DElement.prototype, "hotspots", void 0);
-__decorate([
-    property({ attribute: "animation-speed", reflect: true })
-], HTML3DElement.prototype, "animationSpeed", void 0);
-__decorate([
-    property({ attribute: false })
-], HTML3DElement.prototype, "animationProgress", void 0);
-__decorate([
-    state()
-], HTML3DElement.prototype, "_animations", void 0);
-__decorate([
-    state()
-], HTML3DElement.prototype, "_selectedAnimation", void 0);
-__decorate([
-    state()
-], HTML3DElement.prototype, "_isAnimationPlaying", void 0);
-__decorate([
-    query("#canvasContainer")
-], HTML3DElement.prototype, "_canvasContainer", void 0);
-HTML3DElement = __decorate([
-    customElement("babylon-viewer")
-], HTML3DElement);
-
-export { HTML3DElement, Viewer, createViewerForCanvas, getDefaultEngine };
-//# sourceMappingURL=index.js.map