@preference-sl/pref-viewer 2.11.0-beta.2 → 2.11.0-beta.20

package/src/panzoom-controller.js

@@ -1,59 +1,68 @@
-import "@panzoom/panzoom";
+// Explicitly target the ESM bundle so esbuild (platform=node) picks up the default export.
+import Panzoom from "@panzoom/panzoom/dist/panzoom.es.js";
 
 /**
- * PanzoomController - Encapsulates the logic for managing pan and zoom interactions on a given DOM element.
+ * PanzoomController - Encapsulates logic for managing pan and zoom interactions on a DOM element using the Panzoom library.
  *
- * Responsibilities:
- *  - Provides an interface to enable, disable, and control pan/zoom interactions.
- *  - Manages event listeners for mouse, keyboard, and touch interactions.
- *  - Tracks the current pan/zoom state and invokes a callback when the state changes.
- *  - Supports zooming in/out, panning, resetting, and mouse wheel zoom.
+ * Summary:
+ *  Provides a high-level API to enable, disable, and control pan/zoom interactions for SVG or other DOM content.
+ *  Manages event listeners for mouse, keyboard, and touch interactions, and tracks the current pan/zoom state.
+ *  Supports zooming in/out, panning, resetting, and mouse wheel zoom, with customizable options and callbacks.
+ *
+ * Key Responsibilities:
+ *  - Initializes and manages a Panzoom instance for a wrapper element.
+ *  - Handles enabling/disabling pan/zoom and related event listeners.
+ *  - Tracks and exposes the current pan/zoom state.
+ *  - Supports keyboard shortcuts, mouse wheel zoom, and context menu prevention.
+ *  - Provides methods for panning, zooming, and resetting the view.
+ *  - Invokes a callback when the pan/zoom state changes.
  *
  * Usage:
- *  - Instantiate the controller with a DOM element and optional configuration:
- *      const controller = new PanzoomController(wrapperElement, options, stateChangeCallback);
- *  - Use public methods like `enable()`, `zoomIn()`, `pan(x, y)`, etc., to control interactions.
- *  - Call `disable()` to remove all event listeners and destroy the Panzoom instance.
+ *  - Instantiate: const controller = new PanzoomController(wrapperElement, options, stateChangeCallback);
+ *  - Enable pan/zoom: controller.enable();
+ *  - Enable events: controller.enableEvents();
+ *  - Control view: controller.pan(x, y), controller.zoomIn(), controller.zoomOut(), controller.reset();
+ *  - Disable pan/zoom and events: controller.disable(), controller.disableEvents();
  *
  * Constructor Parameters:
- *  - `wrapper` (HTMLElement): The DOM element to apply pan/zoom interactions to.
- *  - `options` (object): Configuration options for Panzoom (e.g., minScale, maxScale, step).
- *  - `changedCallback` (function): Optional callback invoked when the pan/zoom state changes.
+ *  - wrapper (HTMLElement): The DOM element to apply pan/zoom interactions to.
+ *  - options (object): Configuration options for Panzoom (e.g., minScale, maxScale, step).
+ *  - changedCallback (function): Optional callback invoked when the pan/zoom state changes.
  *
  * Public Methods:
- *  - `enable()`: Enables the Panzoom instance and initializes it if not already enabled.
- *  - `disable()`: Disables the Panzoom instance and removes all event listeners.
- *  - `enableEvents()`: Attaches all required event listeners for interactions.
- *  - `disableEvents()`: Removes all previously attached event listeners.
- *  - `pan(x, y)`: Pans the view to the specified coordinates.
- *  - `reset()`: Resets pan and zoom to fit the entire content within the available space.
- *  - `zoomIn(focal?)`: Zooms in by one step, optionally centered on a focal point.
- *  - `zoomOut(focal?)`: Zooms out by one step, optionally centered on a focal point.
+ *  - enable(): Enables the Panzoom instance and initializes it if not already enabled.
+ *  - disable(): Disables the Panzoom instance and removes all event listeners.
+ *  - enableEvents(): Attaches all required event listeners for interactions.
+ *  - disableEvents(): Removes all previously attached event listeners.
+ *  - pan(x, y): Pans the view to the specified coordinates.
+ *  - reset(): Resets pan and zoom to fit the entire content within the available space.
+ *  - zoomIn(focal?): Zooms in by one step, optionally centered on a focal point.
+ *  - zoomOut(focal?): Zooms out by one step, optionally centered on a focal point.
  *
  * Getters:
- *  - `panzoom`: Returns the current Panzoom instance or `null` if not initialized.
- *  - `state`: Returns the current pan/zoom state (e.g., moved, scaled, maximized, minimized).
+ *  - panzoom: Returns the current Panzoom instance or null if not initialized.
+ *  - state: Returns the current pan/zoom state (moved, scaled, maximized, minimized).
  *
  * Private Methods:
- *  - `#checkPanzoomState(transform)`: Updates the internal state and invokes the state change callback.
- *  - `#resetTransform()`: Resets the transform applied to the wrapper element.
- *  - `#setFocus()`: Sets focus on the parent element to enable keyboard interactions.
- *  - `#onPanzoomStart(e)`: Handles the start of a pan/zoom interaction.
- *  - `#onPanzoomChange(e)`: Handles changes in pan/zoom state.
- *  - `#onPanzoomEnd(e)`: Handles the end of a pan/zoom interaction.
- *  - `#onZoomWithWheel(e)`: Handles zoom interactions via the mouse wheel.
- *  - `#enableMouseWheelZoom()`: Enables zooming with the mouse wheel.
- *  - `#disableMouseWheelZoom()`: Disables zooming with the mouse wheel.
- *  - `#getDistanceBetweenPoints(point1, point2)`: Calculates the Euclidean distance between two points.
- *  - `#getPointFromEvent(e)`: Extracts client coordinates from a mouse or touch event.
+ *  - #bindHandlers(): Pre-binds reusable event handlers to preserve stable references.
+ *  - #checkPanzoomState(transform): Updates the internal state and invokes the state change callback.
+ *  - #resetTransform(): Resets the transform applied to the wrapper element.
+ *  - #setFocus(): Sets focus on the parent element to enable keyboard interactions.
+ *  - #onPanzoomStart(e): Handles the start of a pan/zoom interaction.
+ *  - #onPanzoomChange(e): Handles changes in pan/zoom state.
+ *  - #onPanzoomEnd(e): Handles the end of a pan/zoom interaction.
+ *  - #onZoomWithWheel(e): Handles zoom interactions via the mouse wheel.
+ *  - #enableMouseWheelZoom(): Enables zooming with the mouse wheel.
+ *  - #disableMouseWheelZoom(): Disables zooming with the mouse wheel.
+ *  - #getDistanceBetweenPoints(point1, point2): Calculates the Euclidean distance between two points.
+ *  - #getPointFromEvent(e): Extracts client coordinates from a mouse or touch event.
  *
  * Notes:
  *  - Designed to work with the Panzoom library for managing pan/zoom interactions.
- *  - Provides a clean separation of concerns by encapsulating all pan/zoom logic in a single class.
+ *  - Encapsulates all pan/zoom logic in a single class for clean separation of concerns.
  *  - Can be extended or customized by overriding methods or providing additional options.
  */
 export default class PanzoomController {
-    #changedCallback = null;
     #interactionOptions = {
         clickThreshold: 6, // Threshold to avoid false clicks on elements when panning or zooming
     };
