@babylonjs/viewer 7.23.1-alpha → 7.23.1

package/lib/index.js

@@ -1,871 +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';
-import { Engine } from '@babylonjs/core/Engines/engine.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 a model is loaded into the viewer.
-         */
-        this.onModelLoaded = 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 = {
-            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.loadEnvironmentAsync(undefined).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(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) {
-        this._throwIfDisposedOrAborted(abortSignal);
-        this._loadModelAbortController?.abort("New model is being loaded before previous model finished loading.");
-        const abortController = (this._loadModelAbortController = new AbortController());
-        // TODO: Disable audio for now, later figure out how to re-introduce it through dynamic imports.
-        options = {
-            ...(options ?? {}),
-            pluginOptions: {
-                ...(options?.pluginOptions ?? {}),
-                gltf: {
-                    ...(options?.pluginOptions?.gltf ?? {}),
-                    extensionOptions: {
-                        ...(options?.pluginOptions?.gltf?.extensionOptions ?? {}),
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        KHR_audio: {
-                            enabled: false,
-                        },
-                        // eslint-disable-next-line @typescript-eslint/naming-convention
-                        MSFT_audio_emitter: {
-                            enabled: false,
-                        },
-                    },
-                },
-            },
-        };
-        await this._loadModelLock.lockAsync(async () => {
-            this._throwIfDisposedOrAborted(abortSignal, abortController.signal);
-            this._details.model?.dispose();
-            this.selectedAnimation = -1;
-            try {
-                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.onModelLoaded.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 no url is provided, a default hemispheric light will be created.
-     * 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) {
-        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();
-            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."));
-                        }
-                    });
-                }
-            });
-        });
-    }
-    /**
-     * 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.onModelLoaded.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 = {
-    engine: "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.
- */
-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.
-    // TODO: Create a WebGL or WebGPUEngine based on the engine option.
-    const engine = new Engine(canvas, undefined, options);
-    // 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());
-    // TODO: Creating an engine instance will be async if we use a dynamic import for choosing either Engine or WebGPUEngine,
-    //       or even when just creating a WebGPUEngine since we have to call initAsync. To keep the UI integration layer
-    //       simple (e.g. not have to deal with asynchronous creation of the Viewer), should we also be able to pass Promise<AbstractEngine> to the Viewer constructor?
-    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);
-        /**
-         * The model URL.
-         */
-        this.src = "";
-        /**
-         * The environment URL.
-         */
-        this.env = "";
-        /**
-         * 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
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        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.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">
-                <canvas id="renderCanvas" class="full-size" touch-action="none"></canvas>
-                ${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) {
-        this.dispatchEvent(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 });
-        }
-    }
-    _setupViewer() {
-        if (this._canvas && !this.viewer) {
-            this.viewer = createViewerForCanvas(this._canvas);
-            this.viewer.onModelLoaded.add(() => {
-                this._animations = [...(this.viewer?.animations ?? [])];
-                this._dispatchCustomEvent("modelchange");
-            });
-            this.viewer.onModelError.add(() => {
-                this._dispatchCustomEvent("modelerror");
-            });
-            this.viewer.onSelectedAnimationChanged.add(() => {
-                this._selectedAnimation = this.viewer?.selectedAnimation ?? -1;
-                this._dispatchCustomEvent("selectedanimationchange");
-            });
-            this.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");
-            });
-            this.viewer.onIsAnimationPlayingChanged.add(() => {
-                this._isAnimationPlaying = this.viewer?.isAnimationPlaying ?? false;
-                this._dispatchCustomEvent("animationplayingchange");
-            });
-            this.viewer.onAnimationProgressChanged.add(() => {
-                this.animationProgress = this.viewer?.animationProgress ?? 0;
-                this._dispatchCustomEvent("animationprogresschange");
-            });
-            this._updateSelectedAnimation();
-            this._updateAnimationSpeed();
-            this._updateModel();
-            this._updateEnv();
-        }
-    }
-    _tearDownViewer() {
-        if (this.viewer) {
-            this.viewer.dispose();
-            this.viewer = undefined;
-        }
-    }
-    _updateAnimationSpeed() {
-        if (this.viewer) {
-            this.viewer.animationSpeed = this.animationSpeed;
-        }
-    }
-    _updateSelectedAnimation() {
-        if (this.viewer) {
-            this.viewer.selectedAnimation = this._selectedAnimation;
-        }
-    }
-    async _updateModel() {
-        if (this.src) {
-            await this.viewer?.loadModelAsync(this.src).catch(Logger.Log);
-        }
-    }
-    _updateEnv() {
-        this.viewer?.loadEnvironmentAsync(this.env || undefined).catch(Logger.Log);
-    }
-};
-// 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()
-], HTML3DElement.prototype, "src", void 0);
-__decorate([
-    property()
-], HTML3DElement.prototype, "env", void 0);
-__decorate([
-    property({ attribute: "animation-speed" })
-], 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("#renderCanvas")
-], HTML3DElement.prototype, "_canvas", void 0);
-HTML3DElement = __decorate([
-    customElement("babylon-viewer")
-], HTML3DElement);
-
-export { HTML3DElement, Viewer, createViewerForCanvas };
-//# sourceMappingURL=index.js.map