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

package/src/index.js

@@ -1,225 +1,144 @@
+import { PrefViewer2D } from "./pref-viewer-2d.js";
+import { PrefViewer3D } from "./pref-viewer-3d.js";
+import {PrefViewerTask} from "./pref-viewer-task.js";
+
 /**
- * =============================================================================
- * PrefViewer Web Component (JavaScript)
- * =============================================================================
+ * PrefViewer - Custom Web Component for rendering and managing 2D and 3D product visualizations.
+ *
+ * Overview:
+ *  - Encapsulates both 2D and 3D viewers using Babylon.js, supporting glTF/GLB models and environments.
+ *  - Handles loading from remote URLs, Base64 data URIs, and IndexedDB sources.
+ *  - Provides a unified API for loading models, scenes, drawings, materials, and configuration via attributes or methods.
+ *  - Manages an internal task queue for sequential processing of viewer operations.
+ *  - Emits custom events for loading, errors, and state changes to facilitate integration.
  *
- * Overview
- * --------
- * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Renders the glTF or GLB model of the product ('model') and merges it with the glTF or GLB model of environment ('scene') into a <canvas> inside its shadow DOM.
- *   • Supports loading via remote URL (storage.url), Base64 data URI (storage.url), or from a Base64 stored entry in IndexedDB (storage.db, storage.table, storage.id).
- *   • The data for loading both models is provided via the 'config' (both model and scene), 'model' and 'scene' attributes. The 'config' attribute can carry more initial configurations than just the models.
- *   • Exposes methods for making changes to the scene that replicate what the attribute observables do: 'loadConfig', 'loadModel', 'loadScene'.
- *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
- *   • Emits 'model-loaded' and 'model-error' events for integration.
+ * Usage:
+ *  - Use as a custom HTML element: <pref-viewer ...>
+ *  - Configure via attributes (e.g., config, model, scene, materials, drawing, options).
+ *  - Control visibility, downloads, and viewer mode via public methods.
  *
- * Usage
- * -----
- * Load model from IndexedDB:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "db": "PrefConfiguratorDB", "table": "gltfModels", "id": "1234-1234-1234-1234-1234" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Public Methods:
+ *  - loadConfig(config), loadModel(model), loadScene(scene), loadMaterials(materials), loadDrawing(drawing)
+ *  - setOptions(options)
+ *  - setMode(mode): Sets the viewer mode to "2d" or "3d" and updates component visibility.
+ *  - showModel(), hideModel(), showScene(), hideScene()
+ *  - downloadModelGLB(), downloadModelUSDZ(), downloadModelAndSceneGLB(), downloadModelAndSceneUSDZ()
  *
- * Load scene a URL:
- * ```html
- * <pref-viewer
- *     scene='{ "storage": { "url" : "https://example.com/scenes/scene1.gltf" }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Public Properties:
+ *  - initialized: Indicates if the viewer is initialized.
+ *  - loaded: Indicates if the viewer has finished loading.
+ *  - loading: Indicates if the viewer is currently loading.
  *
- * Load model from Base64 data:
- * ```html
- * <pref-viewer
- *     model='{ "storage": { "url" : "data:model/gltf+json;base64,UEsDB..." }, "visible": true" }'
- *     style="width:800px; height:600px;">
- * </pref-viewer>
- * ```
+ * Events:
+ *  - "scene-loading": Dispatched when a loading operation starts.
+ *  - "scene-loaded": Dispatched when a loading operation completes.
+ *  - "scene-error": Dispatched when initialization fails.
+ *
+ * Notes:
+ *  - Automatically creates and manages 2D and 3D viewer components in its shadow DOM.
+ *  - Processes tasks sequentially to ensure consistent state.
+ *  - Designed for extensibility and integration in product configurators and visualization tools.
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName, HDRCubeTexture, IblShadowsRenderPipeline } from "@babylonjs/core";
-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 { initDb, loadModel } from "./gltf-storage.js";
-import { FileStorage } from "./file-storage.js";
-
-class PrefViewerTask {
-    static Types = Object.freeze({
-        Config: "config",
-        Environment: "environment",
-        Materials: "materials",
-        Model: "model",
-        Options: "options",
-    });
-
-    /**
-     * value: any payload for the task
-     * type: must match one of PrefViewerTask.Types values (case-insensitive)
-     */
-    constructor(value, type) {
-        this.value = value;
-
-        const t = typeof type === "string" ? type.toLowerCase() : String(type).toLowerCase();
-        const allowed = Object.values(PrefViewerTask.Types);
-        if (!allowed.includes(t)) {
-            throw new TypeError(`PrefViewerTask: invalid type "${type}". Allowed types: ${allowed.join(", ")}`);
-        }
-        this.type = t;
-
-        Object.freeze(this);
-    }
-}
-
 class PrefViewer extends HTMLElement {
-    initialized = false;
-    loaded = false;
-    loading = false;
-    #taskQueue = [];
-    #fileStorage = new FileStorage("PrefViewer", "Files");
-
-    #data = {
-        containers: {
-            model: {
-                name: "model",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            environment: {
-                name: "environment",
-                assetContainer: null,
-                show: true,
-                storage: null,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                name: "materials",
-                assetContainer: null,
-                storage: null,
-                show: true,
-                visible: false,
-                size: null,
-                timeStamp: null,
-                changed: { pending: false, success: false },
-            },
-        },
-        options: {
-            camera: {
-                value: null,
-                locked: true,
-                changed: { pending: false, success: false },
-            },
-            materials: {
-                innerWall: {
-                    value: null,
-                    prefix: "innerWall",
-                    changed: { pending: false, success: false },
-                },
-                outerWall: {
-                    value: null,
-                    prefix: "outerWall",
-                    changed: { pending: false, success: false },
-                },
-                innerFloor: {
-                    value: null,
-                    prefix: "innerFloor",
-                    changed: { pending: false, success: false },
-                },
-                outerFloor: {
-                    value: null,
-                    prefix: "outerFloor",
-                    changed: { pending: false, success: false },
-                },
-            },
-        },
-    };
+    #isInitialized = false;
+    #isLoaded = false;
+    #isLoading = false;
+    #mode = "3d";
 
-    // DOM elements
-    #wrapper = null;
-    #canvas = null;
+    #taskQueue = [];
 
-    // Babylon.js core objects
-    #engine = null;
-    #scene = null;
-    #camera = null;
-    #hemiLight = null;
-    #dirLight = null;
-    #cameraLight = null;
-    #shadowGen = null;
-    #XRExperience = null;
+    #component2D = null;
+    #component3D = null;
 
+    /**
+     * Creates a new PrefViewer instance and attaches a shadow DOM.
+     * Initializes internal state and component references.
+     * @public
+     */
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
-        this.#createCanvas();
-        this.#wrapCanvas();
-        // Point to whichever version you packaged or want to use:
-        const DRACO_BASE = "https://www.gstatic.com/draco/versioned/decoders/1.5.7";
-        DracoCompression.Configuration.decoder = {
-            // loader for the “wrapper” that pulls in the real WASM
-            wasmUrl: `${DRACO_BASE}/draco_wasm_wrapper_gltf.js`,
-            // the raw WebAssembly binary
-            wasmBinaryUrl: `${DRACO_BASE}/draco_decoder_gltf.wasm`,
-            // JS fallback if WASM isn’t available
-            fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
-        };
     }
 