@@ -79,11 +88,40 @@ export default class PanzoomController {
         minimized: false,
     };
     #wrapper = null;
-
+    
+    #changedCallback = null;
+    #handlers = {
+        panzoomStart: null,
+        panzoomChange: null,
+        panzoomEnd: null,
+        keyUp: null,
+        focus: null,
+        blur: null,
+        contextMenu: null,
+        wheel: null,
+    };
+    
     constructor(wrapper = null, options = {}, changedCallback = null) {
         this.#wrapper = wrapper;
         Object.assign(this.#options, options);
         this.#changedCallback = changedCallback;
+        this.#bindHandlers();
+    }
+
+    /**
+     * Pre-binds reusable event handlers to preserve stable references.
+     * @private
+     * @returns {void}
+     */
+    #bindHandlers() {
+        this.#handlers.panzoomStart = this.#onPanzoomStart.bind(this);
+        this.#handlers.panzoomChange = this.#onPanzoomChange.bind(this);
+        this.#handlers.panzoomEnd = this.#onPanzoomEnd.bind(this);
+        this.#handlers.keyUp = this.#onKeyUp.bind(this);
+        this.#handlers.focus = this.#enableMouseWheelZoom.bind(this);
+        this.#handlers.blur = this.#disableMouseWheelZoom.bind(this);
+        this.#handlers.contextMenu = this.#onContextMenu.bind(this);
+        this.#handlers.wheel = this.#onZoomWithWheel.bind(this);
     }
 
     /**
@@ -294,7 +332,7 @@ export default class PanzoomController {
         if (!this.#panzoom) {
             return;
         }
-        this.#wrapper.parentElement.removeEventListener("wheel", this.#onZoomWithWheel.bind(this));
+        this.#wrapper.parentElement.removeEventListener("wheel", this.#handlers.wheel);
     }
 
     /**
@@ -309,7 +347,7 @@ export default class PanzoomController {
             return;
         }
         this.#disableMouseWheelZoom();
-        this.#wrapper.parentElement.addEventListener("wheel", this.#onZoomWithWheel.bind(this));
+        this.#wrapper.parentElement.addEventListener("wheel", this.#handlers.wheel);
     }
 
     /**
@@ -363,13 +401,13 @@ export default class PanzoomController {
 
         this.disableEvents();
 
-        this.#wrapper.addEventListener("panzoomstart", this.#onPanzoomStart.bind(this));
-        this.#wrapper.addEventListener("panzoomchange", this.#onPanzoomChange.bind(this));
-        this.#wrapper.addEventListener("panzoomend", this.#onPanzoomEnd.bind(this));
-        this.#wrapper.parentElement.addEventListener("keyup", this.#onKeyUp.bind(this));
-        this.#wrapper.parentElement.addEventListener("focus", this.#enableMouseWheelZoom.bind(this), true);
-        this.#wrapper.parentElement.addEventListener("blur", this.#disableMouseWheelZoom.bind(this), true);
-        this.#wrapper.parentElement.addEventListener("contextmenu", this.#onContextMenu);
+        this.#wrapper.addEventListener("panzoomstart", this.#handlers.panzoomStart);
+        this.#wrapper.addEventListener("panzoomchange", this.#handlers.panzoomChange);
+        this.#wrapper.addEventListener("panzoomend", this.#handlers.panzoomEnd);
+        this.#wrapper.parentElement.addEventListener("keyup", this.#handlers.keyUp);
+        this.#wrapper.parentElement.addEventListener("focus", this.#handlers.focus, true);
+        this.#wrapper.parentElement.addEventListener("blur", this.#handlers.blur, true);
+        this.#wrapper.parentElement.addEventListener("contextmenu", this.#handlers.contextMenu);
         this.#wrapper.parentElement.setAttribute("tabindex", 0);
         this.#setFocus();
     }
@@ -385,13 +423,13 @@ export default class PanzoomController {
             return;
         }
         this.#wrapper.parentElement.removeAttribute("tabindex");
-        this.#wrapper.removeEventListener("panzoomstart", this.#onPanzoomStart.bind(this));
-        this.#wrapper.removeEventListener("panzoomchange", this.#onPanzoomChange.bind(this));
-        this.#wrapper.removeEventListener("panzoomend", this.#onPanzoomEnd.bind(this));
-        this.#wrapper.parentElement.removeEventListener("keyup", this.#onKeyUp.bind(this));
-        this.#wrapper.parentElement.removeEventListener("focus", this.#enableMouseWheelZoom.bind(this));
-        this.#wrapper.parentElement.removeEventListener("blur", this.#disableMouseWheelZoom.bind(this));
-        this.#wrapper.parentElement.removeEventListener("contextmenu", this.#onContextMenu);
+        this.#wrapper.removeEventListener("panzoomstart", this.#handlers.panzoomStart);
+        this.#wrapper.removeEventListener("panzoomchange", this.#handlers.panzoomChange);
+        this.#wrapper.removeEventListener("panzoomend", this.#handlers.panzoomEnd);
+        this.#wrapper.parentElement.removeEventListener("keyup", this.#handlers.keyUp);
+        this.#wrapper.parentElement.removeEventListener("focus", this.#handlers.focus);
+        this.#wrapper.parentElement.removeEventListener("blur", this.#handlers.blur);
+        this.#wrapper.parentElement.removeEventListener("contextmenu", this.#handlers.contextMenu);
     }
 
     /**

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

@@ -1,5 +1,6 @@
 import SVGResolver from "./svg-resolver.js";
 import PanzoomController from "./panzoom-controller.js";
+import { PrefViewer2DStyles } from "./styles.js";
 
 /**
  * PrefViewer2D - Custom element for rendering and interacting with 2D SVG content.
@@ -46,7 +47,7 @@ import PanzoomController from "./panzoom-controller.js";
  * Notes on extensibility
  *  - Modeled for easy addition of other input sources or interaction modes (e.g., selection callbacks).
  */
