@preference-sl/pref-viewer 2.9.3-beta.0 → 2.10.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.9.3-beta.0",
+  "version": "2.10.0-beta.0",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
@@ -34,8 +34,10 @@
     "index.d.ts"
   ],
   "dependencies": {
-    "@babylonjs/core": "^8.0.0",
-    "@babylonjs/loaders": "^8.0.0"
+    "@babylonjs/core": "^8.28.2",
+    "@babylonjs/loaders": "^8.28.2",
+    "@babylonjs/serializers": "^8.28.2",
+    "babylonjs-gltf2interface": "^8.28.2"
   },
   "devDependencies": {
     "esbuild": "^0.25.10",

package/src/gltf-storage.js

@@ -0,0 +1,148 @@
+// Inicializar IndexedDB
+export async function initDb(dbName, storeName) {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(dbName, 1);
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => {
+            window.gltfDB = request.result;
+            resolve();
+        };
+
+        request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            if (!db.objectStoreNames.contains(storeName)) {
+                const store = db.createObjectStore(storeName, { keyPath: "id" });
+                store.createIndex("type", "type", { unique: false });
+                store.createIndex("timestamp", "timestamp", { unique: false });
+            }
+        };
+    });
+}
+
+// Guardar modelo
+export async function saveModel(modelDataStr, storeName) {
+    return new Promise((resolve, reject) => {
+        if (!window.gltfDB) {
+            reject(new Error("Database not initialized"));
+            return;
+        }
+        let modelData = JSON.parse(modelDataStr);
+
+        const dataToStore = {
+            ...modelData,
+            data: modelData.data,
+            size: modelData.data.length,
+            timestamp: new Date().toISOString(),
+        };
+
+        const transaction = window.gltfDB.transaction([storeName], "readwrite");
+        const store = transaction.objectStore(storeName);
+        const request = store.put(dataToStore);
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => resolve();
+    });
+}
+
+// Cargar modelo
+export function loadModel(modelId, storeName) {
+    return new Promise((resolve, reject) => {
+        if (!globalThis.gltfDB) {
+            reject(new Error("Database not initialized"));
+            return;
+        }
+        const tx = globalThis.gltfDB.transaction([storeName], "readonly");
+        const store = tx.objectStore(storeName);
+        const req = store.get(modelId);
+        req.onerror = () => reject(req.error);
+        req.onsuccess = () => resolve(req.result ?? null);
+    });
+}
+
+export function downloadFileFromBytes(fileName, bytesBase64, mimeType) {
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = `data:${mimeType};base64,${bytesBase64}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+}
+
+// Obtener todos los modelos (solo metadata)
+export async function getAllModels(storeName) {
+    return new Promise((resolve, reject) => {
+        if (!window.gltfDB) {
+            reject(new Error("Database not initialized"));
+            return;
+        }
+
+        const transaction = window.gltfDB.transaction([storeName], "readonly");
+        const store = transaction.objectStore(storeName);
+        const request = store.getAll();
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => {
+            // Excluir los datos binarios para evitar transferir demasiados datos
+            const results = request.result.map((item) => ({
+                id: item.id,
+                metadata: item.metadata,
+                timestamp: item.timestamp,
+                size: item.size,
+                type: item.type,
+            }));
+            resolve(JSON.stringify(results));
+        };
+    });
+}
+
+// Eliminar modelo
+export async function deleteModel(modelId, storeName) {
+    return new Promise((resolve, reject) => {
+        if (!window.gltfDB) {
+            reject(new Error("Database not initialized"));
+            return;
+        }
+
+        const transaction = window.gltfDB.transaction([storeName], "readwrite");
+        const store = transaction.objectStore(storeName);
+        const request = store.delete(modelId);
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => resolve();
+    });
+}
+
+// Limpiar toda la base de datos
+export async function clearAll(storeName) {
+    return new Promise((resolve, reject) => {
+        if (!window.gltfDB) {
+            reject(new Error("Database not initialized"));
+            return;
+        }
+
+        const transaction = window.gltfDB.transaction([storeName], "readwrite");
+        const store = transaction.objectStore(storeName);
+        const request = store.clear();
+
+        request.onerror = () => reject(request.error);
+        request.onsuccess = () => resolve();
+    });
+}
+
+(function attachPublicAPI(global) {
+    const root = (global.PrefConfigurator ??= {});
+    const storage = {
+        initDb,
+        saveModel,
+        loadModel,
+        getAllModels,
+        deleteModel,
+        clearAll,
+        downloadFileFromBytes,
+    };
+
+    // versionado del módulo público
+    root.version = root.version ?? "1.0.0";
+    root.storage = Object.freeze(storage);
+})(globalThis);

package/src/index.js

@@ -29,241 +29,431 @@
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator } from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools } 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";
+
 class PrefViewer extends HTMLElement {
-  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`,
+    #initialized = false;
+
+    #model = {
+        container: null,
+        show: true,
+        storage: null,
+        visible: false,
     };
 