+    /**
+     * Returns the list of attributes to observe for changes.
+     * @public
+     * @returns {string[]} Array of attribute names to observe.
+     */
     static get observedAttributes() {
-        return ["config", "model", "scene", "show-model", "show-scene"];
+        return ["config", "drawing", "materials", "mode", "model", "scene", "options", "show-model", "show-scene"];
     }
 
+    /**
+     * Observes changes to specific attributes and triggers corresponding actions.
+     * Loads configuration, drawing, model, scene, materials, or options when their attributes change.
+     * Toggles model or scene visibility when "show-model" or "show-scene" attributes change.
+     * @public
+     * @param {string} name - The name of the changed attribute.
+     * @param {*} _old - The previous value of the attribute (unused).
+     * @param {*} value - The new value of the attribute.
+     * @returns {void}
+     */
     attributeChangedCallback(name, _old, value) {
-        let data = null;
         switch (name) {
             case "config":
                 this.loadConfig(value);
                 break;
+            case "drawing":
+                this.loadDrawing(value);
+                break;
+            case "materials":
+                this.loadMaterials(value);
+                break;
+            case "mode":
+                if (_old === value || value.toLowerCase() === this.#mode) {
+                    return;
+                }
+                this.setMode(value.toLowerCase());
+                break;
             case "model":
                 this.loadModel(value);
                 break;
             case "scene":
                 this.loadScene(value);
                 break;
-            case "materials":
-                this.loadMaterials(value);
-                break;
             case "options":
                 this.setOptions(value);
                 break;
             case "show-model":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showModel() : this.hideModel();
-                } else {
-                    this.#data.containers.model.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showModel = value.toLowerCase() === "true";
+                showModel ? this.showModel() : this.hideModel();
                 break;
             case "show-scene":
-                data = value.toLowerCase?.() === "true";
-                if (this.initialized) {
-                    data ? this.showScene() : this.hideScene();
-                } else {
-                    this.#data.containers.environment.show = data;
+                if (_old === value) {
+                    return;
                 }
+                const showScene = value.toLowerCase() === "true";
+                showScene ? this.showScene() : this.hideScene();
                 break;
         }
     }
 
+    /**
+     * Called when the element is inserted into the DOM.
+     * Initializes the 3D and 2D viewer components and starts processing tasks.
+     * If the "config" attribute is missing, dispatches a "scene-error" event and stops initialization.
+     * @public
+     * @returns {void|boolean} Returns false if initialization fails; otherwise void.
+     */
     connectedCallback() {
+        this.#createComponent3D();
+        this.#createComponent2D();
+
+        if (!this.hasAttribute("mode")) {
+            this.setMode();
+        }
+
         if (!this.hasAttribute("config")) {
-            const error = 'PrefViewer: provide "models" as array of model and environment';
+            const error = 'PrefViewer: provide "config" as a configuration object to initialize the viewer.';
             console.error(error);
             this.dispatchEvent(
                 new CustomEvent("scene-error", {
@@ -232,45 +151,98 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        this.#initializeBabylon();
-        this.initialized = true;
+        this.#isInitialized = true;
         this.#processNextTask();
     }
 
-    disconnectedCallback() {
-        this.#disposeEngine();
-        this.#canvasResizeObserver.disconnect();
+    /**
+     * Creates and appends the 2D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent2D() {
+        this.#component2D = document.createElement("pref-viewer-2d");
+        this.#component2D.setAttribute("visible", "false");
+        this.shadowRoot.appendChild(this.#component2D);
     }
 
-    // Web Component
-    #createCanvas() {
-        this.#canvas = document.createElement("canvas");
-        Object.assign(this.#canvas.style, {
-            width: "100%",
-            height: "100%",
-            display: "block",
-            outline: "none",
-        });
+    /**
+     * Creates and appends the 3D viewer component to the shadow DOM.
+     * Sets the "visible" attribute to true by default.
+     * @private
+     * @returns {void}
+     */
+    #createComponent3D() {
+        this.#component3D = document.createElement("pref-viewer-3d");
+        this.#component3D.setAttribute("visible", "false");
+        this.shadowRoot.appendChild(this.#component3D);
     }
 
-    #wrapCanvas() {
-        this.#wrapper = document.createElement("div");
-        Object.assign(this.#wrapper.style, {
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        });
-        this.#wrapper.appendChild(this.#canvas);
-        this.shadowRoot.append(this.#wrapper);
+    /**
+     * Adds a new task to the internal queue for processing.
+     * If the viewer is initialized and not currently loading, immediately processes the next task.
+     * @private
+     * @param {*} value - The payload or data for the task.
+     * @param {string} type - The type of task (see PrefViewerTask.Types).
+     * @returns {void}
+     */
+    #addTaskToQueue(value, type) {
+        this.#taskQueue.push(new PrefViewerTask(value, type));
+        if (this.#isInitialized && !this.#isLoading) {
+            this.#processNextTask();
+        }
     }
 
-    #setStatusLoading() {
-        this.loaded = false;
-        this.loading = true;
-        if (this.hasAttribute("loaded")) {
-            this.removeAttribute("loaded");
+    /**
+     * Processes the next task in the queue, if any.
+     * Dispatches the task to the appropriate handler based on its type.
+     * @private
+     * @returns {boolean|void} Returns false if the queue is empty; otherwise void.
+     */
+    #processNextTask() {
+        if (!this.#taskQueue.length) {
+            return false;
         }
-        this.setAttribute("loading", "");
+        const task = this.#taskQueue[0];
+        this.#taskQueue.shift();
+        switch (task.type) {
+            case PrefViewerTask.Types.Config:
+                this.#processConfig(task.value);
+                break;
+            case PrefViewerTask.Types.Drawing:
+                this.#processDrawing(task.value);
+                break;
+            case PrefViewerTask.Types.Environment:
+                this.#processEnvironment(task.value);
+                break;
+            case PrefViewerTask.Types.Materials:
+                this.#processMaterials(task.value);
+                break;
+            case PrefViewerTask.Types.Model:
+                this.#processModel(task.value);
+                break;
+            case PrefViewerTask.Types.Options:
+                this.#processOptions(task.value);
+                break;
+            case PrefViewerTask.Types.Visibility:
+                this.#processVisibility(task.value);
+                break;
+        }
+    }
+
+    /**
+     * Handles the start of a 3D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "scene-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on3DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
+
+        this.removeAttribute("loaded-3d");
+        this.setAttribute("loading-3d", "");
         this.dispatchEvent(
             new CustomEvent("scene-loading", {
                 bubbles: true,
@@ -278,35 +250,16 @@ class PrefViewer extends HTMLElement {
                 composed: true,
             })
         );
-        this.#engine.stopRenderLoop(this.#renderLoop);
     }
 
-    async #setStatusLoaded() {
-        const toLoadDetail = {
-            container_model: !!this.#data.containers.model.changed.pending,
-            container_environment: !!this.#data.containers.environment.changed.pending,
-            container_materials: !!this.#data.containers.materials.changed.pending,
-            options_camera: !!this.#data.options.camera.changed.pending,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.pending,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.pending,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.pending,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.pending,
-        };
-        const loadedDetail = {
-            container_model: !!this.#data.containers.model.changed.success,
-            container_environment: !!this.#data.containers.environment.changed.success,
-            container_materials: !!this.#data.containers.materials.changed.success,
-            options_camera: !!this.#data.options.camera.changed.success,
-            options_innerWallMaterial: !!this.#data.options.materials.innerWall.changed.success,
-            options_outerWallMaterial: !!this.#data.options.materials.outerWall.changed.success,
-            options_innerFloorMaterial: !!this.#data.options.materials.innerFloor.changed.success,
-            options_outerFloorMaterial: !!this.#data.options.materials.outerFloor.changed.success,
-        };
-        const detail = {
-            tried: toLoadDetail,
-            success: loadedDetail,
-        };
-
+    /**
+     * Handles the completion of a 3D loading operation.
+     * Updates loading state, sets attributes, dispatches a "scene-loaded" event, and processes the next task.
+     * @private
+     * @param {object} [detail={}] - Optional details to include in the event.
+     * @returns {void}
+     */
+    #on3DLoaded(detail = {}) {
         this.dispatchEvent(
             new CustomEvent("scene-loaded", {
                 bubbles: true,
@@ -316,857 +269,224 @@ class PrefViewer extends HTMLElement {
             })
         );
 
-        await this.#scene.whenReadyAsync();
-        this.#engine.runRenderLoop(this.#renderLoop);
-
-        this.#resetChangedFlags();
-
-        if (this.hasAttribute("loading")) {
-            this.removeAttribute("loading");
-        }
-        this.setAttribute("loaded", "");
-
-        this.loaded = true;
-        this.loading = false;
-
-        this.#processNextTask();
-    }
-
-    // Data
-    #checkCameraChanged(options) {
-        if (!options || !options.camera) {
-            return false;
-        }
-        const prev = this.#data.options.camera.value;
-        const changed = options.camera !== prev;
-
-        this.#data.options.camera.changed.pending = changed;
-        this.#data.options.camera.changed.success = false;
-        if (changed) {
-            this.#data.options.camera.changed.value = prev;
-            this.#data.options.camera.changed.locked = this.#data.options.camera.locked;
-            this.#data.options.camera.value = options.camera;
-        }
-        return changed;
-    }
-
-    #checkMaterialsChanged(options) {
-        if (!options) {
-            return false;
-        }
-        let someChanged = false;
-        Object.keys(this.#data.options.materials).forEach((material) => {
-            const key = `${material}Material`;
-            const state = this.#data.options.materials[material];
-            const prev = state.value;
-            const incoming = options[key];
-            const changed = !!incoming && incoming !== prev;
-
-            state.changed.pending = changed;
-            state.changed.success = false;
-            if (changed) {
-                state.changed.value = prev;
-                state.value = incoming;
-            }
-            someChanged = someChanged || changed;
-        });
-        return someChanged;
-    }
-
-    #storeChangedFlagsForContainer(container, success) {
-        if (success) {
-            container.timeStamp = container.changed.timeStamp;
-            container.size = container.changed.size;
-            container.changed.success = true;
-        } else {
-            container.changed.success = false;
-        }
-    }
-
-    #resetChangedFlags() {
-        const reset = (node) => {
-            node.changed = { pending: false, success: false };
-        };
-        Object.values(this.#data.containers).forEach(reset);
-        Object.values(this.#data.options.materials).forEach(reset);
-        reset(this.#data.options.camera);
-    }
-
-    // Babylon.js
-    async #initializeBabylon() {
-        this.#engine = new Engine(this.#canvas, true, { alpha: true });
-        this.#engine.disableUniformBuffers = true;
-        this.#scene = new Scene(this.#engine);
-        this.#scene.clearColor = new Color4(1, 1, 1, 1);
-        this.#createCamera();
-        this.#createLights();
-        this.#setupInteraction();
-        await this.#createXRExperience();
-        this.#engine.runRenderLoop(this.#renderLoop);
-        this.#canvasResizeObserver.observe(this.#canvas);
-    }
-
-    // If this function is defined as '#renderLoop() {}' it is not executed in 'this.#engine.runRenderLoop(this.#renderLoop)'
-    #renderLoop = () => {
-        this.#scene && this.#scene.render();
-    };
-
-    #addStylesToARButton() {
-        const css = '.babylonVRicon { color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222048%22%20height%3D%221152%22%20viewBox%3D%220%200%202048%201152%22%20version%3D%221.1%22%3E%3Cpath%20transform%3D%22rotate%28180%201024%2C576.0000000000001%29%22%20d%3D%22m1109%2C896q17%2C0%2030%2C-12t13%2C-30t-12.5%2C-30.5t-30.5%2C-12.5l-170%2C0q-18%2C0%20-30.5%2C12.5t-12.5%2C30.5t13%2C30t30%2C12l170%2C0zm-85%2C256q59%2C0%20132.5%2C-1.5t154.5%2C-5.5t164.5%2C-11.5t163%2C-20t150%2C-30t124.5%2C-41.5q23%2C-11%2042%2C-24t38%2C-30q27%2C-25%2041%2C-61.5t14%2C-72.5l0%2C-257q0%2C-123%20-47%2C-232t-128%2C-190t-190%2C-128t-232%2C-47l-81%2C0q-37%2C0%20-68.5%2C14t-60.5%2C34.5t-55.5%2C45t-53%2C45t-53%2C34.5t-55.5%2C14t-55.5%2C-14t-53%2C-34.5t-53%2C-45t-55.5%2C-45t-60.5%2C-34.5t-68.5%2C-14l-81%2C0q-123%2C0%20-232%2C47t-190%2C128t-128%2C190t-47%2C232l0%2C257q0%2C68%2038%2C115t97%2C73q54%2C24%20124.5%2C41.5t150%2C30t163%2C20t164.5%2C11.5t154.5%2C5.5t132.5%2C1.5zm939%2C-298q0%2C39%20-24.5%2C67t-58.5%2C42q-54%2C23%20-122%2C39.5t-143.5%2C28t-155.5%2C19t-157%2C11t-148.5%2C5t-129.5%2C1.5q-59%2C0%20-130%2C-1.5t-148%2C-5t-157%2C-11t-155.5%2C-19t-143.5%2C-28t-122%2C-39.5q-34%2C-14%20-58.5%2C-42t-24.5%2C-67l0%2C-257q0%2C-106%2040.5%2C-199t110%2C-162.5t162.5%2C-109.5t199%2C-40l81%2C0q27%2C0%2052%2C14t50%2C34.5t51%2C44.5t55.5%2C44.5t63.5%2C34.5t74%2C14t74%2C-14t63.5%2C-34.5t55.5%2C-44.5t51%2C-44.5t50%2C-34.5t52%2C-14l14%2C0q37%2C0%2070%2C0.5t64.5%2C4.5t63.5%2C12t68%2C23q71%2C30%20128.5%2C78.5t98.5%2C110t63.5%2C133.5t22.5%2C149l0%2C257z%22%20fill%3D%22white%22%20/%3E%3C/svg%3E%0A); background-size: 80%; background-repeat:no-repeat; background-position: center; border: none; outline: none; transition: transform 0.125s ease-out } .babylonVRicon:hover { transform: scale(1.05) } .babylonVRicon:active {background-color: rgba(51,51,51,1) } .babylonVRicon:focus {background-color: rgba(51,51,51,1) }.babylonVRicon.vrdisplaypresenting { background-image: none;} .vrdisplaypresenting::after { content: "EXIT"} .xr-error::after { content: "ERROR"}';
-        const style = document.createElement("style");
-        style.appendChild(document.createTextNode(css));
-        this.#wrapper.appendChild(style);
-    }
-
-    async #createXRExperience() {
-        if (this.#XRExperience) {
-            return true;
-        }
-
-        const sessionMode = "immersive-ar";
-        const sessionSupported = await WebXRSessionManager.IsSessionSupportedAsync(sessionMode);
-        if (!sessionSupported) {
-            console.info("PrefViewer: WebXR in mode AR is not supported");
-            return false;
-        }
-
-        try {
-            const ground = MeshBuilder.CreateGround("ground", { width: 1000, height: 1000 }, this.#scene);
-            ground.isVisible = false;
-
-            const options = {
-                floorMeshes: [ground],
-                uiOptions: {
-                    sessionMode: sessionMode,
-                    renderTarget: "xrLayer",
-                    referenceSpaceType: "local",
-                },
-                optionalFeatures: true,
-            };
-
-            this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
-
-            const featuresManager = this.#XRExperience.baseExperience.featuresManager;
-            featuresManager.enableFeature(WebXRFeatureName.TELEPORTATION, "stable", {
-                xrInput: this.#XRExperience.input,
-                floorMeshes: [ground],
-                timeToTeleport: 1500,
-            });
-
-            this.#XRExperience.baseExperience.sessionManager.onXRReady.add(() => {
-                // Set the initial position of xrCamera: use nonVRCamera, which contains a copy of the original this.#scene.activeCamera before entering XR
-                this.#XRExperience.baseExperience.camera.setTransformationFromNonVRCamera(this.#XRExperience.baseExperience._nonVRCamera);
-                this.#XRExperience.baseExperience.camera.setTarget(Vector3.Zero());
-                this.#XRExperience.baseExperience.onInitialXRPoseSetObservable.notifyObservers(this.#XRExperience.baseExperience.camera);
-            });
-
-            this.#addStylesToARButton();
-        } catch (error) {
-            console.warn("PrefViewer: failed to create WebXR experience", error);
-            this.#XRExperience = null;
-        }
-    }
+        this.removeAttribute("loading-3d");
+        this.setAttribute("loaded-3d", "");
 
