@preference-sl/pref-viewer 2.11.0-beta.9 → 2.11.0

package/src/babylonjs-animation-opening.js

@@ -1,5 +1,4 @@
-import { AdvancedDynamicTexture } from "@babylonjs/gui";
-import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
+import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
 
 /**
  * OpeningAnimation - Manages open/close animations for a model part (e.g., a door) in a Babylon.js scene.
@@ -13,13 +12,14 @@ import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
  *  - Manages the animation control menu (OpeningAnimationMenu) and its callbacks.
  *
  * Public Methods:
+ *  - dispose(): Disposes the OpeningAnimation instance and releases all associated resources.
  *  - isAnimationForNode(node): Checks if the animation affects the given node.
  *  - playOpen(): Starts the opening animation.
  *  - playClose(): Starts the closing animation.
  *  - pause(): Pauses the current animation.
  *  - goToOpened(): Moves animation to the fully opened state.
  *  - goToClosed(): Moves animation to the fully closed state.
- *  - showControls(advancedDynamicTexture): Displays the animation control menu.
+ *  - showControls(canvas): Displays the animation control menu.
  *  - hideControls(): Hides the animation control menu.
  *  - isControlsVisible(): Returns true if the control menu is visible for this animation.
  *
@@ -39,16 +39,8 @@ import { OpeningAnimationMenu } from "./babylonjs-animation-opening-menu.js";
  *  - #checkProgress(progress): Applies threshold logic to progress.
  *  - #updateControlsSlider(): Updates the slider in the control menu.
  *  - #updateControls(): Updates all controls in the menu.
- *
- * Usage Example:
- *  const anim = new OpeningAnimation("door", openGroup, closeGroup);
- *  anim.playOpen();
- *  anim.pause();
- *  anim.goToClosed();
- *  anim.showControls(adt);
- *  anim.hideControls();
  */