+    #environment = {
+        container: null,
+        show: true,
+        storage: null,
+        visible: false,
+    };
+
+    #canvas = null;
+
     // Babylon.js core objects
-    this.engine = null;
-    this.scene = null;
-    this.camera = null;
-    this.hemiLight = null;
-    this.dirLight = null;
-    this.cameraLight = null;
-    this.shadowGen = null;
-    this._onWindowResize = null;
-
-    // Model sources
-    this.modelUrl = null;
-    this.modelBase64 = null;
-
-    this._initialized = false;
-    this._urlHooked = false;
-  }
-
-  static get observedAttributes() {
-    return ["model", "model-data"];
-  }
-
-  attributeChangedCallback(name, _old, value) {
-    if (name === "model") {
-      this.modelUrl = value;
-      this.modelBase64 = null;
-      this._initialized && this._reloadModel();
-    } else if (name === "model-data") {
-      this.modelBase64 = value;
-      this.modelUrl = null;
-      this._initialized && this._reloadModel();
+    #engine = null;
+    #scene = null;
+    #camera = null;
+    #hemiLight = null;
+    #dirLight = null;
+    #cameraLight = null;
+    #shadowGen = null;
+
+    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`,
+        };
+    }
+
+    static get observedAttributes() {
+        return ["config", "model", "scene", "show-model", "show-scene"];
+    }
+
+    attributeChangedCallback(name, _old, value) {
+        let data = null;
+        switch (name) {
+            case "config":
+                data = JSON.parse(value);
+                if (!data) {
+                    return false;
+                }
+                this.#model.storage = data.model?.storage || null;
+                this.#model.show = data.model?.visible || true;
+                this.#environment.storage = data.scene?.storage || null;
+                this.#environment.show = data.scene?.visible || true;
+                this.#initialized && this.#loadContainers(true, true);
+                break;
+            case "model":
+                data = JSON.parse(value);
+                if (!data) {
+                    return false;
+                }
+                this.#model.storage = data.model?.storage || null;
+                this.#model.show = data.model?.visible || true;
+                this.#initialized && this.#loadContainers(true, false);
+                break;
+            case "scene":
+                data = JSON.parse(value);
+                if (!data) {
+                    return false;
+                }
+                this.#environment.storage = data.scene?.storage || null;
+                this.#environment.show = data.scene?.visible || true;
+                this.#initialized && this.#loadContainers(false, true);
+                break;
+            case "show-model":
+                data = value.toLowerCase?.() === "true";
+                if (this.#initialized) {
+                    data ? this.showModel() : this.hideModel();
+                } else {
+                    this.#model.show = data;
+                }
+                break;
+            case "show-scene":
+                data = value.toLowerCase?.() === "true";
+                if (this.#initialized) {
+                    data ? this.showScene() : this.hideScene();
+                } else {
+                    this.#environment.show = data;
+                }
+                break;
+        }
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute("config")) {
+            const error = 'PrefViewer: provide "models" as array of model and environment';
+            console.error(error);
+            this.dispatchEvent(
+                new CustomEvent("model-error", {
+                    detail: { error: new Error(error) },
+                    bubbles: true,
+                    composed: true,
+                })
+            );
+            return false;
+        }
+
+        this.#initializeBabylon();
+        this.#loadContainers(true, true);
+        this.#initialized = true;
+    }
+
+    disconnectedCallback() {
+        this.#disposeEngine();
+        window.removeEventListener("resize", this.#onWindowResize);
+    }
+
+    // Web Component
+    #createCanvas() {
+        this.#canvas = document.createElement("canvas");
+        Object.assign(this.#canvas.style, {
+            width: "100%",
+            height: "100%",
+            display: "block",
+            outline: "none",
+        });
+    }
+
+    #wrapCanvas() {
+        const wrapper = document.createElement("div");
+        Object.assign(wrapper.style, {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+        });
+        wrapper.appendChild(this.#canvas);
+        this.shadowRoot.append(wrapper);
+    }
+
+    // Bbylon.js
+    #initializeBabylon() {
+        this.#engine = new Engine(this.#canvas, true, { alpha: true });
+        this.#scene = new Scene(this.#engine);
+        this.#scene.clearColor = new Color4(1, 1, 1, 1);
+        this.#createCamera();
+        this.#createLights();
+        this.#setupInteraction();
+
+        this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
+        window.addEventListener("resize", this.#onWindowResize);
+    }
+
+    #onWindowResize() {
+        this.#engine && this.#engine.resize();
+    }
+
+    #createCamera() {
+        this.#camera = new ArcRotateCamera("camera", Math.PI / 2, Math.PI / 3, 10, Vector3.Zero(), this.#scene);
+        this.#camera.attachControl(this.#canvas, true);
+    }
+
+    #createLights() {
+        // 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;
+    }
+
+    #setupInteraction() {
+        this.#canvas.addEventListener("wheel", (event) => {
+            if (!this.#scene || !this.#camera) return;
+            const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+            this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
+            this.#camera.inertialRadiusOffset += event.deltaY * this.#camera.wheelPrecision * 0.01;
+            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
+    #transformUrl(url) {
+        return new Promise((resolve) => {
+            resolve(url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/"));
+        });
+    }
+
+    #decodeBase64(base64) {
+        const [, payload] = base64.split(",");
+        const raw = payload || base64;
+        let decoded = "";
+        let blob = null;
+        let extension = null;
+        try {
+            decoded = atob(raw);
+        } catch {
+            return { blob, extension };
+        }
+        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 };
+    }
+
+    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.#model.container && this.#model.visible) {
+            const names = ["outer_0", "inner_1", "outerFloor", "innerFloor"];
+            const nodes = this.#model.container.getNodes();
+            this.#model.container
+                .getNodes()
+                .filter((filter) => names.includes(filter.name))
+                .forEach((node) => node.setEnabled(show !== undefined ? show : this.#environment.show));
+        }
+    }
+
+    #addContainer(group) {
+        if (group.container && !group.visible && group.show) {
+            group.container.addAllToScene();
+            group.visible = true;
+        }
+    }
+
+    #removeContainer(group) {
+        if (group.container && group.visible) {
+            group.container.removeAllFromScene();
+            group.visible = false;
+        }
+    }
+
+    #replaceContainer(group, newContainer) {
+        this.#removeContainer(group);
+        group.container = newContainer;
+        group.container.meshes.forEach((mesh) => {
+            mesh.receiveShadows = true;
+            this.#shadowGen.addShadowCaster(mesh, true);
+        });
+        this.#addContainer(group);
+    }
+
+    async #loadAssetContainer(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 (!source) {
+            return false;
+        }
+
+        let file = null;
+
+        let { blob, extension } = this.#decodeBase64(source);
+        if (blob && extension) {
+            file = new File([blob], `model${extension}`, {
+                type: blob.type,
+            });
+        } else {
+            const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
+            extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
+        }
+
+        let options = {
+            pluginExtension: extension,
+            pluginOptions: {
+                gltf: {
+                    preprocessUrlAsync: this.#transformUrl,
+                },
+            },
+        };
+
+        return LoadAssetContainerAsync(file || source, this.#scene, options);
+    }
+
+    async #loadContainers(loadModel = true, loadEnvironment = true) {
+        const promiseArray = [];
+
+        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#model.storage) : false);
+        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#environment.storage) : false);
+
+        Promise.allSettled(promiseArray)
+            .then(async (values) => {
+                const modelContainer = values[0];
+                const environmentContainer = values[1];
+
+                if (modelContainer.status === "fulfilled" && modelContainer.value) {
+                    this.#replaceContainer(this.#model, modelContainer.value);
+                }
+
+                if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
+                    this.#replaceContainer(this.#environment, environmentContainer.value);
+                }
+
+                this.#scene.createDefaultCamera(true, true, true);
+                this.#setVisibilityOfWallAndFloorInModel();
+
+                this.dispatchEvent(
+                    new CustomEvent("model-loaded", {
+                        detail: { success: "" },
+                        bubbles: true,
+                        composed: true,
+                    })
+                );
+            })
+            .catch((error) => {
+                console.error("PrefViewer: failed to load model", error);
+                this.dispatchEvent(
+                    new CustomEvent("model-error", {
+                        detail: { error: error },
+                        bubbles: true,
+                        composed: true,
+                    })
+                );
+            });
+    }
+
+    // Public Methods
+    showModel() {
+        this.#model.show = true;
+        this.#addContainer(this.#model);
+    }
+
+    hideModel() {
+        this.#model.show = false;
+        this.#removeContainer(this.#model);
+    }
+
+    showScene() {
+        this.#environment.show = true;
+        this.#addContainer(this.#environment);
+        this.#setVisibilityOfWallAndFloorInModel();
+    }
+
+    hideScene() {
+        this.#environment.show = false;
+        this.#removeContainer(this.#environment);
+        this.#setVisibilityOfWallAndFloorInModel();
+    }
+
+    downloadModelGLB() {
+        const fileName = "model";
+        GLTF2Export.GLBAsync(this.#model.container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            glb.downloadFiles();
+        });
     }
-  }
 
-  connectedCallback() {
-    if (!this._urlHooked) {
-      this._setupUrlPreprocessing();
-      this._urlHooked = true;
+    downloadModelUSDZ() {
+        const fileName = "model";
+        USDZExportAsync(this.#model.container).then((response) => {
+            if (response) {
+                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+            }
+        });
     }
 
-    if (!this.hasAttribute("model") && !this.hasAttribute("model-data")) {
-      const err = 'PrefViewer: provide either "model" or "model-data" attribute.';
-      console.error(err);
-      this.dispatchEvent(
-        new CustomEvent("model-error", { detail: { error: new Error(err) }, bubbles: true, composed: true })
-      );
-      return;
+    downloadModelAndSceneUSDZ() {
+        const fileName = "scene";
+        USDZExportAsync(this.#scene).then((response) => {
+            if (response) {
+                Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
+            }
+        });
     }
 
-    this.modelUrl = this.getAttribute("model");
-    this.modelBase64 = this.getAttribute("model-data");
-
-    this._initializeBabylon();
-    this._initialized = true;
-    this._reloadModel();
-  }
-
-  disconnectedCallback() {
-    this._disposeEngine();
-    this._onWindowResize && window.removeEventListener("resize", this._onWindowResize);
-  }
-
-  _setupUrlPreprocessing() {
-    const transformUrl = (url) =>
-      url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
-    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
-      if (plugin.name === "gltf" || plugin.name === "gltf2") {
-        plugin.preprocessUrl = transformUrl;
-        plugin.preprocessUrlAsync = (url) => Promise.resolve(transformUrl(url));
-      }
-    });
-  }
-
-  _createCanvas() {
-    this.canvas = document.createElement("canvas");
-    Object.assign(this.canvas.style, { width: "100%", height: "100%", display: "block" });
-  }
-
-  _wrapCanvas() {
-    const wrapper = document.createElement("div");
-    Object.assign(wrapper.style, { width: "100%", height: "100%", position: "relative" });
-    wrapper.appendChild(this.canvas);
-    this.shadowRoot.append(wrapper);
-  }
-
-  _initializeBabylon() {
-    this.engine = new Engine(this.canvas, true, { alpha: true });
-    this.scene = new Scene(this.engine);
-    this.scene.clearColor = new Color4(1, 1, 1, 1);
-    this._createCamera();
-    this._createLights();
-    this._setupInteraction();
-
-    this.engine.runRenderLoop(() => this.scene && this.scene.render());
-    this._onWindowResize = () => this.engine && this.engine.resize();
-    window.addEventListener("resize", this._onWindowResize);
-  }
-
-  _createCamera() {
-    this.camera = new ArcRotateCamera(
-      "camera",
-      Math.PI / 2,
-      Math.PI / 3,
-      10,
-      Vector3.Zero(),
-      this.scene
-    );
-    this.camera.attachControl(this.canvas, true);
-  }
-
-  _createLights() {
-    // 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;
-  }
-
-  _setupInteraction() {
-    this.canvas.addEventListener("wheel", (evt) => {
-      if (!this.scene || !this.camera) return;
-      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      this.camera.target = pick.hit ? pick.pickedPoint.clone() : this.camera.target;
-      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
-      evt.preventDefault();
-    });
-  }
-
-  async _reloadModel() {
-    if (!this.scene || (!this.modelUrl && !this.modelBase64)) return;
-    this._disposePreviousMeshes();
-
-    try {
-      let result;
-      if (this.modelBase64) {
-        const { blob, extension } = this._decodeBase64(this.modelBase64);
-        const file = new File([blob], `model${extension}`, { type: blob.type });
-        result = await SceneLoader.ImportMeshAsync(null, "", file, this.scene, undefined, extension);
-      } else {
-        const extMatch = this.modelUrl.match(/\.(gltf|glb)(\?|#|$)/i);
-        const extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
-        result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, extension);
-      }
-
-      this.scene.createDefaultCamera(true, true, true);
-
-      // Hook up our soft shadows to every mesh
-      result.meshes.forEach((mesh) => {
-        mesh.receiveShadows = true;
-        this.shadowGen.addShadowCaster(mesh, true);
-      });
-
-      this.dispatchEvent(
-        new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true })
-      );
-    } catch (err) {
-      console.error("PrefViewer: failed to load model", err);
-      this.dispatchEvent(
-        new CustomEvent("model-error", { detail: { error: err }, bubbles: true, composed: true })
-      );
+    downloadModelAndSceneGLB() {
+        const fileName = "scene";
+        GLTF2Export.GLBAsync(this.#scene, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+            glb.downloadFiles();
+        });
     }
-  }
-
-  _disposePreviousMeshes() {
-    if (!this.scene) return;
-    this.scene.meshes.slice().forEach((m) => m.getClassName() === "Mesh" && m.dispose());
-  }
-
-  _decodeBase64(base64) {
-    const [, payload] = base64.split(",");
-    const raw = payload || base64;
-    const decoded = atob(raw);
-    let isJson = false;
-    try { JSON.parse(decoded); isJson = true; } catch { }
-    const extension = isJson ? ".gltf" : ".glb";
-    const type = isJson ? "model/gltf+json" : "model/gltf-binary";
-    const array = Uint8Array.from(decoded, (c) => c.charCodeAt(0));
-    const blob = new Blob([array], { type });
-    return { blob, extension };
-  }
-
-  _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;
-  }
 }
 
 customElements.define("pref-viewer", PrefViewer);