-    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
-
-    #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", (3 * Math.PI) / 2, Math.PI * 0.47, 10, Vector3.Zero(), this.#scene);
-        this.#camera.upperBetaLimit = Math.PI * 0.48;
-        this.#camera.lowerBetaLimit = Math.PI * 0.25;
-        this.#camera.lowerRadiusLimit = 5;
-        this.#camera.upperRadiusLimit = 20;
-        this.#camera.metadata = { locked: false };
-        this.#camera.attachControl(this.#canvas, true);
-        this.#scene.activeCamera = this.#camera;
+        this.#isLoaded = true;
+        this.#isLoading = false;
     }
 
-    #createLights() {
-        this.#initEnvironmentTexture();
-
-        if (this.#scene.environmentTexture) {
-            return true;
-        }
-
-        // 1) Stronger ambient fill
-        this.#hemiLight = new HemisphericLight("hemiLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#hemiLight.intensity = 0.6;
-
-        // 2) Directional light from the front-right, angled slightly down
-        this.#dirLight = new DirectionalLight("dirLight", new Vector3(-10, 10, -10), this.#scene);
-        this.#dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
-        this.#dirLight.intensity = 0.6;
-
-        // // 3) Soft shadows
-        this.#shadowGen = new ShadowGenerator(1024, this.#dirLight);
-        this.#shadowGen.useBlurExponentialShadowMap = true;
-        this.#shadowGen.blurKernel = 16;
-        this.#shadowGen.darkness = 0.5;
-
-        // 4) Camera‐attached headlight
-        this.#cameraLight = new PointLight("pl", this.#camera.position, this.#scene);
-        this.#cameraLight.parent = this.#camera;
-        this.#cameraLight.intensity = 0.3;
-    }
+    /**
+     * Handles the start of a 2D loading operation.
+     * Updates loading state, sets attributes, and dispatches a "drawing-loading" event.
+     * @private
+     * @returns {void}
+     */
+    #on2DLoading() {
+        this.#isLoaded = false;
+        this.#isLoading = true;
 
