@preference-sl/pref-viewer 2.11.0-beta.1 → 2.11.0-beta.11

package/src/babylonjs-controller.js

@@ -1,9 +1,12 @@
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
+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 "@babylonjs/loaders";
-import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
-import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
+import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
+
 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.
@@ -13,7 +16,7 @@ import GLTFResolver from "./gltf-resolver.js";
  *  - 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 and USDZ formats.
+ *  - Provides methods for downloading models and scenes in GLB, GLTF, and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
  *
@@ -23,7 +26,7 @@ import GLTFResolver from "./gltf-resolver.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.downloadModelUSDZ(), etc.
+ *  - Download assets: controller.downloadModelGLB(), controller.downloadModelGLTF(), controller.downloadModelUSDZ(), controller.downloadModelAndSceneGLB(), controller.downloadModelAndSceneGLTF(), controller.downloadModelAndSceneUSDZ();
  *  - Disable rendering: controller.disable();
  *
  * Public Methods:
@@ -33,20 +36,29 @@ import GLTFResolver from "./gltf-resolver.js";
  *  - setCameraOptions(): Applies camera options from configuration.
  *  - setMaterialOptions(): Applies material options from configuration.
  *  - setContainerVisibility(name, show): Shows or hides a container by name.
- *  - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ(): Downloads assets.
+ *  - downloadGLB(content): Downloads the current scene, model, or environment as a GLB file.
+ *  - 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:
  *  - #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.
- *  - #setupInteraction(): Sets up canvas interaction handlers.
+ *  - #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.
- *  - #addStylesToARButton(): Styles AR button.
- *  - #createXRExperience(): Initializes WebXR AR experience.
+ *  - #downloadZip(): Generates and downloads a ZIP file.
+ *  - #openDownloadDialog(): Opens the modal download dialog.
  *
  * Notes:
  *  - Designed for integration with PrefViewer and GLTFResolver.