-export class OpeningAnimation {
+export default class OpeningAnimation {
     static states = {
         paused: 0,
         closed: 1,
@@ -57,21 +49,26 @@ export class OpeningAnimation {
         closing: 4,
     };
 
+    name = "";
     #openAnimation = null;
     #closeAnimation = null;
-
     #nodes = [];
+    #menu = null;
+
     #state = OpeningAnimation.states.closed;
     #lastPausedFrame = 0;
     #startFrame = 0;
     #endFrame = 0;
     #speedRatio = 1.0;
     #loop = false;
-
-    #advancedDynamicTexture = null;
-    #menu = null;
     #progressThreshold = 0.025;
 
+    #handlers = {
+        onOpened: null,
+        onClosed: null,
+        updateControlsSlider: null,
+    };
+
     /**
      * Creates a new OpeningAnimation instance for managing open/close animations of a model part.
      * @param {string} name - The identifier for this animation (e.g., door name).
@@ -95,8 +92,15 @@ export class OpeningAnimation {
         this.#speedRatio = this.#openAnimation.speedRatio || 1.0;
 
         this.#getNodesFromAnimationGroups();
-        this.#openAnimation.onAnimationGroupEndObservable.add(this.#onOpened.bind(this));
-        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#onClosed.bind(this));
+        this.#bindHandlers();
+        this.#openAnimation.onAnimationGroupEndObservable.add(this.#handlers.onOpened);
+        this.#closeAnimation.onAnimationGroupEndObservable.add(this.#handlers.onClosed);
+    }
+
+    #bindHandlers() {
+        this.#handlers.onOpened = this.#onOpened.bind(this);
+        this.#handlers.onClosed = this.#onClosed.bind(this);
+        this.#handlers.updateControlsSlider = this.#updateControlsSlider.bind(this);
     }
 
     /**
@@ -138,13 +142,18 @@ export class OpeningAnimation {
     #goToOpened(useLoop = false) {
         this.#lastPausedFrame = this.#endFrame;
 
-        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused) {
+        if (this.#openAnimation._isStarted && !this.#openAnimation._isPaused){
             this.#openAnimation.pause();
         }
-        this.#openAnimation.goToFrame(this.#endFrame);
+         this.#openAnimation.goToFrame(this.#endFrame);
 
-        this.#closeAnimation.pause();
-        this.#closeAnimation.goToFrame(this.#startFrame);
+        if (this.#closeAnimation._isStarted && this.#closeAnimation._isPaused) {
+            this.#closeAnimation.goToFrame(this.#startFrame);
+        } else {
+            this.#closeAnimation.start();
+            this.#closeAnimation.pause();
+            this.#closeAnimation.goToFrame(this.#startFrame);
+        }
 
         this.#state = OpeningAnimation.states.opened;
         this.#updateControls();
@@ -167,8 +176,13 @@ export class OpeningAnimation {
         }
         this.#closeAnimation.goToFrame(this.#endFrame - this.#startFrame);
 
-        this.#openAnimation.pause();
-        this.#openAnimation.goToFrame(this.#startFrame);
+        if (this.#openAnimation._isStarted && this.#openAnimation._isPaused) {
+            this.#openAnimation.goToFrame(this.#startFrame);
+        } else {
+            this.#openAnimation.start();
+            this.#openAnimation.pause();
+            this.#openAnimation.goToFrame(this.#startFrame);
+        }
 
         this.#state = OpeningAnimation.states.closed;
         this.#updateControls();
@@ -303,6 +317,25 @@ export class OpeningAnimation {
      * ---------------------------
      */
 
+    /**
+     * Disposes the OpeningAnimation instance and releases all associated resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        this.hideControls();
+        if (this.#openAnimation) {
+            this.#openAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onOpened);
+            this.#openAnimation = null;
+        }
+        if (this.#closeAnimation) {
+            this.#closeAnimation.onAnimationGroupEndObservable.removeCallback(this.#handlers.onClosed);
+            this.#closeAnimation = null;
+        }
+        this.#nodes = [];
+        this.name = "";
+    }
+
     /**
      * Checks if the animation affects the given node.
      * @param {string} node - Node identifier.
@@ -320,6 +353,7 @@ export class OpeningAnimation {
         if (this.#state === OpeningAnimation.states.opening || this.#state === OpeningAnimation.states.opened) {
             return;
         }
+
         if (this.#state === OpeningAnimation.states.closing) {
             this.#lastPausedFrame = this.#endFrame - this.#closeAnimation.getCurrentFrame();
             this.#closeAnimation.pause();
@@ -344,6 +378,7 @@ export class OpeningAnimation {
         if (this.#state === OpeningAnimation.states.closing || this.#state === OpeningAnimation.states.closed) {
             return;
         }
+
         if (this.#state === OpeningAnimation.states.opening) {
             this.#lastPausedFrame = this.#openAnimation.getCurrentFrame();
             this.#openAnimation.pause();
@@ -397,11 +432,9 @@ export class OpeningAnimation {
      * Displays the animation control menu and sets up callbacks.
      * Synchronizes slider and button states with animation.
      * @public
-     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture.
+     * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
      */
-    showControls(advancedDynamicTexture) {
-        this.#advancedDynamicTexture = advancedDynamicTexture;
-        this.#advancedDynamicTexture.metadata = { animationName: this.name };
+    showControls(canvas) {
         const controlCallbacks = {
             onGoToOpened: () => {
                 if (this.#state === OpeningAnimation.states.opened) {
@@ -449,10 +482,10 @@ export class OpeningAnimation {
                 this.#menu.animationLoop = this.#loop;
             },
         };
-        this.#menu = new OpeningAnimationMenu(this.#advancedDynamicTexture, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
+        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
 
         // Attach to Babylon.js scene render loop for real-time updates
-        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#updateControlsSlider.bind(this));
+        this.#openAnimation._scene.onBeforeRenderObservable.add(this.#handlers.updateControlsSlider);
     }
 
     /**
@@ -463,10 +496,9 @@ export class OpeningAnimation {
         if (!this.isControlsVisible()) {
             return;
         }
-        // Remove the observer when controls are hidden
-        this.#openAnimation._scene.onBeforeRenderObservable.removeCallback(this.#updateControlsSlider.bind(this));
-        this.#advancedDynamicTexture.dispose();
-        this.#advancedDynamicTexture = null;
+        this.#openAnimation?._scene?.onBeforeRenderObservable.removeCallback(this.#handlers.updateControlsSlider);
+        this.#menu.dispose();
+        this.#menu = null;
     }
 
     /**
@@ -475,7 +507,7 @@ export class OpeningAnimation {
      * @returns {boolean} True if controls are visible for this animation; otherwise, false.
      */
     isControlsVisible() {
-        return !!(this.#advancedDynamicTexture && this.#advancedDynamicTexture.metadata?.animationName === this.name && this.#menu);
+        return !!(this.#menu?.isVisible);
     }
 
     /**
@@ -489,7 +521,6 @@ export class OpeningAnimation {
      * @public
      * @returns {number}
      */
-
     get state() {
         return this.#state;
     }

package/src/babylonjs-controller.js

@@ -1,24 +1,31 @@
-import { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } from "@babylonjs/core";
-import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
+import { ArcRotateCamera, AssetContainer, Camera, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointerEventTypes, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager, WebXRState } from "@babylonjs/core";
+import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression.js";
 import "@babylonjs/loaders";
-import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
+import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression.js";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
+import JSZip from "jszip";
 
 import GLTFResolver from "./gltf-resolver.js";
 import { MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
- * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, and interactions.
+ * BabylonJSController - Main controller for managing Babylon.js 3D scenes, assets, rendering, and user interactions in PrefViewer.
  *
- * Responsibilities:
+ * Summary:
+ *  Provides a high-level API for initializing, loading, displaying, and exporting 3D models and environments using Babylon.js.
+ *  Manages advanced rendering features, AR integration, asset containers, and user interaction logic.
+ *
+ * Key Responsibilities:
  *  - Initializes and manages the Babylon.js engine, scene, camera, lights, and asset containers.
  *  - Handles loading, replacing, and disposing of 3D models, environments, and materials.
  *  - Configures advanced rendering features such as Draco mesh compression, shadows, and image-based lighting (IBL).
  *  - Integrates Babylon.js WebXR experience for augmented reality (AR) support.
- *  - Provides methods for downloading models and scenes in GLB, GLTF, and USDZ formats.
+ *  - Provides methods for downloading models and scenes in GLB, glTF (ZIP), and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
+ *  - Designed for integration with PrefViewer and GLTFResolver.
+ *  - All resource management and rendering operations are performed asynchronously for performance.
  *
  * Usage:
  *  - Instantiate: const controller = new BabylonJSController(canvas, containers, options);
@@ -26,7 +33,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Load assets: await controller.load();
  *  - Set camera/material options: controller.setCameraOptions(), controller.setMaterialOptions();
  *  - Control visibility: controller.setContainerVisibility(name, show);
- *  - Download assets: controller.downloadModelGLB(), controller.downloadModelGLTF(), controller.downloadModelUSDZ(), controller.downloadModelAndSceneGLB(), controller.downloadModelAndSceneGLTF(), controller.downloadModelAndSceneUSDZ();
+ *  - Download assets: controller.downloadGLB(), controller.downloadGLTF(), controller.downloadUSDZ();
  *  - Disable rendering: controller.disable();
  *
  * Public Methods:
@@ -40,30 +47,46 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - downloadGLTF(content): Downloads the current scene, model, or environment as a glTF ZIP file.
  *  - downloadUSDZ(content): Downloads the current scene, model, or environment as a USDZ file.
  *
- * Private Methods:
+ * Private Methods (using ECMAScript private fields):
+ *  - #bindHandlers(): Pre-binds reusable event handlers to preserve stable references.
  *  - #configureDracoCompression(): Sets up Draco mesh compression.
  *  - #renderLoop(): Babylon.js render loop callback.
  *  - #addStylesToARButton(): Styles AR button.
  *  - #createXRExperience(): Initializes WebXR AR experience.
- *  - #createCamera(), #createLights(), #initializeEnvironmentTexture(), #initializeIBLShadows(), #initializeShadows(): Scene setup.
- *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for materials.
- *  - #enableInteraction(), #disableInteraction(): Canvas interaction handlers.
- *  - #disposeEngine(): Disposes engine and resources.
- *  - #onMouseWheel(event), #onKeyUp(event): Canvas event handlers.
- *  - #setOptionsMaterial(), #setOptions_Materials(), #setOptions_Camera(): Applies material/camera options.
- *  - #findContainerByName(), #addContainer(), #removeContainer(), #replaceContainer(): Container management.
- *  - #getPrefViewer3DComponent(), #getPrefViewerComponent(): Custom element references.
- *  - #updateVisibilityAttributeInComponents(): Updates parent visibility attributes.
- *  - #setVisibilityOfWallAndFloorInModel(): Controls wall/floor mesh visibility.
- *  - #stopRender(), #startRender(): Render loop control.
- *  - #loadAssetContainer(), #loadContainers(): Asset loading.
- *  - #downloadZip(): Generates and downloads a ZIP file.
+ *  - #createCamera(): Creates and configures the main camera.
+ *  - #createLights(): Creates and configures scene lights and shadows.
+ *  - #initializeEnvironmentTexture(): Loads and sets the HDR environment texture.
+ *  - #initializeIBLShadows(): Sets up IBL shadow pipeline and assigns meshes/materials.
+ *  - #initializeShadows(): Sets up standard or IBL shadows for meshes.
+ *  - #setMaxSimultaneousLights(): Updates max simultaneous lights for all materials.
+ *  - #onPointerObservable(info): Handles pointer events and dispatches to pointer/mouse handlers.
+ *  - #onPointerUp(event, pickInfo): Handles pointer up events (e.g., right-click for animation menu).
+ *  - #onPointerMove(event, pickInfo): Handles pointer move events (e.g., mesh highlighting).
+ *  - #onMouseWheel(event, pickInfo): Handles mouse wheel events for camera zoom.
+ *  - #onKeyUp(event): Handles keyup events for download dialog and shortcuts.
+ *  - #enableInteraction(): Adds canvas and scene interaction event listeners.
+ *  - #disableInteraction(): Removes canvas and scene interaction event listeners.
+ *  - #disposeAnimationController(): Disposes the animation controller if it exists.
+ *  - #disposeXRExperience(): Disposes the Babylon.js WebXR experience if it exists.
+ *  - #disposeEngine(): Disposes engine and releases all resources.
+ *  - #setOptionsMaterial(optionMaterial): Applies a material option to relevant meshes.
+ *  - #setOptions_Materials(): Applies all material options from configuration.
+ *  - #setOptions_Camera(): Applies camera options from configuration.
+ *  - #findContainerByName(name): Finds a container by its name.
+ *  - #addContainer(container, updateVisibility): Adds a container to the scene and updates visibility.
+ *  - #removeContainer(container, updateVisibility): Removes a container from the scene and updates visibility.
+ *  - #replaceContainer(container, newAssetContainer): Replaces a container in the scene.
+ *  - #getPrefViewer3DComponent(): Caches and retrieves the parent PREF-VIEWER-3D element.
+ *  - #getPrefViewerComponent(): Caches and retrieves the parent PREF-VIEWER element.
+ *  - #updateVisibilityAttributeInComponents(name, isVisible): Updates parent visibility attributes.
+ *  - #setVisibilityOfWallAndFloorInModel(show): Controls wall/floor mesh visibility.
+ *  - #stopRender(): Stops the Babylon.js render loop.
+ *  - #startRender(): Starts the Babylon.js render loop.
+ *  - #loadAssetContainer(container): Loads an asset container asynchronously.
+ *  - #loadContainers(): Loads all asset containers and adds them to the scene.
+ *  - #addDateToName(name): Appends the current date/time to a name string.
+ *  - #downloadZip(files, name, comment, addDateInName): Generates and downloads a ZIP file.
  *  - #openDownloadDialog(): Opens the modal download dialog.
- *
- * Notes:
- *  - Designed for integration with PrefViewer and GLTFResolver.
- *  - Supports advanced Babylon.js features for product visualization and configurators.
- *  - All resource management and rendering operations are performed asynchronously for performance.
  */
 export default class BabylonJSController {
     // Canvas HTML element
@@ -90,6 +113,12 @@ export default class BabylonJSController {
     #gltfResolver = null; // GLTFResolver instance
     #babylonJSAnimationController = null; // AnimationController instance
 
+    #handlers = {
+        onKeyUp: null,
+        onPointerObservable: null,
+        renderLoop: null,
+    };
+
     /**
      * Constructs a new BabylonJSController instance.
      * Initializes the canvas, asset containers, and options for the Babylon.js scene.
@@ -112,6 +141,18 @@ export default class BabylonJSController {
             };
         });
         this.#options = options;
+        this.#bindHandlers();
+    }
+
+    /**
+     * Pre-binds reusable event handlers to preserve stable references.
+     * @private
+     * @returns {void}
+     */
+    #bindHandlers() {
+        this.#handlers.onKeyUp = this.#onKeyUp.bind(this);
+        this.#handlers.onPointerObservable = this.#onPointerObservable.bind(this);
+        this.#handlers.renderLoop = this.#renderLoop.bind(this);
     }
 
     /**
@@ -401,13 +442,34 @@ export default class BabylonJSController {
     }
 
     /**
-     * Sets up interaction handlers for the Babylon.js canvas.
+     * Handles pointer events observed on the Babylon.js scene.
+     * @private
+     * @param {PointerInfo} info - The pointer event information from Babylon.js.
+     * @returns {void}
+     */
+    #onPointerObservable(info) {
+        const pickInfo = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+        if (info.type === PointerEventTypes.POINTERUP) {
+            this.#onPointerUp(info.event, pickInfo);
+        } else if (info.type === PointerEventTypes.POINTERMOVE) {
+            this.#onPointerMove(info.event, pickInfo);
+        } else if (info.type === PointerEventTypes.POINTERWHEEL) {
+            this.#onMouseWheel(info.event, pickInfo);
+        }
+    }
+
+    /**
+     * Sets up interaction handlers for the Babylon.js canvas and scene.
      * @private
      * @returns {void}
      */
     #enableInteraction() {
-        this.#canvas.addEventListener("wheel", this.#onMouseWheel.bind(this));
-        this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+        if (this.#canvas) {
+            this.#canvas.addEventListener("keyup", this.#handlers.onKeyUp);
+        }
+        if (this.#scene) {
+            this.#scene.onPointerObservable.add(this.#handlers.onPointerObservable);
+        }
     }
 
     /**
@@ -416,8 +478,52 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #disableInteraction() {
-        this.#canvas.removeEventListener("wheel", this.#onMouseWheel.bind(this));
-        this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
+        if (this.#canvas) {
+            this.#canvas.removeEventListener("keyup", this.#handlers.onKeyUp);
+        }
+        if (this.#scene !== null) {
+            this.#scene.onPointerObservable.removeCallback(this.#handlers.onPointerObservable);
+        }
+    }
+
+    /**
+     * Disposes the BabylonJSAnimationController instance if it exists.
+     * @private
+     * @returns {void}
+     */
+    #disposeAnimationController() {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.dispose();
+            this.#babylonJSAnimationController = null;
+        }
+    }
+
+    /**
+     * Disposes the Babylon.js WebXR experience if it exists.
+     * @private
+     * @returns {void}
+     */
+    #disposeXRExperience() {
+        if (!this.#XRExperience) {
+            return;
+        }
+
+        if (this.#XRExperience.baseExperience.state === WebXRState.IN_XR) {
+            this.#XRExperience.baseExperience
+                .exitXRAsync()
+                .then(() => {
+                    this.#XRExperience.dispose();
+                    this.#XRExperience = null;
+                })
+                .catch((error) => {
+                    console.warn("Error exiting XR experience:", error);
+                    this.#XRExperience.dispose();
+                    this.#XRExperience = null;
+                });
+        } else {
+            this.#XRExperience.dispose();
+            this.#XRExperience = null;
+        }
     }
 
     /**
@@ -433,21 +539,39 @@ export default class BabylonJSController {
         this.#engine = this.#scene = this.#camera = null;
         this.#hemiLight = this.#dirLight = this.#cameraLight = null;
         this.#shadowGen = null;
-        this.#XRExperience = null;
+    }
+
+    /**
+     * Handles keyup events on the Babylon.js canvas for triggering model and scene downloads.
+     * @private
+     * @param {KeyboardEvent} event - The keyup event.
+     * @returns {void}
+     */
+    #onKeyUp(event) {
+        // CTRL + ALT + letter
+        if (event.ctrlKey && event.altKey && event.key !== undefined) {
+            switch (event.key.toLowerCase()) {
+                case "d":
+                    this.#openDownloadDialog();
+                    break;
+                default:
+                    break;
+            }
+        }
     }
 
     /**
      * Handles mouse wheel events on the Babylon.js canvas for zooming the camera.
      * @private
      * @param {WheelEvent} event - The mouse wheel event.
-     * @returns {void|false}
+     * @param {Object} pickInfo - The result of the scene pick operation (not used in this method).
+     * @returns {void|false} Returns false if there is no active camera; otherwise, void.
      */
-    #onMouseWheel(event) {
-        if (!this.#scene || !this.#camera) {
+    #onMouseWheel(event, pickInfo) {
+        if (!this.#scene?.activeCamera) {
             return false;
         }
-        //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-        //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
+        //this.#scene.activeCamera.target = pickInfo.hit ? pickInfo.pickedPoint.clone() : this.#scene.activeCamera.target;
         if (!this.#scene.activeCamera.metadata?.locked) {
             this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
         }
@@ -455,24 +579,35 @@ export default class BabylonJSController {
     }
 
     /**
-     * Handles keyup events on the Babylon.js canvas for triggering model and scene downloads.
+     * Handles pointer up events on the Babylon.js scene.
      * @private
-     * @param {KeyboardEvent} event - The keyup event.
+     * @param {PointerEvent} event - The pointer up event.
+     * @param {PickInfo} pickInfo - The result of the scene pick operation.
      * @returns {void}
      */
-    #onKeyUp(event) {
-        // CTRL + ALT + letter
-        if (event.ctrlKey && event.altKey && event.key !== undefined) {
-            switch (event.key.toLowerCase()) {
-                case "d":
-                    this.#openDownloadDialog();
-                    break;
-                default:
-                    break;
+    #onPointerUp(event, pickInfo) {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.hideMenu();
+            // Right click for showing animation menu
+            if (event.button === 2) {
+                this.#babylonJSAnimationController.showMenu(pickInfo);
             }
         }
     }
 
+    /**
+     * Handles pointer move events on the Babylon.js scene.
+     * @private
+     * @param {PointerEvent} event - The pointer move event.
+     * @param {PickInfo} pickInfo - The result of the scene pick operation.
+     * @returns {void}
+     */
+    #onPointerMove(event, pickInfo) {
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.hightlightMeshes(pickInfo);
+        }
+    }
+
     /**
      * Applies material options from the configuration to the relevant meshes.
      * @private
@@ -739,7 +874,7 @@ export default class BabylonJSController {
      * @returns {void}
      */
     #stopRender() {
-        this.#engine.stopRenderLoop(this.#renderLoop.bind(this));
+        this.#engine.stopRenderLoop(this.#handlers.renderLoop);
     }
     /**
      * Starts the Babylon.js render loop for the current scene.
@@ -749,7 +884,7 @@ export default class BabylonJSController {
      */
     async #startRender() {
         await this.#scene.whenReadyAsync();