-    #initEnvironmentTexture() {
-        return false;
-        if (this.#scene.environmentTexture) {
-            return true;
-        }
-        const hdrTextureURI = "../src/environments/noon_grass.hdr";
-        const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
-        hdrTexture.gammaSpace = true;
-        hdrTexture._noMipmap = false;
-        hdrTexture.level = 2.0;
-        this.#scene.environmentTexture = hdrTexture;
+        this.removeAttribute("loaded-2d");
+        this.setAttribute("loading-2d", "");
+        this.dispatchEvent(
+            new CustomEvent("drawing-loading", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            })
+        );
     }
 
-    #initIBLShadows() {
-        if (!this.#scene.environmentTexture) {
-            return false;
-        }
-
-        let createIBLShadowPipeline = function (scene) {
-            const pipeline = new IblShadowsRenderPipeline(
-                "iblShadowsPipeline",
-                scene,
-                {
-                    resolutionExp: 7,
-                    sampleDirections: 2,
-                    ssShadowsEnabled: true,
-                    shadowRemanence: 0.8,
-                    triPlanarVoxelization: true,
-                    shadowOpacity: 0.8,
-                },
-                [scene.activeCamera]
-            );
-            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;
-            return pipeline;
-        };
-
-        let iblShadowsPipeline = createIBLShadowPipeline(this.#scene);
+    /**
+     * Handles the completion of a 2D loading operation.
+     * Updates loading state, sets attributes, dispatches a "drawing-loaded" event, and processes the next task.
+     * @private
+     * @returns {void}
+     */
+    #on2DLoaded() {
+        this.dispatchEvent(
+            new CustomEvent("drawing-loaded", {
+                bubbles: true,
+                cancelable: false,
+                composed: true,
+            })
+        );
 
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__") || mesh.name === "hdri") {
-                return false;
-            }
-            iblShadowsPipeline.addShadowCastingMesh(mesh);
-            iblShadowsPipeline.updateSceneBounds();
-        });
+        this.removeAttribute("loading-2d");
+        this.setAttribute("loaded-2d", "");
 
-        this.#scene.materials.forEach((material) => {
-            iblShadowsPipeline.addShadowReceivingMaterial(material);
-        });
+        this.#isLoaded = true;
+        this.#isLoading = false;
     }
 