@@ -76,6 +88,7 @@ export default class BabylonJSController {
     #options = {};
 
     #gltfResolver = null; // GLTFResolver instance
+    #babylonJSAnimationController = null; // AnimationController instance
 
     /**
      * Constructs a new BabylonJSController instance.
@@ -290,29 +303,42 @@ export default class BabylonJSController {
             return false;
         }
 
-        let createIBLShadowPipeline = function (scene) {
+        /**
+         * Creates and configures the IBL shadow render pipeline for the Babylon.js scene.
+         * Sets recommended options for resolution, sampling, opacity, and disables debug passes.
+         * Accepts an optional camera array for pipeline targeting.
+         * @private
+         * @param {Scene} scene - The Babylon.js scene instance.
+         * @param {Camera[]} [cameras] - Optional array of cameras to target with the pipeline.
+         * @returns {IblShadowsRenderPipeline} The configured IBL shadow pipeline.
+         */
+        let createIBLShadowPipeline = function (scene, cameras = [scene.activeCamera]) {
             const pipeline = new IblShadowsRenderPipeline(
                 "iblShadowsPipeline",
                 scene,
                 {
-                    resolutionExp: 7,
-                    sampleDirections: 2,
+                    resolutionExp: 8, // Higher resolution for better shadow quality
+                    sampleDirections: 4, // More sample directions for smoother shadows
                     ssShadowsEnabled: true,
-                    shadowRemanence: 0.8,
+                    shadowRemanence: 0.85,
                     triPlanarVoxelization: true,
-                    shadowOpacity: 0.8,
+                    shadowOpacity: 0.85,
                 },
-                [scene.activeCamera]
+                cameras
             );
-            pipeline.allowDebugPasses = false;
-            pipeline.gbufferDebugEnabled = true;
-            pipeline.importanceSamplingDebugEnabled = false;
-            pipeline.voxelDebugEnabled = false;
-            pipeline.voxelDebugDisplayMip = 1;
-            pipeline.voxelDebugAxis = 2;
-            pipeline.voxelTracingDebugEnabled = false;
-            pipeline.spatialBlurPassDebugEnabled = false;
-            pipeline.accumulationPassDebugEnabled = false;
+            // Disable all debug passes for performance
+            const pipelineProps = {
+                allowDebugPasses: false,
+                gbufferDebugEnabled: false,
+                importanceSamplingDebugEnabled: false,
+                voxelDebugEnabled: false,
+                voxelDebugDisplayMip: 0,
+                voxelDebugAxis: 0,
+                voxelTracingDebugEnabled: false,
+                spatialBlurPassDebugEnabled: false,
+                accumulationPassDebugEnabled: false,
+            };
+            Object.assign(pipeline, pipelineProps);
             return pipeline;
         };
 
@@ -376,23 +402,22 @@ export default class BabylonJSController {
 
     /**
      * Sets up interaction handlers for the Babylon.js canvas.
-     * Adds a wheel event listener to control camera zoom based on mouse wheel input.
-     * Prevents zoom if the active camera is locked.
      * @private
      * @returns {void}
      */
-    #setupInteraction() {
-        this.#canvas.addEventListener("wheel", (event) => {
-            if (!this.#scene || !this.#camera) {
-                return false;
-            }
-            //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
-            //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
-            if (!this.#scene.activeCamera.metadata?.locked) {
-                this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
-            }
-            event.preventDefault();
-        });
+    #enableInteraction() {
+        this.#canvas.addEventListener("wheel", this.#onMouseWheel.bind(this));
+        this.#canvas.addEventListener("keyup", this.#onKeyUp.bind(this));
+    }
+
+    /**
+     * Removes interaction event listeners from the Babylon.js canvas.
+     * @private
+     * @returns {void}
+     */
+    #disableInteraction() {
+        this.#canvas.removeEventListener("wheel", this.#onMouseWheel.bind(this));
+        this.#canvas.removeEventListener("keyup", this.#onKeyUp.bind(this));
     }
 
     /**
@@ -411,10 +436,47 @@ export default class BabylonJSController {
         this.#XRExperience = null;
     }
 
+    /**
+     * Handles mouse wheel events on the Babylon.js canvas for zooming the camera.
+     * @private
+     * @param {WheelEvent} event - The mouse wheel event.
+     * @returns {void|false}
+     */
+    #onMouseWheel(event) {
+        if (!this.#scene || !this.#camera) {
+            return false;
+        }
+        //const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+        //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
+        if (!this.#scene.activeCamera.metadata?.locked) {
+            this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
+        }
+        event.preventDefault();
+    }
+
+    /**
+     * 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;
+            }
+        }
+    }
+
     /**
      * Applies material options from the configuration to the relevant meshes.
      * @private
-     * @param {object} optionMaterial - Material option containing value, nodePrefixes, nodeNames, and state.
+     * @param {MaterialData} optionMaterial - Material option containing value, nodePrefixes, nodeNames, and state.
      * @returns {boolean} True if any mesh material was set, false otherwise.
      */
     #setOptionsMaterial(optionMaterial) {
@@ -435,7 +497,7 @@ export default class BabylonJSController {
             if (container.state.name === "materials") {
                 return;
             }
-            if (container.assetContainer && (container.isPending || materialContainer.isPending || optionMaterial.isPending)) {
+            if (container.assetContainer && (container.state.isPending || materialContainer.state.isPending || optionMaterial.isPending)) {
                 assetContainersToProcess.push(container.assetContainer);
             }
         });