-        this.#engine.runRenderLoop(this.#renderLoop.bind(this));
+        this.#engine.runRenderLoop(this.#handlers.renderLoop);
     }
 
     /**
@@ -820,10 +955,7 @@ export default class BabylonJSController {
 
         await Promise.allSettled(promiseArray)
             .then((values) => {
-                if (this.#babylonJSAnimationController) {
-                    this.#babylonJSAnimationController.dispose();
-                    this.#babylonJSAnimationController = null;
-                }
+                this.#disposeAnimationController();
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -893,7 +1025,6 @@ export default class BabylonJSController {
     #downloadZip(files, name = "files", comment = "", addDateInName = false) {
         name = addDateInName ? this.#addDateToName(name) : name;
 
-        const JSZip = require("jszip");
         const zip = new JSZip();
         zip.comment = comment;
 
@@ -992,7 +1123,7 @@ export default class BabylonJSController {
      */
     async enable() {
         this.#configureDracoCompression();
-        this.#engine = new Engine(this.#canvas, true, { alpha: true });
+        this.#engine = new Engine(this.#canvas, true, { alpha: true, stencil: true, preserveDrawingBuffer: false });
         this.#engine.disableUniformBuffers = true;
         this.#scene = new Scene(this.#engine);
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
@@ -1014,10 +1145,8 @@ export default class BabylonJSController {
     disable() {
         this.#canvasResizeObserver.disconnect();
         this.#disableInteraction();
-        if (this.#babylonJSAnimationController) {
-            this.#babylonJSAnimationController.dispose();
-            this.#babylonJSAnimationController = null;
-        }
+        this.#disposeAnimationController();
+        this.#disposeXRExperience();
         this.#disposeEngine();
     }
 

package/src/file-storage.js

@@ -174,7 +174,12 @@ export class FileStorage {
             xhr.onload = () => {
                 if (xhr.status === 200) {
                     const blob = xhr.response;
-                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    const lastModified = xhr.getResponseHeader("Last-Modified");
+                    let timeStamp = null;
+                    if (lastModified) {
+                        const parsed = new Date(lastModified);
+                        timeStamp = Number.isNaN(parsed.valueOf()) ? null : parsed.toISOString();
+                    }
                     file = { blob: blob, timeStamp: timeStamp };
                     resolve(file);
                 } else {
@@ -204,7 +209,11 @@ export class FileStorage {
             xhr.responseType = "blob";
             xhr.onload = () => {
                 if (xhr.status === 200) {
-                    timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
+                    const lastModified = xhr.getResponseHeader("Last-Modified");
+                    if (lastModified) {
+                        const parsed = new Date(lastModified);
+                        timeStamp = Number.isNaN(parsed.valueOf()) ? null : parsed.toISOString();
+                    }
                     resolve(timeStamp);
                 } else {
                     resolve(timeStamp);