-    #initShadows() {
-        if (!this.#scene.environmentTexture) {
-            this.#initIBLShadows();
-            return true;
+    /**
+     * Processes a configuration object by loading it into the 3D component.
+     * Dispatches loading events and processes the next task when finished.
+     * @private
+     * @param {object} config - The configuration object to process.
+     * @returns {void}
+     */
+    #processConfig(config) {
+        if (!this.#component3D) {
+            return;
         }
 
-        this.#scene.meshes.forEach((mesh) => {
-            if (mesh.id.startsWith("__root__")) {
-                return false;
-            }
-            mesh.receiveShadows = true;
-            if (!mesh.name === "hdri") {
-                this.#shadowGen.addShadowCaster(mesh, true);
-            }
+        this.#on3DLoading();
+        this.#component3D.load(config).then((detail) => {
+            this.#on3DLoaded(detail);
+            this.#processNextTask();
         });
     }
 
-    #setMaxSimultaneousLights() {
-        let lightsNumber = 1; // Como mínimo una luz correspondiente a la textura de environmentTexture
-        this.#scene.lights.forEach((light) => {
-            if (light.isEnabled()) {
-                ++lightsNumber;
-            }
-        });
-        if (this.#scene.materials) {
-            this.#scene.materials.forEach((material) => (material.maxSimultaneousLights = lightsNumber));
+    /**
+     * Processes a drawing object by loading it into the 2D component.
+     * Processes the next task when finished.
+     * @private
+     * @param {object} drawing - The drawing object to process.
+     * @returns {void}
+     */
+    #processDrawing(drawing) {
+        if (!this.#component2D) {
+            return;
         }
-    }
 
-    #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();
-        });
-    }
-
-    #disposeEngine() {
-        if (!this.#engine) return;
-        this.#engine.dispose();
-        this.#engine = this.#scene = this.#camera = null;
-        this.#hemiLight = this.#dirLight = this.#cameraLight = null;
-        this.#shadowGen = null;
-    }
-
-    // Utility methods for loading gltf/glb
-    async #getServerFileDataHeader(uri) {
-        return new Promise((resolve) => {
-            const xhr = new XMLHttpRequest();
-            xhr.open("HEAD", uri, true);
-            xhr.responseType = "blob";
-            xhr.onload = () => {
-                if (xhr.status === 200) {
-                    const size = parseInt(xhr.getResponseHeader("Content-Length"));
-                    const timeStamp = new Date(xhr.getResponseHeader("Last-Modified")).toISOString();
-                    resolve([size, timeStamp]);
-                } else {
-                    resolve([0, null]);
-                }
-            };
-            xhr.onerror = () => {
-                resolve([0, null]);
-            };
-            xhr.send();
-        });
-    }
-
-    #transformUrl(url) {
-        return new Promise((resolve) => {
-            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
+        this.#on2DLoading();
+        this.#component2D.load(drawing).then(() => {
+            this.#on2DLoaded();
+            this.#processNextTask();
         });
     }
 
-    #decodeBase64(base64) {
-        const [, payload] = base64.split(",");
-        const raw = payload || base64;
-        let decoded = "";
-        let blob = null;
-        let extension = null;
-        let size = raw.length;
-        try {
-            decoded = atob(raw);
-        } catch {
-            return { blob, extension, size };
-        }
-        let isJson = false;
-        try {
-            JSON.parse(decoded);
-            isJson = true;
-        } catch { }
-        extension = isJson ? ".gltf" : ".glb";
-        const type = isJson ? "model/gltf+json" : "model/gltf-binary";
-        const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
-        blob = new Blob([array], { type });
-        return { blob, extension, size };
-    }
-
-    async #initStorage(db, table) {
-        if (window.gltfDB && window.gltfDB.name === db && window.gltfDB.objectStoreNames.contains(table)) {
-            return true;
-        }
-        await initDb(db, table);
-    }
-
-    // Methods for managing Asset Containers
-    #setVisibilityOfWallAndFloorInModel(show) {
-        if (!this.#data.containers.model.assetContainer || !this.#data.containers.model.visible) {
-            return false;
-        }
-        show = show !== undefined ? show : this.#data.containers.environment.visible;
-        const prefixes = Object.values(this.#data.options.materials).map((material) => material.prefix);
-        this.#data.containers.model.assetContainer.meshes.filter((meshToFilter) => prefixes.some((prefix) => meshToFilter.name.startsWith(prefix))).forEach((mesh) => mesh.setEnabled(show));
-    }
-
-    #setOptionsMaterial(optionMaterial) {
-        if (!optionMaterial || !optionMaterial.prefix || !optionMaterial.value) {
-            return false;
-        }
-
-        const material = this.#data.containers.materials.assetContainer?.materials.find((mat) => mat.name === optionMaterial.value) || null;
-        if (!material) {
-            return false;
-        }
-
-        const containers = [];
-        if (this.#data.containers.model.assetContainer && (this.#data.containers.model.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.model.assetContainer);
-        }
-        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.changed.pending || this.#data.containers.materials.changed.pending || optionMaterial.changed.pending)) {
-            containers.push(this.#data.containers.environment.assetContainer);
-        }
-        if (containers.length === 0) {
-            return false;
-        }
-
-        let someSetted = false;
-        containers.forEach((container) =>
-            container.meshes
-                .filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix))
-                .forEach((mesh) => {
-                    mesh.material = material;
-                    someSetted = true;
-                })
-        );
-
-        if (someSetted) {
-            optionMaterial.changed.success = true;
-        } else if (optionMaterial.changed.pending) {
-            optionMaterial.value = optionMaterial.changed.value;
-            optionMaterial.changed.success = false;
-        }
-
-        return someSetted;
-    }
-
-    #setOptionsMaterials() {
-        let someSetted = false;
-        Object.values(this.#data.options.materials).forEach((material) => {
-            let settedMaterial = this.#setOptionsMaterial(material);
-            someSetted = someSetted || settedMaterial;
-        });
-        return someSetted;
+    /**
+     * Processes an environment (scene) object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} environment - The environment/scene object to process.
+     * @returns {void}
+     */
+    #processEnvironment(environment) {
+        const config = {};
+        config.scene = environment;
+        this.#processConfig(config);
     }
 