-export class PrefViewer2D extends HTMLElement {
+export default class PrefViewer2D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -68,6 +69,10 @@ export class PrefViewer2D extends HTMLElement {
     #wrapper = null; // Panzoom element
     #panzoomController = null; // PanzoomController instance
 
+    #handlers = {
+        onPanzoomChanged: null,
+    };
+
     /**
      * Create a new instance of the 2D viewer component.
      * The constructor only calls super(); heavy initialization happens in connectedCallback.
@@ -114,6 +119,7 @@ export class PrefViewer2D extends HTMLElement {
     /**
      * Called when the element is inserted into the DOM.
      * Sets up DOM nodes, initial visibility and starts loading the SVG if provided.
+     * @public
      * @returns {void}
      */
     connectedCallback() {
@@ -127,6 +133,7 @@ export class PrefViewer2D extends HTMLElement {
     /**
      * Called when the element is removed from the DOM.
      * Disables the PanzoomController to clean up event listeners and resources.
+     * @public
      * @returns {void}
      */
     disconnectedCallback() {
@@ -143,8 +150,9 @@ export class PrefViewer2D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+        
         const style = document.createElement("style");
-        style.textContent = `pref-viewer-2d[visible="true"] { display: block; } pref-viewer-2d[visible="false"] { display: none; } pref-viewer-2d, pref-viewer-2d > div, pref-viewer-2d > div > svg { width: 100%; height: 100%; display: block; position: relative; outline: none; box-sizing: border-box; } pref-viewer-2d > div > svg { padding: 10px; }`;
+        style.textContent = PrefViewer2DStyles;
         this.append(style);
     }
 
@@ -166,7 +174,8 @@ export class PrefViewer2D extends HTMLElement {
      * @returns {void}
      */
     #initializePanzoom() {
-        this.#panzoomController = new PanzoomController(this.#wrapper, undefined, this.#onPanzoomChanged.bind(this));
+        this.#handlers.onPanzoomChanged = this.#onPanzoomChanged.bind(this);
+        this.#panzoomController = new PanzoomController(this.#wrapper, undefined, this.#handlers.onPanzoomChanged);
     }
 
     /**
@@ -221,9 +230,9 @@ export class PrefViewer2D extends HTMLElement {
         const error = "PrefViewer2D: Error in SVG provided for loading. Ensure the SVG is a URL to an SVG file, a string containing a SVG, or a string containing a base64-encoded SVG.";
         const detail = { error: new Error(error) };
         const customEventOptions = {
-            bubbles: true,
-            cancelable: false,
-            composed: true,
+            bubbles: true, // indicates whether the event bubbles up through the DOM tree or not
+            cancelable: true, // indicates whether the event can be canceled, and therefore prevented as if the event never happened
+            composed: false, // indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("drawing-error", customEventOptions));
@@ -238,8 +247,8 @@ export class PrefViewer2D extends HTMLElement {
     #onLoaded() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("drawing-loaded", customEventOptions));
 
@@ -258,8 +267,8 @@ export class PrefViewer2D extends HTMLElement {
     #onLoading() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("drawing-loading", customEventOptions));
 
@@ -285,10 +294,11 @@ export class PrefViewer2D extends HTMLElement {
     #onPanzoomChanged(state) {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: state,
         };
+        customEventOptions.detail.desde2d = "true";
         this.dispatchEvent(new CustomEvent("drawing-zoom-changed", customEventOptions));
     }
 
@@ -348,6 +358,9 @@ export class PrefViewer2D extends HTMLElement {
      * - Resolves to { success: true, error: null } when the SVG was accepted and the component has started rendering.
      */
     async load(svgConfig) {
+        if (!this.#svgResolver) {
+            this.#svgResolver = new SVGResolver(this.#svg);
+        }
         if (!svgConfig || !(await this.#svgResolver.getSVG(svgConfig))) {
             const errorDetail = this.#onError();
             return { success: false, ...errorDetail };

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

@@ -46,7 +46,7 @@ export class ContainerData {
         this.update.pending = true;
         this.update.storage = storage;
         this.update.success = false;
-        this.update.show = show !== undefined ? show : this.update.show;
+        this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
     }
     setPendingCacheData(size = 0, timeStamp = null) {
         this.update.size = size;
@@ -62,7 +62,7 @@ export class ContainerData {
         return this.visible === true;
     }
     get mustBeShown() {
-        return this.show === true;
+        return this.update.show !== null ? this.update.show === true : this.show === true;
     }
 }
 
@@ -152,6 +152,7 @@ export class CameraData {
         if (success) {
             this.update.success = true;
             this.value = this.update.value;
+            this.locked = this.update.locked;
         } else {
             this.update.success = false;
         }

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

@@ -1,5 +1,6 @@
-import { ContainerData, MaterialData, CameraData } from "./pref-viewer-3d-data.js";
+import { CameraData, ContainerData, MaterialData } from "./pref-viewer-3d-data.js";
 import BabylonJSController from "./babylonjs-controller.js";
+import { PrefViewer3DStyles } from "./styles.js";
 
 /**
  * PrefViewer3D - Custom Web Component for interactive 3D visualization and configuration.
@@ -31,9 +32,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.
@@ -51,7 +57,7 @@ import BabylonJSController from "./babylonjs-controller.js";
  *  - Designed for extensibility and integration in product configurators and visualization tools.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  */
-export class PrefViewer3D extends HTMLElement {
+export default class PrefViewer3D extends HTMLElement {
     // State flags
     #isInitialized = false;
     #isLoaded = false;
@@ -124,6 +130,7 @@ export class PrefViewer3D extends HTMLElement {
      * Called when the element is added to the DOM.
      * Creates the DOM structure, sets initial visibility, initializes component data, and sets up the BabylonJSController.
      * Performs heavy initialization tasks required for the 3D viewer.
+     * @public
      * @returns {void}
      */
     connectedCallback() {
@@ -131,11 +138,13 @@ export class PrefViewer3D extends HTMLElement {
         this.#setInitialVisibility();
         this.#initializeData();
         this.#initializeBabylonJS();
+        this.#isInitialized = true;
     }
 
     /**
      * Called when the element is removed from the DOM.
      * Disables the BabylonJSController to clean up resources and event listeners associated with the 3D viewer.
+     * @public
      * @returns {void}
      */
     disconnectedCallback() {
@@ -152,10 +161,12 @@ export class PrefViewer3D extends HTMLElement {
     #createDOMElements() {
         this.#wrapper = document.createElement("div");
         this.append(this.#wrapper);
+
         this.#canvas = document.createElement("canvas");
         this.#wrapper.appendChild(this.#canvas);
+
         const style = document.createElement("style");
-        style.textContent = `pref-viewer-3d[visible="true"] { display: block; } pref-viewer-3d[visible="false"] { display: none; } pref-viewer-3d, pref-viewer-3d > div, pref-viewer-3d > div > canvas { width: 100%; height: 100%; display: block; position: relative; outline: none; box-sizing: border-box; }`;
+        style.textContent = PrefViewer3DStyles;
         this.append(style);
     }
 
@@ -303,9 +314,9 @@ export class PrefViewer3D extends HTMLElement {
      */
     #onLoading() {
         const customEventOptions = {
-            bubbles: true,
-            cancelable: false,
-            composed: true,
+            bubbles: true, // indicates whether the event bubbles up through the DOM tree or not
+            cancelable: true, // indicates whether the event can be canceled, and therefore prevented as if the event never happened
+            composed: false, // indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM
         };
         this.dispatchEvent(new CustomEvent("scene-loading", customEventOptions));
 
@@ -351,8 +362,8 @@ export class PrefViewer3D extends HTMLElement {
 
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("scene-loaded", customEventOptions));
@@ -375,8 +386,8 @@ export class PrefViewer3D extends HTMLElement {
     #onSettingOptions() {
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
         };
         this.dispatchEvent(new CustomEvent("scene-setting-options", customEventOptions));
 
@@ -413,11 +424,11 @@ export class PrefViewer3D extends HTMLElement {
             tried: toSetDetail,
             success: settedDetail,
         };
-        
+
         const customEventOptions = {
             bubbles: true,
-            cancelable: false,
-            composed: true,
+            cancelable: true,
+            composed: false,
             detail: detail,
         };
         this.dispatchEvent(new CustomEvent("scene-set-options", customEventOptions));
@@ -455,6 +466,7 @@ export class PrefViewer3D extends HTMLElement {
     show() {
         this.#isVisible = true;
         this.setAttribute("visible", "true");
+        this.#canvas.focus();
     }
 
     /**
@@ -567,7 +579,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 +603,35 @@ export class PrefViewer3D extends HTMLElement {
         if (!this.#babylonJSController) {
             return;
         }
-        this.#babylonJSController.downloadModelUSDZ();
+        this.#babylonJSController.downloadUSDZ(1);
     }
 
     /**
-     * Downloads both the 3D model and scene as a USDZ file.
+     * 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 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 +639,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);
     }
 
     /**
@@ -632,4 +704,4 @@ export class PrefViewer3D extends HTMLElement {
     get isVisible() {
         return this.#isVisible;
     }
-}
+}