@babylonjs/viewer 7.26.3-alpha → 7.26.3

package/lib/index.js

@@ -1,965 +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 { Scalar } from '@babylonjs/core/Maths/math.scalar.js';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector.js';
-import { CreateBox } from '@babylonjs/core/Meshes/Builders/boxBuilder.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 '@babylonjs/core/Animations/animatable.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 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._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.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.resetEnvironmentAsync().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 = () => {
-            const scene = this._details.scene;
-            const engine = scene.getEngine();
-            engine.beginFrame();
-            scene.render();
-            engine.endFrame();
-            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(Scalar.Clamp(value, -1, this.animations.length - 1));
-        if (value !== this._selectedAnimation) {
-            const startAnimation = this.isAnimationPlaying;
-            if (this._activeAnimation) {
-                this._activeAnimation.goToFrame(0);
-                this._activeAnimation.stop();
-                this._activeAnimationObservers.forEach((observer) => observer.remove());
-                this._activeAnimationObservers = [];
-            }
-            this._selectedAnimation = value;
-            if (this._activeAnimation) {
-                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._activeAnimation.start(true, this._animationSpeed);
-                if (!startAnimation) {
-                    this.pauseAnimation();
-                }
-            }
-            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 loadModelAsync(source, options, abortSignal) {
-        await this._updateModelAsync(source, options, abortSignal);
-    }
-    /**
-     * Resets the model to an empty scene.
-     * @param abortSignal An optional signal that can be used to abort the reset.
-     */
-    async resetModelAsync(abortSignal) {
-        await this._updateModelAsync(undefined, undefined, abortSignal);
-    }
-    async _updateModelAsync(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 () => {
-            this._throwIfDisposedOrAborted(abortSignal, abortController.signal);
-            this._details.model?.dispose();
-            this.selectedAnimation = -1;
-            try {
-                this._details.model = null;
-                if (source) {
-                    this._details.model = await loadAssetContainerAsync(source, this._details.scene, options);
-                    this._details.model.animationGroups.forEach((group) => group.stop());
-                    this.selectedAnimation = 0;
-                    this._details.model.addAllToScene();
-                }
-                this._updateCamera();
-                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 loadEnvironmentAsync(url, options, abortSignal) {
-        await this._updateEnvironmentAsync(url, options, abortSignal);
-    }
-    /**
-     * Resets the environment to a simple hemispheric light.
-     * @param abortSignal An optional signal that can be used to abort the reset.
-     */
-    async resetEnvironmentAsync(abortSignal) {
-        await this._updateEnvironmentAsync(undefined, undefined, abortSignal);
-    }
-    async _updateEnvironmentAsync(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 () => {
-            this._throwIfDisposedOrAborted(abortSignal, abortController.signal);
-            this._environment?.dispose();
-            try {
-                this._environment = await new Promise((resolve, reject) => {
-                    if (!url) {
-                        const light = new HemisphericLight("hemilight", Vector3.Up(), this._details.scene);
-                        this._details.scene.autoClear = true;
-                        resolve(light);
-                    }
-                    else {
-                        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.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._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;
-    }
-    // copy/paste from sandbox and scene helpers
-    _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.scene.meshes.length) {
-            // get bounds and prepare framing/camera radius from its values
-            this._camera.lowerRadiusLimit = null;
-            const worldExtends = this._details.scene.getWorldExtends((mesh) => {
-                return mesh.isVisible && mesh.isEnabled();
-            });
-            framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);
-            const worldSize = worldExtends.max.subtract(worldExtends.min);
-            const worldCenter = worldExtends.min.add(worldSize.scale(0.5));
-            radius = worldSize.length() * 1.2;
-            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;
-        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;
-        updateSkybox(this._skybox, this._camera);
-    }
-    _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.");
-        }
-        for (const signal of abortSignals) {
-            signal?.throwIfAborted();
-        }
-    }
-}
-(() => {
-    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 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;
-    }
-    /**
-     * 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._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("src")) {
-                this._updateModel();
-            }
-            if (changedProperties.has("env")) {
-                this._updateEnv();
-            }
-        }
-    }
-    // eslint-disable-next-line babylonjs/available
-    render() {
-        return html `
-            <div class="full-size">
-                <div id="canvasContainer" class="full-size"></div>
-                ${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(...args) {
-        const [type, details] = args;
-        this.dispatchEvent(details ? new CustomEvent(type, { detail: details }) : new 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._viewer) {
-            const input = event.target;
-            const value = Number(input.value);
-            if (value !== this.animationProgress) {
-                this._viewer.animationProgress = value;
-            }
-        }
-    }
-    _onProgressPointerDown(event) {
-        if (this._viewer?.isAnimationPlaying) {
-            this._viewer.pauseAnimation();
-            const input = event.target;
-            input.addEventListener("pointerup", () => this._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._viewer) {
-                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._viewer = details.viewer;
-                        details.viewer.onEnvironmentChanged.add(() => {
-                            this._dispatchCustomEvent("environmentchange");
-                        });
-                        details.viewer.onEnvironmentError.add(() => {
-                            this._dispatchCustomEvent("environmenterror");
-                        });
-                        details.viewer.onModelChanged.add(() => {
-                            this._animations = [...(this._viewer?.animations ?? [])];
-                            this._dispatchCustomEvent("modelchange");
-                        });
-                        details.viewer.onModelError.add(() => {
-                            this._dispatchCustomEvent("modelerror");
-                        });
-                        details.viewer.onSelectedAnimationChanged.add(() => {
-                            this._selectedAnimation = this._viewer?.selectedAnimation ?? -1;
-                            this._dispatchCustomEvent("selectedanimationchange");
-                        });
-                        details.viewer.onAnimationSpeedChanged.add(() => {
-                            let speed = this._viewer?.animationSpeed ?? 1;
-                            speed = allowedAnimationSpeeds.reduce((prev, curr) => (Math.abs(curr - speed) < Math.abs(prev - speed) ? curr : prev));
-                            this.animationSpeed = speed;
-                            this._dispatchCustomEvent("animationspeedchange");
-                        });
-                        details.viewer.onIsAnimationPlayingChanged.add(() => {
-                            this._isAnimationPlaying = this._viewer?.isAnimationPlaying ?? false;
-                            this._dispatchCustomEvent("animationplayingchange");
-                        });
-                        details.viewer.onAnimationProgressChanged.add(() => {
-                            this.animationProgress = this._viewer?.animationProgress ?? 0;
-                            this._dispatchCustomEvent("animationprogresschange");
-                        });
-                        this._updateSelectedAnimation();
-                        this._updateAnimationSpeed();
-                        this._updateModel();
-                        this._updateEnv();
-                        this._dispatchCustomEvent("viewerready", details);
-                    },
-                });
-            }
-        });
-    }
-    async _tearDownViewer() {
-        await this._viewerLock.lockAsync(async () => {
-            if (this._viewer) {
-                this._viewer.dispose();
-                this._viewer = 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._viewer) {
-            this._viewer.animationSpeed = this.animationSpeed;
-        }
-    }
-    _updateSelectedAnimation() {
-        if (this._viewer) {
-            this._viewer.selectedAnimation = this._selectedAnimation;
-        }
-    }
-    async _updateModel() {
-        try {
-            if (this.src) {
-                await this._viewer?.loadModelAsync(this.src, { pluginExtension: this.extension });
-            }
-            else {
-                await this._viewer?.resetModelAsync();
-            }
-        }
-        catch (error) {
-            Logger.Log(error);
-        }
-    }
-    async _updateEnv() {
-        try {
-            if (this.env) {
-                await this._viewer?.loadEnvironmentAsync(this.env);
-            }
-            else {
-                await this._viewer?.resetEnvironmentAsync();
-            }
-        }
-        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;
-            width: 100%;
-            height: 100%;
-        }
-
-        .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 */
-            -moz-appearance: none; /* Remove default styling for Firefox */
-        }
-
-        .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, "src", void 0);
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "extension", void 0);
-__decorate([
-    property({ reflect: true })
-], HTML3DElement.prototype, "env", 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