-    #setOptionsCamera() {
-        if (!this.#data.options.camera.value && !this.#data.options.camera.changed.pending && !this.#data.containers.model.changed.pending && !this.#data.containers.environment.changed.pending) {
-            return false;
-        }
-
-        let camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.value) || null;
-        if (!camera) {
-            if (this.#data.options.camera.changed.value && this.#data.options.camera.changed.value !== this.#data.options.camera.value) {
-                camera = this.#data.containers.model.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || this.#data.containers.environment.assetContainer?.cameras.find((thisCamera) => thisCamera.name === this.#data.options.camera.changed.value) || null;
-            }
-            if (camera) {
-                camera.metadata = { locked: this.#data.options.camera.changed.locked };
-                this.#data.options.camera.value = this.#data.options.camera.changed.value;
-                this.#data.options.camera.locked = this.#data.options.camera.changed.locked;
-                this.#data.options.camera.changed.success = false;
-            } else {
-                camera = this.#camera;
-                this.#data.options.camera.value = null;
-                this.#data.options.camera.locked = this.#camera.metadata.locked;
-                this.#data.options.camera.changed.success = false;
-            }
-        } else {
-            camera.metadata = { locked: this.#data.options.camera.locked };
-            if (this.#data.options.camera.changed.pending) {
-                this.#data.options.camera.changed.success = true;
-            }
-        }
-        if (!this.#data.options.camera.locked && this.#data.options.camera.value !== null) {
-            camera.attachControl(this.#canvas, true);
-        }
-        this.#scene.activeCamera = camera;
-        return true;
+    /**
+     * Processes a materials object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} materials - The materials object to process.
+     * @returns {void}
+     */
+    #processMaterials(materials) {
+        const config = {};
+        config.materials = materials;
+        this.#processConfig(config);
     }
 
-    #addContainer(container) {
-        if (!container.assetContainer || container.visible || !container.show) {
-            return false;
-        }
-
-        container.assetContainer.addAllToScene();
-        container.visible = true;
-        return true;
+    /**
+     * Processes a model object by wrapping it in a config and loading it.
+     * @private
+     * @param {object} model - The model object to process.
+     * @returns {void}
+     */
+    #processModel(model) {
+        const config = {};
+        config.model = model;
+        this.#processConfig(config);
     }
 
-    #removeContainer(container) {
-        if (!container.assetContainer || !container.visible) {
-            return false;
+    /**
+     * Processes viewer options by loading them into the 3D component.
+     * Dispatches loading events and processes the next task.
+     * @private
+     * @param {object} options - The options object to process.
+     * @returns {void}
+     */
+    #processOptions(options) {
+        if (!this.#component3D) {
+            return;
         }
 
-        container.assetContainer.removeAllFromScene();
-        container.visible = false;
-        return true;
-    }
-
-    #replaceContainer(container, newAssetContainer) {
-        if (container.assetContainer) {
-            this.#removeContainer(container);
-            container.assetContainer.dispose();
-            container.assetContainer = null;
-        }
-        this.#scene.getEngine().releaseEffects();
-        container.assetContainer = newAssetContainer;
-        this.#addContainer(container);
-        return true;
+        this.#on3DLoading();
+        const detail = this.#component3D.setOptions(options);
+        this.#on3DLoaded(detail);
+        this.#processNextTask();
     }
 
     /**
-     * Replace internal URIs in a glTF AssetContainer JSON with URLs pointing to files stored in IndexedDB.
-     * @param {JSON} assetContainerJSON AssetContainer in glTF (JSON) (modified in-place).
-     * @param {URL} [assetContainerURL] Optional URL of the AssetContainer. Used as the base path to resolve relative URIs.
-     * @returns {Promise<void>} Resolves when all applicable URIs have been resolved/replaced.
-     * @description
-     * - When provided, assetContainerURL is used as the base path for other scene files (binary buffers and all images).
-     *   If not provided (null/undefined), it is because it is the assetContainer of the model or materials whose URIs are absolute.
-     * - According to the glTF 2.0 spec, only items inside the "buffers" and "images" arrays may have a "uri" property.
-     * - Data URIs (embedded base64) are ignored and left unchanged.
-     * - Matching asset URIs are normalized (backslashes converted to forward slashes) and passed to the FileStorage layer
-     *   to obtain a usable URL (object URL or cached URL).
-     * - The function performs replacements in parallel and waits for all lookups to complete.
-     * - The JSON is updated in-place with the resolved URLs.
-     * @see {@link https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html#uris|glTF™ 2.0 Specification - URIs}
+     * Processes visibility configuration for the model and scene.
+     * Shows or hides the model and/or scene based on the config, then processes the next task.
+     * @private
+     * @param {object} config - The visibility configuration object.
+     * @returns {void}
      */