@@ -487,7 +549,7 @@ export default class BabylonJSController {
         const modelContainer = this.#containers.model;
         const environmentContainer = this.#containers.environment;
 
-        if (!cameraState.isPending && !modelContainer.isPending && !environmentContainer.isPending) {
+        if (!cameraState.isPending && !modelContainer.state.isPending && !environmentContainer.state.isPending) {
             return false;
         }
 
@@ -542,7 +604,7 @@ export default class BabylonJSController {
      * Finds and returns the asset container object by its name.
      * @private
      * @param {string} name - The name of the container to find.
-     * @returns {object|null} The matching container object, or null if not found.
+     * @returns {Object|null} The matching container object, or null if not found.
      */
     #findContainerByName(name) {
         return Object.values(this.#containers).find((container) => container.state.name === name) || null;
@@ -567,6 +629,13 @@ export default class BabylonJSController {
      */
     #getPrefViewerComponent() {
         if (this.#prefViewer === undefined) {
+            if (this.#prefViewer3D === undefined) {
+                this.#getPrefViewer3DComponent();
+            }
+            if (!this.#prefViewer3D) {
+                this.#prefViewer = null;
+                return;
+            }
             const rootNode = this.#prefViewer3D ? this.#prefViewer3D.getRootNode().host : null;
             this.#prefViewer = rootNode && rootNode.nodeName === "PREF-VIEWER" ? rootNode : null;
         }
@@ -579,7 +648,7 @@ export default class BabylonJSController {
      * @param {boolean} isVisible - True to show the container, false to hide it.
      * @returns {void}
      */
-    #updateVisibilityAttributeInComponentes(name, isVisible) {
+    #updateVisibilityAttributeInComponents(name, isVisible) {
         // Cache references to parent custom elements
         this.#getPrefViewer3DComponent();
         this.#getPrefViewerComponent();
@@ -596,13 +665,16 @@ export default class BabylonJSController {
      * Adds the asset container to the Babylon.js scene if it should be shown and is not already visible.
      * @private
      * @param {object} container - The container object containing asset state and metadata.
+     * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was added, false otherwise.
      */
-    #addContainer(container) {
+    #addContainer(container, updateVisibility = true) {
         if (!container.assetContainer || container.state.isVisible || !container.state.mustBeShown) {
             return false;
         }
-        this.#updateVisibilityAttributeInComponentes(container.state.name, true);
+        if (updateVisibility) {
+            this.#updateVisibilityAttributeInComponents(container.state.name, true);
+        }
         container.assetContainer.addAllToScene();
         container.state.visible = true;
         return true;
@@ -612,13 +684,16 @@ export default class BabylonJSController {
      * Removes the asset container from the Babylon.js scene if it is currently visible.
      * @private
      * @param {object} container - The container object containing asset state and metadata.
+     * @param {boolean} [updateVisibility=true] - If true, updates the visibility attribute in parent components.
      * @returns {boolean} True if the container was removed, false otherwise.
      */
-    #removeContainer(container) {
+    #removeContainer(container, updateVisibility = true) {
         if (!container.assetContainer || !container.state.isVisible) {
             return false;
         }
-        this.#updateVisibilityAttributeInComponentes(container.state.name, false);
+        if (updateVisibility) {
+            this.#updateVisibilityAttributeInComponents(container.state.name, false);
+        }
         container.assetContainer.removeAllFromScene();
         container.state.visible = false;
         return true;
@@ -628,20 +703,20 @@ export default class BabylonJSController {
      * Replaces the asset container in the Babylon.js scene with a new one.
      * @private
      * @param {object} container - The container object containing asset state and metadata.
-     * @param {object} newAssetContainer - The new asset container to add to the scene.
-     * @returns {boolean} True if the container was replaced, false otherwise.
+     * @param {AssetContainer} newAssetContainer - The new asset container to add to the scene.
+     * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
     #replaceContainer(container, newAssetContainer) {
         if (container.assetContainer) {
-            this.#removeContainer(container);
+            this.#removeContainer(container, false);
             container.assetContainer.dispose();
             container.assetContainer = null;
         }
         this.#scene.getEngine().releaseEffects();
         container.assetContainer = newAssetContainer;
-        this.#addContainer(container);
-        return true;
+        return this.#addContainer(container, false);
     }
+
     /**
      * Sets the visibility of wall and floor meshes in the model container based on the provided value or environment visibility.
      * @private
@@ -663,7 +738,6 @@ export default class BabylonJSController {
      * @private
      * @returns {void}
      */
-    #stopR;
     #stopRender() {
         this.#engine.stopRenderLoop(this.#renderLoop.bind(this));
     }
@@ -725,11 +799,11 @@ export default class BabylonJSController {
     /**
      * Loads all asset containers (model, environment, materials, etc.) and adds them to the scene.
      * @private
-     * @returns {Promise<boolean>} Resolves to true if loading succeeds, false otherwise.
+     * @returns {Promise<{success: boolean, error: any}>} Resolves to an object indicating if loading succeeded and any error encountered.
      * @description
      * Waits for all containers to load in parallel, then replaces or adds them to the scene as needed.
      * Applies material and camera options, sets wall/floor visibility, and initializes lights and shadows.
-     * Returns true if all containers loaded successfully, false otherwise.
+     * Returns an object with success status and error details.
      */
     async #loadContainers() {
         this.#stopRender();
@@ -739,10 +813,17 @@ export default class BabylonJSController {
             promiseArray.push(this.#loadAssetContainer(container));
         });
 
-        let success = false;
+        let detail = {
+            success: false,
+            error: null,
+        };
 
         await Promise.allSettled(promiseArray)
             .then((values) => {
+                if (this.#babylonJSAnimationController) {
+                    this.#babylonJSAnimationController.dispose();
+                    this.#babylonJSAnimationController = null;
+                }
                 values.forEach((result) => {
                     const container = result.value ? result.value[0] : null;
                     const assetContainer = result.value ? result.value[1] : null;
@@ -763,21 +844,137 @@ export default class BabylonJSController {
                 this.#setOptions_Materials();
                 this.#setOptions_Camera();
                 this.#setVisibilityOfWallAndFloorInModel();
-                success = true;
+                detail.success = true;
             })
             .catch((error) => {
                 this.loaded = true;
                 console.error("PrefViewer: failed to load model", error);
-                success = false;
+                detail.success = false;
+                detail.error = error;
             })
             .finally(async () => {
                 this.#setMaxSimultaneousLights();
                 this.#initializeShadows();
+                this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
                 this.#startRender();
-                return success;
             });
+        return detail;
+    }
 
-        return success;
+    /**
+     * Appends the current date and time to the provided name string in the format: name_YYYY-MM-DD_HH.mm.ss
+     * @private
+     * @param {string} name - The base name to which the date and time will be appended.
+     * @returns {string} The name with the appended date and time.
+     */
+    #addDateToName(name) {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const hours = now.getHours().toString().padStart(2, "0");
+        const minutes = now.getMinutes().toString().padStart(2, "0");
+        const seconds = now.getSeconds().toString().padStart(2, "0");
+        name = `${name}_${year}-${month}-${day}_${hours}.${minutes}.${seconds}`;
+        return name;
+    }
+
+    /**
+     * Generates and downloads a ZIP file with the specified folder name and files.
+     * @private
+     * @param {Object} files - An object where keys are file names and values are file contents.
+     * @param {string} [name="files"] - The name for the root folder inside the ZIP.
+     * @param {string} [comment=""] - A comment to include in the ZIP file.
+     * @param {boolean} [addDateInName=false] - Whether to append the current date/time to the folder name.
+     * @returns {void}
+     * @description
+     * Uses JSZip to create the ZIP and triggers a browser download.
+     */
+    #downloadZip(files, name = "files", comment = "", addDateInName = false) {
+        name = addDateInName ? this.#addDateToName(name) : name;
+
+        const JSZip = require("jszip");
+        const zip = new JSZip();
+        zip.comment = comment;
+
+        const rootFolder = zip.folder(name);
+        Object.keys(files).forEach((key) => {
+            rootFolder.file(key, files[key]);
+        });
+
+        zip.generateAsync({ type: "blob" }).then((content) => {
+            const zipName = `${name}.zip`;
+            const a = document.createElement("a");
+            const url = window.URL.createObjectURL(content);
+            a.href = url;
+            a.download = zipName;
+            a.click();
+            window.URL.revokeObjectURL(url);
+        });
+    }
+
+    /**
+     * Opens a modal dialog for downloading the 3D scene, model, or environment.
+     * @private
+     * @returns {void}
+     */
+    #openDownloadDialog() {
+        this.#getPrefViewerComponent();
+        if (!this.#prefViewer) {
+            return;
+        }
+
+        const header = "Download 3D Scene";
+        const content = `
+            <form slot="content" id="download-dialog-form" style="display:flex;flex-direction:column;gap:16px;">
+                <h4>Content</h4>
+                <div style="display:flex;flex-direction:row;gap:16px;margin:0 8px 0 8px;">
+                    <label><input type="radio" name="content" value="1"> Model</label>
+                    <label><input type="radio" name="content" value="2"> Scene</label>
+                    <label><input type="radio" name="content" value="0" checked> Both</label>
+                </div>
+                <h4>Format</h4>
+                <div style="display:flex;flex-direction:row;gap:16px;margin:0 8px 0 8px;">
+                <label><input type="radio" name="format" value="gltf" checked> glTF (ZIP)</label>
+                    <label><input type="radio" name="format" value="glb"> GLB</label>
+                    <label><input type="radio" name="format" value="usdz"> USDZ</label>
+                </div>
+            </form>`;
+        const footer = `
+            <button type="button" class="primary" id="download-dialog-download">Download</button>
+            <button type="button" id="download-dialog-cancel">Cancel</button>`;
+
+        const dialog = this.#prefViewer.openDialog(header, content, footer);
+
+        if (!dialog) {
+            return;
+        }
+
+        // Button event handlers
+        const form = dialog.querySelector("#download-dialog-form");
+        const downloadButton = dialog.querySelector("#download-dialog-download");
+        const cancelButton = dialog.querySelector("#download-dialog-cancel");
+
+        downloadButton.onclick = () => {
+            const contentValue = form.content.value;
+            const formatValue = form.format.value;
+            switch (formatValue) {
+                case "glb":
+                    this.downloadGLB(Number(contentValue));
+                    break;
+                case "gltf":
+                    this.downloadGLTF(Number(contentValue));
+                    break;
+                case "usdz":
+                    this.downloadUSDZ(Number(contentValue));
+                    break;
+            }
+            this.#prefViewer.closeDialog();
+        };
+
+        cancelButton.onclick = () => {
+            this.#prefViewer.closeDialog();
+        };
     }
 
     /**
@@ -801,7 +998,7 @@ export default class BabylonJSController {
         this.#scene.clearColor = new Color4(1, 1, 1, 1);
         this.#createCamera();
         this.#createLights();
-        this.#setupInteraction();
+        this.#enableInteraction();
         await this.#createXRExperience();
         this.#startRender();
         this.#canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
@@ -815,8 +1012,13 @@ export default class BabylonJSController {
      * @returns {void}
      */
     disable() {
-        this.#disposeEngine();
         this.#canvasResizeObserver.disconnect();
+        this.#disableInteraction();
+        if (this.#babylonJSAnimationController) {
+            this.#babylonJSAnimationController.dispose();
+            this.#babylonJSAnimationController = null;
+        }
+        this.#disposeEngine();
     }
 
     /**
@@ -880,50 +1082,105 @@ export default class BabylonJSController {
     }
 
     /**
-     * Initiates download of the current model as a GLB file.
+     * Downloads the current scene, model, or environment as a GLB file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelGLB() {
-        const fileName = "model";
-        GLTF2Export.GLBAsync(this.#containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+    downloadGLB(content = 0) {
+        let fileName = "";
+        let container = null;
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        fileName = this.#addDateToName(fileName);
+        GLTF2Export.GLBAsync(container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            if (glb) {
+                glb.downloadFiles();
+            }
+        });
     }
 
     /**
-     * Initiates download of the current model as a USDZ file.
+     * Downloads the current scene, model, or environment as a glTF ZIP file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelUSDZ() {
-        const fileName = "model";
-        USDZExportAsync(this.#containers.model.assetContainer).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+    downloadGLTF(content = 0) {
+        let fileName = "";
+        let container = null;
+        let comment = "";
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                comment = "Export of the complete scene in glTF format, including the model and the environment.";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                comment = "Export of model scene in glTF format.";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                comment = "Export of the environment scene in glTF format.";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        comment += "\nPrefViewer by Preference, S.L.\npreference.com\n";
+        GLTF2Export.GLTFAsync(container, fileName, { exportWithoutWaitingForScene: true }).then((gltf) => {
+            if (gltf?.files) {
+                this.#downloadZip(gltf.files, fileName, comment, true);
             }
         });
     }
 
     /**
-     * Initiates download of the entire scene (model and environment) as a USDZ file.
+     * Downloads the current scene, model, or environment as a USDZ file.
      * @public
+     * @param {number} content - 0 for full scene, 1 for model, 2 for environment.
      * @returns {void}
      */
-    downloadModelAndSceneUSDZ() {
-        const fileName = "scene";
-        USDZExportAsync(this.#scene).then((response) => {
+    downloadUSDZ(content = 0) {
+        let fileName = "";
+        let container = null;
+        switch (content) {
+            case 0:
+                fileName = "full-scene";
+                container = this.#scene;
+                break;
+            case 1:
+                fileName = "model";
+                container = this.#containers.model.assetContainer;
+                break;
+            case 2:
+                fileName = "scene";
+                container = this.#containers.environment.assetContainer;
+                break;
+            default:
+                break;
+        }
+        fileName = this.#addDateToName(fileName);
+        USDZExportAsync(container).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
             }
         });
     }
-
-    /**
-     * Initiates download of the entire scene (model and environment) as a GLB file.
-     * @public
-     * @returns {void}
-     */
-    downloadModelAndSceneGLB() {
-        const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
-    }
 }