@preference-sl/pref-viewer 2.11.0-beta.6 → 2.11.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.6",
+  "version": "2.11.0-beta.8",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -40,7 +40,8 @@
     "@panzoom/panzoom": "^4.6.0",
     "babylonjs-gltf2interface": "^8.36.1",
     "idb": "^8.0.3",
-    "is-svg": "^6.1.0"
+    "is-svg": "^6.1.0",
+    "jszip": "^3.10.1"
   },
   "devDependencies": {
     "esbuild": "^0.25.10",

package/src/babylonjs-controller.js

@@ -1,11 +1,11 @@
-import { ArcRotateCamera, AssetContainer, Color4, DirectionalLight, Engine, HDRCubeTexture, HemisphericLight, IblShadowsRenderPipeline, LoadAssetContainerAsync, MeshBuilder, PointLight, Scene, ShadowGenerator, Tools, Vector3, WebXRDefaultExperience, WebXRFeatureName, WebXRSessionManager } 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 "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 
 import GLTFResolver from "./gltf-resolver.js";
-import { ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
+import { MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
 
 /**
@@ -16,7 +16,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.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.
  *
@@ -26,7 +26,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.downloadModelUSDZ(), etc.
+ *  - Download assets: controller.downloadModelGLB(), controller.downloadModelGLTF(), controller.downloadModelUSDZ(), controller.downloadModelAndSceneGLB(), controller.downloadModelAndSceneGLTF(), controller.downloadModelAndSceneUSDZ();
  *  - Disable rendering: controller.disable();
  *
  * Public Methods:
@@ -36,20 +36,29 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.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.
@@ -63,6 +72,7 @@ export default class BabylonJSController {
     // References to parent custom elements
     #prefViewer3D = undefined;
     #prefViewer = undefined;
+    #prefViewerDialog = null;
 
     // Babylon.js core objects
     #engine = null;
@@ -393,23 +403,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));
     }
 
     /**
@@ -428,6 +437,43 @@ 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
@@ -452,7 +498,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);
             }
         });
@@ -504,7 +550,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;
         }
 
@@ -559,7 +605,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 {ContainerData|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;
@@ -584,6 +630,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;
         }
@@ -612,7 +665,7 @@ 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 {ContainerData} container - The container object containing asset state and metadata.
+     * @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.
      */
@@ -631,7 +684,7 @@ export default class BabylonJSController {
     /**
      * Removes the asset container from the Babylon.js scene if it is currently visible.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @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.
      */
@@ -650,7 +703,7 @@ export default class BabylonJSController {
     /**
      * Replaces the asset container in the Babylon.js scene with a new one.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
+     * @param {object} container - The container object containing asset state and metadata.
      * @param {AssetContainer} newAssetContainer - The new asset container to add to the scene.
      * @returns {boolean} True if the container was replaced and added, false otherwise.
      */
@@ -703,8 +756,8 @@ export default class BabylonJSController {
     /**
      * Loads an asset container (model, environment, materials, etc.) using the provided container state.
      * @private
-     * @param {ContainerData} container - The container object containing asset state and metadata.
-     * @returns {Promise<[ContainerData, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
+     * @param {object} container - The container object containing asset state and metadata.
+     * @returns {Promise<[object, AssetContainer|boolean]>} Resolves to an array with the container and the loaded asset container, or false if loading fails.
      * @description
      * Resolves the asset source using GLTFResolver, prepares plugin options, and loads the asset into the Babylon.js scene.
      * Updates the container's cache data and returns the container along with the loaded asset container or false if loading fails.
@@ -771,7 +824,7 @@ export default class BabylonJSController {
                 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;
@@ -788,7 +841,7 @@ export default class BabylonJSController {
                         container.state.setSuccess(false);
                     }
                 });
-                
+
                 this.#setOptions_Materials();
                 this.#setOptions_Camera();
                 this.#setVisibilityOfWallAndFloorInModel();
@@ -809,6 +862,132 @@ export default class BabylonJSController {
         return detail;
     }
 
+    /**
+     * 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) {
+        if (addDateInName) {
+            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}`;
+        }
+
+        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;
+        }
+        this.#prefViewerDialog = document.createElement("pref-viewer-dialog");
+        this.#prefViewer.shadowRoot.appendChild(this.#prefViewerDialog);
+
+        const content = document.createElement("div");
+        content.innerHTML = `
+            <form id="download-dialog-form" style="display:flex;flex-direction:column;gap:15px;">
+                <h3 style="margin: 0 0 5px; 0">Download 3D Scene</h3>
+                <h4 style="margin:0;">Content</h4>
+                <div style="display:flex;flex-direction:row;gap:15px;margin:0 10px 0 10px;">
+                    <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 style="margin:0;">Format</h4>
+                <div style="display:flex;flex-direction:row;gap:15px;margin: 0 10px 0 10px;">
+                <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>
+                <div style="display:flex;gap:15px;justify-content:stretch;margin-top:10px;">
+                    <button type="button" id="download-dialog-download">Download</button>
+                    <button type="button" id="download-dialog-cancel">Cancel</button>
+                </div>
+                <style>
+                    #download-dialog-download,
+                    #download-dialog-cancel {
+                        width: 100%;
+                        padding: 8px 20px;
+                        font-size: 1.1rem;
+                        border-radius: 6px;
+                        border: none;
+                        background: #eee;
+                        cursor: pointer;
+                        transition: background 0.2s;
+                    }
+                    #download-dialog-download:hover,
+                    #download-dialog-cancel:hover {
+                        background: #e0e0e0;
+                    }
+                </style>
+            </form>`;
+
+        this.#prefViewerDialog.open(content);
+
+        // Button event handlers
+        const form = content.querySelector("#download-dialog-form");
+        const downloadBtn = content.querySelector("#download-dialog-download");
+        const cancelBtn = content.querySelector("#download-dialog-cancel");
+
+        downloadBtn.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.#prefViewerDialog.close();
+        };
+
+        cancelBtn.onclick = () => {
+            this.#prefViewerDialog.close();
+        };
+
+        this.#prefViewerDialog.open(content);
+    }
+
     /**
      * ---------------------------
      * Public methods
@@ -830,7 +1009,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());
@@ -844,8 +1023,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();
     }
 
     /**
@@ -909,50 +1093,103 @@ 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;
+        }
+        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;
+        }
+        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());
-    }
 }

package/src/index.js

@@ -1,5 +1,6 @@
 import { PrefViewer2D } from "./pref-viewer-2d.js";
 import { PrefViewer3D } from "./pref-viewer-3d.js";
+import { PrefViewerDialog } from "./pref-viewer-dialog.js";
 import { PrefViewerTask } from "./pref-viewer-task.js";
 
 /**
@@ -29,12 +30,30 @@ import { PrefViewerTask } from "./pref-viewer-task.js";
  *  - mode: Viewer mode ("2d" or "3d").
  *
  * Public Methods:
- *  - loadConfig(config), loadModel(model), loadScene(scene), loadMaterials(materials), loadDrawing(drawing)
- *  - setOptions(options)
+ *  - loadConfig(config): Loads a configuration object or JSON string.
+ *  - loadModel(model): Loads a model object or JSON string.
+ *  - loadScene(scene): Loads a scene/environment object or JSON string.
+ *  - loadMaterials(materials): Loads materials object or JSON string.
+ *  - loadDrawing(drawing): Loads a drawing object or JSON string.
+ *  - setOptions(options): Sets viewer options from an object or JSON string.
  *  - setMode(mode): Sets the viewer mode to "2d" or "3d" and updates component visibility.
- *  - showModel(), hideModel(), showScene(), hideScene()
- *  - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ()
- *  - zoomCenter(), zoomExtentsAll(), zoomIn(), zoomOut()
+ *  - showModel(): Shows the 3D model.
+ *  - hideModel(): Hides the 3D model.
+ *  - showScene(): Shows the 3D environment/scene.
+ *  - hideScene(): Hides the 3D environment/scene.
+ *  - zoomCenter(): Centers the 2D drawing view.
+ *  - zoomExtentsAll(): Zooms the 2D drawing to fit all content.
+ *  - zoomIn(): Zooms in on the 2D drawing.
+ *  - zoomOut(): Zooms out of the 2D drawing.
+ *  - downloadModelGLB(): Downloads the current 3D model as a GLB file.
+ *  - downloadModelGLTF(): Downloads the current 3D model as a glTF ZIP file.
+ *  - downloadModelUSDZ(): Downloads the current 3D model as a USDZ file.
+ *  - downloadModelAndSceneGLB(): Downloads both the model and scene as a GLB file.
+ *  - downloadModelAndSceneGLTF(): Downloads both the model and scene as a glTF ZIP file.
+ *  - downloadModelAndSceneUSDZ(): Downloads both the model and scene as a USDZ file.
+ *  - downloadSceneGLB(): Downloads the environment as a GLB file.
+ *  - downloadSceneGLTF(): Downloads the environment as a glTF ZIP file.
+ *  - downloadSceneUSDZ(): Downloads the environment as a USDZ file.
  *
  * Public Properties:
  *  - isInitialized: Indicates if the viewer is initialized.
@@ -65,6 +84,7 @@ class PrefViewer extends HTMLElement {
 
     #component2D = null;
     #component3D = null;
+    #dialog = null;
 
     /**
      * Creates a new PrefViewer instance and attaches a shadow DOM.
@@ -689,6 +709,19 @@ class PrefViewer extends HTMLElement {
         this.#component3D.downloadModelGLB();
     }
 
+    /**
+     * Initiates download of the current 3D model in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelGLTF();
+    }
+
     /**
      * Initiates download of the current 3D model in USDZ format.
      * @public
@@ -701,9 +734,35 @@ class PrefViewer extends HTMLElement {
 
         this.#component3D.downloadModelUSDZ();
     }
+    
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in GLB format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLB() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLB();
+    }
+
+    /**
+     * Initiates download of the current complete scene (3D model and environment) in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLTF();
+    }
 
     /**
-     * Initiates download of both the 3D model and scene in USDZ format.
+     * Initiates download of the current complete scene (3D model and environment) in USDZ format.
      * @public
      * @returns {void}
      */
@@ -716,18 +775,50 @@ class PrefViewer extends HTMLElement {
     }
 
     /**
-     * Initiates download of both the 3D model and scene in GLB format.
+     * Initiates download of the current 3D environment in GLB format.
      * @public
      * @returns {void}
      */
-    downloadModelAndSceneGLB() {
+    downloadSceneGLB() {
         if (!this.#component3D) {
             return;
         }
 
-        this.#component3D.downloadModelAndSceneGLB();
+        this.#component3D.downloadSceneGLB();
     }
 
+    /**
+     * Initiates download of the current 3D environment in GLTF format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLTF() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadSceneGLTF();
+    }
+
+    /**
+     * Initiates download of the current 3D environment in USDZ format.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneUSDZ() {
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadSceneUSDZ();
+    }
+
+    /**
+     * ---------------------------
+     * Public properties
+     * ---------------------------
+     */
+
     /**
      * Indicates whether the viewer has been initialized.
      * @public
@@ -776,4 +867,5 @@ class PrefViewer extends HTMLElement {
 
 customElements.define("pref-viewer-2d", PrefViewer2D);
 customElements.define("pref-viewer-3d", PrefViewer3D);
+customElements.define("pref-viewer-dialog", PrefViewerDialog);
 customElements.define("pref-viewer", PrefViewer);

package/src/pref-viewer-3d.js

@@ -31,9 +31,14 @@ import BabylonJSController from "./babylonjs-controller.js";
  *  - showEnvironment(): Shows the 3D environment/scene.
  *  - hideEnvironment(): Hides the 3D environment/scene.
  *  - downloadModelGLB(): Downloads the current 3D model as a GLB file.
+ *  - downloadModelGLTF(): Downloads the current 3D model as a glTF ZIP file.
  *  - downloadModelUSDZ(): Downloads the current 3D model as a USDZ file.
  *  - downloadModelAndSceneGLB(): Downloads both the model and scene as a GLB file.
+ *  - downloadModelAndSceneGLTF(): Downloads both the model and scene as a glTF ZIP file.
  *  - downloadModelAndSceneUSDZ(): Downloads both the model and scene as a USDZ file.
+ *  - downloadSceneGLB(): Downloads the environment as a GLB file.
+ *  - downloadSceneGLTF(): Downloads the environment as a glTF ZIP file.
+ *  - downloadSceneUSDZ(): Downloads the environment as a USDZ file.
  *
  * Public Properties:
  *  - isInitialized: Indicates whether the component has completed initialization.
@@ -567,7 +572,19 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelGLB();
+        this.#babylonJSController.downloadGLB(1);
+    }
+
+    /**
+     * Downloads the current 3D model as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadModelGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(1);
     }
 
     /**
@@ -579,11 +596,35 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelUSDZ();
+        this.#babylonJSController.downloadUSDZ(1);
+    }
+
+    /**
+     * Downloads the current 3D complete scene (model and environment) as a GLB file.
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadModelGLB(0);
     }
 
     /**
-     * Downloads both the 3D model and scene as a USDZ file.
+     * Downloads the current 3D complete scene (model and environment) as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadModelAndSceneGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(0);
+    }
+
+    /**
+     * Downloads the current 3D complete scene (model and environment) as a USDZ file.
      * @public
      * @returns {void}
      */
@@ -591,19 +632,43 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelAndSceneUSDZ();
+        this.#babylonJSController.downloadUSDZ(0);
     }
 
     /**
-     * Downloads both the 3D model and scene as a GLB file.
+     * Downloads the current 3D environment as a GLB file.
      * @public
      * @returns {void}
      */
-    downloadModelAndSceneGLB() {
+    downloadSceneGLB() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLB(2);
+    }
+
+    /**
+     * Downloads the current 3D environment as a glTF file (ZIP with gltf and all resources (textures, buffers, etc.)).
+     * @public
+     * @returns {void}
+     */
+    downloadSceneGLTF() {
+        if (!this.#babylonJSController) {
+            return;
+        }
+        this.#babylonJSController.downloadGLTF(2);
+    }
+
+    /**
+     * Downloads the current 3D environment as a USDZ file.
+     * @public
+     * @returns {void}
+     */
+    downloadSceneUSDZ() {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelAndSceneGLB();
+        this.#babylonJSController.downloadUSDZ(2);
     }
 
     /**

package/src/pref-viewer-dialog.js

@@ -0,0 +1,121 @@
+/**
+ * PrefViewerDialog - Custom Web Component for displaying modal dialogs in PrefViewer.
+ *
+ * Overview:
+ *  - Provides a modal dialog overlay for user interactions such as downloads or confirmations.
+ *  - Handles DOM creation, styling, and open/close logic.
+ *  - Ensures dialog content is centered and styled appropriately.
+ *  - Automatically focuses the canvas when closed for improved accessibility.
+ *
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer-dialog></pref-viewer-dialog>
+ *  - Call open(content) to display the dialog with custom HTML content.
+ *  - Call close() to hide and remove the dialog.
+ *
+ * Methods:
+ *  - constructor(): Initializes the custom element.
+ *  - connectedCallback(): Called when the element is added to the DOM; sets up DOM and styles.
+ *  - disconnectedCallback(): Called when the element is removed from the DOM; cleans up resources.
+ *  - open(content): Displays the dialog and appends the provided content.
+ *  - close(): Hides and removes the dialog, refocuses the canvas if available.
+ *  - #createDOMElements(): Creates the dialog structure and applies styles.
+ */
+export class PrefViewerDialog extends HTMLElement {
+    #wrapper = null;
+
+    /**
+     * Initializes the custom dialog element.
+     * Only calls super(); heavy initialization is deferred to connectedCallback.
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Called when the element is inserted into the DOM.
+     * Sets up the dialog's DOM structure and styles.
+     * @returns {void}
+     */
+    connectedCallback() {
+        this.#createDOMElements();
+    }
+
+    /**
+     * Called when the element is removed from the DOM.
+     * Cleans up resources and event listeners.
+     * @returns {void}
+     */
+    disconnectedCallback() {}
+
+    /**
+     * Creates the dialog's DOM structure and applies CSS styles.
+     * Adds a click handler to close the dialog when clicking outside the content.
+     * @private
+     * @returns {void}
+     */
+    #createDOMElements() {
+        this.#wrapper = document.createElement("div");
+        this.append(this.#wrapper);
+        const style = document.createElement("style");
+        style.textContent = `
+            pref-viewer-dialog {
+                display: none;
+            }
+            pref-viewer-dialog[open] {
+                font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.25);
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: 1000;
+            }
+            pref-viewer-dialog > div:first-child {
+                display: inline-block;
+                background: #fff;
+                border-radius: 10px;
+                box-shadow: 0 4px 24px rgba(0,0,0,0.25);
+                padding: 15px;
+                max-width: 90%;
+                max-height: 90%;
+                overflow: auto;
+            }`;
+        this.append(style);
+        this.addEventListener("click", (event) => {
+            if (event.target === this) {
+                this.close();
+            }
+        });
+    }
+
+    /**
+     * Opens the dialog and appends the provided content.
+     * @param {HTMLElement} content - The HTML content to display inside the dialog.
+     * @returns {void}
+     */
+    open(content) {
+        this.setAttribute("open", "");
+        this.#wrapper.appendChild(content);
+    }
+
+    /**
+     * Closes and removes the dialog from the DOM.
+     * @returns {void}
+     */
+    close() {
+        this.removeAttribute("open");
+        const parent = this.getRootNode().host;
+        if (parent) {
+            // Refocus canvas for accessibility
+            const canvas = parent.shadowRoot.querySelector("canvas");
+            if (canvas) {
+                canvas.focus();
+            }
+        }
+        this.remove();
+    }
+}