-    async #replaceSceneURIAsync(assetContainerJSON, assetContainerURL) {
-        if (!assetContainerJSON) {
+    #processVisibility(config) {
+        if (!this.#component3D) {
             return;
         }
-
-        let sceneURLBase = assetContainerURL;
-
-        if (typeof assetContainerURL === "string") {
-            const lastIndexOfSlash = assetContainerURL.lastIndexOf("/");
-            if (lastIndexOfSlash !== -1) {
-                sceneURLBase = assetContainerURL.substring(0, lastIndexOfSlash + 1);
-            }
+        const showModel = config.model?.visible;
+        const showScene = config.scene?.visible;
+        if (showModel !== undefined) {
+            showModel ? this.#component3D.showModel() : this.#component3D.hideModel();
         }
-
-        const arrayOfAssetsWithURI = [];
-
-        /**
-         * Check whether a value is a syntactically absolute URL.
-         * @param {string} url Value to test.
-         * @returns {boolean} True when `url` is a string that can be parsed by the global URL constructor (i.e. a syntactically absolute URL); false otherwise.
-         * @description
-         *  - Returns false for non-string inputs.
-         *  - Uses the browser's URL parser, so protocol-relative URLs ("//host/...") and relative paths are considered non-absolute.
-         *  - This is a syntactic check only — it does not perform network requests or validate reachability/CORS.
-         */
-        var isURLAbsolute = function (url) {
-            if (typeof url !== "string") {
-                return false;
-            }
-            try {
-                new URL(url);
-                return true;
-            } catch {
-                return false;
-            }
-        };
-
-        /**
-         * Collect asset entries that have an external URI (non-data URI) and store a normalized absolute/relative-resolved URI for later replacement.
-         * @param {Object} asset glTF asset entry (an element of buffers[] or images[]).
-         * @param {number} index Index of the asset within its parent array.
-         * @param {Array}  array Reference to the parent array (buffers or images).
-         * @returns {void} Side-effect: pushes a record into arrayOfAssetsWithURI when applicable { parent: <array>, index: <number>, uri: <string> }.
-         */
-        var saveAssetData = function (asset, index, array) {
-            if (asset.uri && !asset.uri.startsWith("data:")) {
-                const assetData = {
-                    parent: array,
-                    index: index,
-                    uri: `${!isURLAbsolute(asset.uri) && sceneURLBase ? sceneURLBase : ""}${asset.uri}`.replace(/\\\\|\\|\/\\/g, "/"),
-                };
-                arrayOfAssetsWithURI.push(assetData);
-            }
-        };
-
-        if (assetContainerJSON.buffers) {
-            assetContainerJSON.buffers.forEach((asset, index, array) => saveAssetData(asset, index, array));
+        if (showScene !== undefined) {
+            showScene ? this.#component3D.showEnvironment() : this.#component3D.hideEnvironment();
         }
-        if (assetContainerJSON.images) {
-            assetContainerJSON.images.forEach((asset, index, array) => saveAssetData(asset, index, array));
-        }
-
-        // Replace parallel URIs so that if files are not stored yet, they are downloaded in parallel
-        const promisesArray = arrayOfAssetsWithURI.map(async (asset) => {
-            const uri = await this.#fileStorage.getURL(asset.uri);
-            if (uri) {
-                asset.parent[asset.index].uri = uri;
-            }
-        });
-        await Promise.all(promisesArray);
+        this.#processNextTask();
     }
 
-    async #loadAssetContainer(container) {
-        let storage = container?.storage;
-
-        if (!storage) {
-            return false;
-        }
-
-        let source = storage.url || null;
-
-        if (storage.db && storage.table && storage.id) {
-            await this.#initStorage(storage.db, storage.table);
-            const object = await loadModel(storage.id, storage.table);
-            source = object.data;
-            if (object.timeStamp === container.timeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: object.size, success: false, timeStamp: object.timeStamp };
-            }
-        }
-
-        if (!source) {
-            return false;
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+    
+    /**
+     * Sets the viewer mode to "2d" or "3d" and updates component visibility accordingly.
+     * @public
+     * @param {string} [mode=this.#mode] - The mode to set ("2d" or "3d").
+     * @returns {void}
+     */
+    setMode(mode = this.#mode) {
+        if (mode !== "2d" && mode !== "3d") {
+            console.warn(`PrefViewer: invalid mode "${mode}". Allowed modes are "2d" and "3d".`);
+            return;
         }
-
-        let file = null;
-
-        let { blob, extension, size } = this.#decodeBase64(source);
-        if (blob && extension) {
-            if ((container.name === "model" || container.name === "materials") && extension === ".gltf") {
-                const assetContainerJSON = JSON.parse(await blob.text());
-                await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                source = `data:${JSON.stringify(assetContainerJSON)}`;
-            } else {
-                file = new File([blob], `${container.name}${extension}`, {
-                    type: blob.type,
-                });
-            }
-            if (!container.changed.pending) {
-                if (container.timeStamp === null && container.size === size) {
-                    container.changed = { pending: false, success: false };
-                    return false;
-                } else {
-                    container.changed = { pending: true, size: size, success: false, timeStamp: null };
-                }
-            }
+        this.#mode = mode;
+        if (mode === "2d") {
+            this.#component3D?.hide();
+            this.#component2D?.show();
         } else {
-            const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
-            extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-            let [fileSize, fileTimeStamp] = [await this.#fileStorage.getSize(source), await this.#fileStorage.getTimeStamp(source)];
-            if (container.size === fileSize && container.timeStamp === fileTimeStamp) {
-                container.changed = { pending: false, success: false };
-                return false;
-            } else {
-                container.changed = { pending: true, size: fileSize, success: false, timeStamp: fileTimeStamp };
-                if (extension === ".gltf") {
-                    const assetContainerBlob = await this.#fileStorage.getBlob(source);
-                    const assetContainerJSON = JSON.parse(await assetContainerBlob.text());
-                    await this.#replaceSceneURIAsync(assetContainerJSON, source);
-                    source = `data:${JSON.stringify(assetContainerJSON)}`;
-                } else {
-                    source = await this.#fileStorage.getURL(source);
-                }
-            }
-        }
-
-        // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
-        let options = {
-            pluginExtension: extension,
-            pluginOptions: {
-                gltf: {
-                    compileMaterials: true,
-                    loadAllMaterials: true,
-                    loadOnlyMaterials: container.name === "materials",
-                    //preprocessUrlAsync: this.#transformUrl,
-                },
-            },
-        };
-
-        return LoadAssetContainerAsync(file || source, this.#scene, options);
-    }
-
-    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
-        this.#engine.stopRenderLoop(this.#renderLoop);
-
-        const promiseArray = [];
-        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#data.containers.model) : false);
-        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#data.containers.environment) : false);
-        promiseArray.push(loadMaterials ? this.#loadAssetContainer(this.#data.containers.materials) : false);
-
-        Promise.allSettled(promiseArray)
-            .then((values) => {
-                const modelContainer = values[0];
-                const environmentContainer = values[1];
-                const materialsContainer = values[2];
-
-                if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    modelContainer.value.lights = [];
-                    this.#replaceContainer(this.#data.containers.model, modelContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, true);
-                } else {
-                    if (this.#data.containers.model.assetContainer && this.#data.containers.model.show !== this.#data.containers.model.visible) {
-                        this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.model, false);
-                }
-
-                if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, true);
-                } else {
-                    if (this.#data.containers.environment.assetContainer && this.#data.containers.environment.show !== this.#data.containers.environment.visible) {
-                        this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
-                    }
-                    this.#storeChangedFlagsForContainer(this.#data.containers.environment, false);
-                }
-
-                if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
-                    this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, true);
-                } else {
-                    this.#storeChangedFlagsForContainer(this.#data.containers.materials, false);
-                }
-
-                this.#setOptionsMaterials();
-                this.#setOptionsCamera();
-                this.#setVisibilityOfWallAndFloorInModel();
-            })
-            .catch((error) => {
-                this.loaded = true;
-                console.error("PrefViewer: failed to load model", error);
-                this.dispatchEvent(
-                    new CustomEvent("scene-error", {
-                        bubbles: true,
-                        cancelable: false,
-                        composed: true,
-                        detail: { error: error },
-                    })
-                );
-            })
-            .finally(async () => {
-                this.#setMaxSimultaneousLights();
-                this.#initShadows();
-                await this.#setStatusLoaded();
-            });
-    }
-
-    // Tasks
-    #addTaskToQueue(value, type) {
-        this.#taskQueue.push(new PrefViewerTask(value, type));
-        if (this.initialized && !this.loading) {
-            this.#processNextTask();
-        }
-    }
-
-    #processNextTask() {
-        if (!this.#taskQueue.length) {
-            return false;
-        }
-        const task = this.#taskQueue[0];
-        this.#taskQueue.shift();
-        switch (task.type) {
-            case PrefViewerTask.Types.Config:
-                this.#processConfig(task.value);
-                break;
-            case PrefViewerTask.Types.Model:
-                this.#processModel(task.value);
-                break;
-            case PrefViewerTask.Types.Environment:
-                this.#processEnvironment(task.value);
-                break;
-            case PrefViewerTask.Types.Materials:
-                this.#processMaterials(task.value);
-                break;
-            case PrefViewerTask.Types.Options:
-                this.#processOptions(task.value);
-                break;
-        }
-    }
-
-    #processConfig(config) {
-        this.#setStatusLoading();
-
-        // Containers
-        const loadModel = !!config.model?.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? config.model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
-
-        const loadEnvironment = !!config.scene?.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? config.scene.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
-
-        const loadMaterials = !!config.materials?.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? config.materials.storage : this.#data.containers.materials.storage;
-
-        // Options
-        if (config.options) {
-            this.#checkCameraChanged(config.options);
-            this.#checkMaterialsChanged(config.options);
-        }
-
-        this.#loadContainers(loadModel, loadEnvironment, loadMaterials);
-    }
-
-    #processModel(model) {
-        this.#setStatusLoading();
-
-        const loadModel = !!model.storage;
-        this.#data.containers.model.changed.pending = loadModel;
-        this.#data.containers.model.changed.success = false;
-        this.#data.containers.model.changed.storage = this.#data.containers.model.storage;
-        this.#data.containers.model.storage = loadModel ? model.storage : this.#data.containers.model.storage;
-        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
-
-        this.initialized && this.#loadContainers(loadModel, false, false);
-    }
-
-    #processEnvironment(environment) {
-        this.#setStatusLoading();
-
-        const loadEnvironment = !!environment.storage;
-        this.#data.containers.environment.changed.pending = loadEnvironment;
-        this.#data.containers.environment.changed.success = false;
-        this.#data.containers.environment.changed.storage = this.#data.containers.environment.storage;
-        this.#data.containers.environment.storage = loadEnvironment ? environment.storage : this.#data.containers.environment.storage;
-        this.#data.containers.environment.show = environment.visible !== undefined ? environment.visible : this.#data.containers.environment.show;
-
-        this.#loadContainers(false, loadEnvironment, false);
-    }
-
-    #processMaterials(materials) {
-        this.#setStatusLoading();
-
-        const loadMaterials = !!materials.storage;
-        this.#data.containers.materials.changed.pending = loadMaterials;
-        this.#data.containers.materials.changed.success = false;
-        this.#data.containers.materials.changed.storage = this.#data.containers.materials.storage;
-        this.#data.containers.materials.storage = loadMaterials ? materials.storage : this.#data.containers.materials.storage;
-
-        this.#loadContainers(false, false, loadMaterials);
-    }
-
-    async #processOptions(options) {
-        this.#setStatusLoading();
-
-        let someSetted = false;
-        if (this.#checkCameraChanged(options)) {
-            someSetted = someSetted || this.#setOptionsCamera();
+            this.#component3D?.show();
+            this.#component2D?.hide();
         }
-        if (this.#checkMaterialsChanged(options)) {
-            someSetted = someSetted || this.#setOptionsMaterials();
+        if (this.getAttribute("mode") !== mode) {
+            this.setAttribute("mode", mode);
         }
-
-        await this.#setStatusLoaded();
-
-        return someSetted;
     }
 
-    // Public Methods
+    /**
+     * Loads a configuration object or JSON string and adds it to the task queue.
+     * If the config contains a drawing, adds a drawing task as well.
+     * @public
+     * @param {object|string} config - Configuration object or JSON string.
+     * @returns {boolean|void} Returns false if config is invalid; otherwise void.
+     */
     loadConfig(config) {
         config = typeof config === "string" ? JSON.parse(config) : config;
         if (!config) {
             return false;
         }
+        if (config.drawing) {
+            this.#addTaskToQueue(config.drawing, "drawing");
+        }
         this.#addTaskToQueue(config, "config");
     }
 
+    /**
+     * Loads a model object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} model - Model object or JSON string.
+     * @returns {boolean|void} Returns false if model is invalid; otherwise void.
+     */
     loadModel(model) {
         model = typeof model === "string" ? JSON.parse(model) : model;
         if (!model) {
@@ -1175,6 +495,12 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(model, "model");
     }
 
+    /**
+     * Loads a scene/environment object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} scene - Scene object or JSON string.
+     * @returns {boolean|void} Returns false if scene is invalid; otherwise void.
+     */
     loadScene(scene) {
         scene = typeof scene === "string" ? JSON.parse(scene) : scene;
         if (!scene) {
@@ -1183,6 +509,12 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(scene, "environment");
     }
 
+    /**
+     * Loads materials object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} materials - Materials object or JSON string.
+     * @returns {boolean|void} Returns false if materials are invalid; otherwise void.
+     */
     loadMaterials(materials) {
         materials = typeof materials === "string" ? JSON.parse(materials) : materials;
         if (!materials) {
@@ -1191,6 +523,26 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(materials, "materials");
     }
 
+    /**
+     * Loads a drawing object or JSON string and adds it to the task queue.
+     * @public
+     * @param {object|string} drawing - Drawing object or JSON string.
+     * @returns {boolean|void} Returns false if drawing is invalid; otherwise void.
+     */
+    loadDrawing(drawing) {
+        drawing = typeof drawing === "string" ? JSON.parse(drawing) : drawing;
+        if (!drawing) {
+            return false;
+        }
+        this.#addTaskToQueue(drawing, "drawing");
+    }
+
+    /**
+     * Sets viewer options from an object or JSON string and adds them to the task queue.
+     * @public
+     * @param {object|string} options - Options object or JSON string.
+     * @returns {boolean|void} Returns false if options are invalid; otherwise void.
+     */
     setOptions(options) {
         options = typeof options === "string" ? JSON.parse(options) : options;
         if (!options) {
@@ -1199,55 +551,131 @@ class PrefViewer extends HTMLElement {
         this.#addTaskToQueue(options, "options");
     }
 
+    /**
+     * Shows the 3D model by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     showModel() {
-        this.#data.containers.model.show = true;
-        this.#addContainer(this.#data.containers.model);
+        const config = { model: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Hides the 3D model by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     hideModel() {
-        this.#data.containers.model.show = false;
-        this.#removeContainer(this.#data.containers.model);
+        const config = { model: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Shows the scene/environment by setting its visibility to true.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     showScene() {
-        this.#data.containers.environment.show = true;
-        this.#addContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
+        const config = { scene: { visible: true } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+    /**
+     * Hides the scene/environment by setting its visibility to false.
+     * Adds a visibility task to the queue for processing.
+     * @public
+     * @returns {void}
+     */
     hideScene() {
-        this.#data.containers.environment.show = false;
-        this.#removeContainer(this.#data.containers.environment);
-        this.#setVisibilityOfWallAndFloorInModel();
+        const config = { scene: { visible: false } };
+        this.#addTaskToQueue(config, "visibility");
     }
 
+
+    /**
+     * Initiates download of the current 3D model in GLB format.
+     * @public
+     * @returns {void}
+     */
     downloadModelGLB() {
-        const fileName = "model";
-        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelGLB();
     }
 
+    /**
+     * Initiates download of the current 3D model in USDZ format.
+     * @public
+     * @returns {void}
+     */
     downloadModelUSDZ() {
-        const fileName = "model";
-        USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelUSDZ();
     }
 
+    /**
+     * Initiates download of both the 3D model and scene in USDZ format.
+     * @public
+     * @returns {void}
+     */
     downloadModelAndSceneUSDZ() {
-        const fileName = "scene";
-        USDZExportAsync(this.#scene).then((response) => {
-            if (response) {
-                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
-            }
-        });
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneUSDZ();
     }
 
+    /**
+     * Initiates download of both the 3D model and scene in GLB format.
+     * @public
+     * @returns {void}
+     */
     downloadModelAndSceneGLB() {
-        const fileName = "scene";
-        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => glb.downloadFiles());
+        if (!this.#component3D) {
+            return;
+        }
+
+        this.#component3D.downloadModelAndSceneGLB();
+    }
+
+    /**
+     * Indicates whether the viewer has been initialized.
+     * @public
+     * @returns {boolean} True if initialized; otherwise, false.
+     */
+    get initialized() {
+        return this.#isInitialized;
+    }
+
+    /**
+     * Indicates whether the viewer has finished loading.
+     * @public
+     * @returns {boolean} True if loaded; otherwise, false.
+     */
+    get loaded() {
+        return this.#isLoaded;
+    }
+
+    /**
+     * Indicates whether the viewer is currently loading.
+     * @public
+     * @returns {boolean} True if loading; otherwise, false.
+     */
+    get loading() {
+        return this.#isLoading;
     }
 }
 
+customElements.define("pref-viewer-2d", PrefViewer2D);
+customElements.define("pref-viewer-3d", PrefViewer3D);
 customElements.define("pref-viewer", PrefViewer);