@preference-sl/pref-viewer 2.10.0-beta.2 → 2.10.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.10.0-beta.2",
+  "version": "2.10.0-beta.4",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {

package/src/index.js

@@ -39,7 +39,7 @@
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience } from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience, MeshBuilder, WebXRFeatureName } from "@babylonjs/core";
 import "@babylonjs/loaders";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
@@ -49,20 +49,72 @@ import { initDb, loadModel } from "./gltf-storage.js";
 class PrefViewer extends HTMLElement {
     #initialized = false;
 
-    #model = {
-        container: null,
-        show: true, // Show model by default
-        storage: null,
-        visible: false,
-    };
-
-    #environment = {
-        container: null,
-        show: true, // Show environment by default
-        storage: null,
-        visible: false,
+    #data = {
+        containers: {
+            model: {
+                name: "model",
+                container: null,
+                show: true,
+                storage: null,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+            environment: {
+                name: "environment",
+                container: null,
+                show: true,
+                storage: null,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+            materials: {
+                name: "materials",
+                container: null,
+                storage: null,
+                show: true,
+                visible: false,
+                size: null,
+                timestamp: null,
+                changed: false,
+            },
+        },
+        options: {
+            camera: {
+                value: null,
+                locked: true,
+                changed: false,
+            },
+            materials: {
+                innerWall: {
+                    value: null,
+                    prefix: "innerWall",
+                    changed: false,
+                },
+                outerWall: {
+                    value: null,
+                    prefix: "outerWall",
+                    changed: false,
+                },
+                innerFloor: {
+                    value: null,
+                    prefix: "innerFloor",
+                    changed: false,
+                },
+                outerFloor: {
+                    value: null,
+                    prefix: "outerFloor",
+                    changed: false,
+                },
+            },
+        },
     };
 
+    // DOM elements
+    #wrapper = null;
     #canvas = null;
 
     // Babylon.js core objects
@@ -113,7 +165,7 @@ class PrefViewer extends HTMLElement {
                 if (this.#initialized) {
                     data ? this.showModel() : this.hideModel();
                 } else {
-                    this.#model.show = data;
+                    this.#data.containers.model.show = data;
                 }
                 break;
             case "show-scene":
@@ -121,7 +173,7 @@ class PrefViewer extends HTMLElement {
                 if (this.#initialized) {
                     data ? this.showScene() : this.hideScene();
                 } else {
-                    this.#environment.show = data;
+                    this.#data.containers.environment.show = data;
                 }
                 break;
         }
@@ -142,7 +194,7 @@ class PrefViewer extends HTMLElement {
         }
 
         this.#initializeBabylon();
-        this.#loadContainers(true, true);
+        this.#loadContainers(true, true, true);
         this.#initialized = true;
     }
 
@@ -163,17 +215,48 @@ class PrefViewer extends HTMLElement {
     }
 
     #wrapCanvas() {
-        const wrapper = document.createElement("div");
-        Object.assign(wrapper.style, {
+        this.#wrapper = document.createElement("div");
+        Object.assign(this.#wrapper.style, {
             width: "100%",
             height: "100%",
             position: "relative",
         });
-        wrapper.appendChild(this.#canvas);
-        this.shadowRoot.append(wrapper);
+        this.#wrapper.appendChild(this.#canvas);
+        this.shadowRoot.append(this.#wrapper);
     }
-    
-    // Bbylon.js
+
+    // Data
+    #checkCameraChanged(options) {
+        if (!options || !options.camera) {
+            return false;
+        }
+        this.#data.options.camera.changed = options.camera && options.camera !== this.#data.options.camera.value ? true : false;
+        this.#data.options.camera.value = this.#data.options.camera.changed ? options.camera : this.#data.options.camera.value;
+    }
+
+    #checkMaterialsChanged(options) {
+        if (!options) {
+            return false;
+        }
+        Object.keys(this.#data.options.materials).forEach((material) => {
+            const key = `${material}Material`;
+            this.#data.options.materials[material].changed = options[key] && options[key] !== this.#data.options.materials[material].value ? true : false;
+            this.#data.options.materials[material].value = this.#data.options.materials[material].changed ? options[key] : this.#data.options.materials[material].value;
+        });
+    }
+
+    #storeChangedFlagsForContainer(container) {
+        container.timestamp = container.changed.timestamp;
+        container.size = container.changed.size;
+    }
+
+    #resetChangedFlags() {
+        Object.values(this.#data.containers).forEach((container) => (container.changed = false));
+        Object.values(this.#data.options.materials).forEach((material) => (material.changed = false));
+        this.#data.options.camera.changed = false;
+    }
+
+    // Babylon.js
     async #initializeBabylon() {
         this.#engine = new Engine(this.#canvas, true, { alpha: true });
         this.#scene = new Scene(this.#engine);
@@ -181,18 +264,25 @@ class PrefViewer extends HTMLElement {
         this.#createCamera();
         this.#createLights();
         this.#setupInteraction();
-        
+
         this.#engine.runRenderLoop(() => this.#scene && this.#scene.render());
         this.#canvasResizeObserver.observe(this.#canvas);
 
         await this.#createXRExperience();
     }
 
+    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) {
@@ -200,16 +290,37 @@ class PrefViewer extends HTMLElement {
             return false;
         }
 
-        const options = {
-            uiOptions: {
-                sessionMode: sessionMode,
-                renderTarget: "xrLayer",
-                referenceSpaceType: "local",
-            },
-        };
-
         try {
-        this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+            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;
@@ -219,11 +330,13 @@ class PrefViewer extends HTMLElement {
     #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 = 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 = this.#camera;
         this.#camera.attachControl(this.#canvas, true);
     }
 
@@ -251,10 +364,14 @@ class PrefViewer extends HTMLElement {
 
     #setupInteraction() {
         this.#canvas.addEventListener("wheel", (event) => {
-            if (!this.#scene || !this.#camera) return;
-            const pick = this.#scene.pick(this.#scene.pointerX, this.#scene.pointerY);
+            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;
-            this.#camera.inertialRadiusOffset -= event.deltaY * this.#camera.wheelPrecision * 0.001;
+            if (!this.#scene.activeCamera.metadata?.locked) {
+                this.#scene.activeCamera.inertialRadiusOffset -= event.deltaY * this.#scene.activeCamera.wheelPrecision * 0.001;
+            }
             event.preventDefault();
         });
     }
@@ -268,6 +385,27 @@ class PrefViewer extends HTMLElement {
     }
 
     // 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, "/"));
@@ -280,10 +418,11 @@ class PrefViewer extends HTMLElement {
         let decoded = "";
         let blob = null;
         let extension = null;
+        let size = raw.length;
         try {
             decoded = atob(raw);
         } catch {
-            return { blob, extension };
+            return { blob, extension, size };
         }
         let isJson = false;
         try {
@@ -294,7 +433,7 @@ class PrefViewer extends HTMLElement {
         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 };
+        return { blob, extension, size };
     }
 
     async #initStorage(db, table) {
@@ -306,41 +445,95 @@ class PrefViewer extends HTMLElement {
 
     // 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));
+        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));
     }
 
-    #addContainer(group) {
-        if (group.container && !group.visible && group.show) {
-            group.container.addAllToScene();
-            group.visible = true;
+    #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.assetContainer.changed || optionMaterial.changed)) {
+            containers.push(this.#data.containers.model.assetContainer);
+        }
+        if (this.#data.containers.environment.assetContainer && (this.#data.containers.environment.assetContainer.changed || optionMaterial.changed)) {
+            containers.push(this.#data.containers.environment.assetContainer);
+        }
+        if (containers.length === 0) {
+            return false;
         }
+
+        containers.forEach((container) => {
+            container.meshes.filter((meshToFilter) => meshToFilter.name.startsWith(optionMaterial.prefix)).forEach((mesh) => { 
+                if (mesh.material) {
+                    mesh.material.dispose();
+                }
+                mesh.material = material;
+            });
+        });
+
+        return true;
     }
 
-    #removeContainer(group) {
-        if (group.container && group.visible) {
-            group.container.removeAllFromScene();
-            group.visible = false;
+    #setOptionsMaterials() {
+        Object.values(this.#data.options.materials).forEach((material) => this.#setOptionsMaterial(material));
+    }
+
+    #setOptionsCamera() {
+        if (!this.#data.options.camera.value || (!this.#data.options.camera.changed && !this.#data.containers.model.assetContainer.changed)) {
+            return false;
+        }
+        let camera = this.#data.containers.model.assetContainer?.cameras.find((cam) => cam.name === this.#data.options.camera.value) || null;
+        if (!camera) {
+            camera = this.#camera;
+        } else {
+            camera.metadata = { locked: this.#data.options.camera.locked };
+            if (!this.#data.options.camera.locked) {
+                camera.attachControl(this.#canvas, true);
+            }
+        }
+
+        this.#scene.activeCamera = camera;
+    }
+
+    #addContainer(container) {
+        if (container.assetContainer && !container.visible && container.show) {
+            container.assetContainer.addAllToScene();
+            container.visible = true;
         }
     }
 
-    #replaceContainer(group, newContainer) {
-        this.#removeContainer(group);
-        group.container = newContainer;
-        group.container.meshes.forEach((mesh) => {
+    #removeContainer(container) {
+        if (container.assetContainer && container.visible) {
+            container.assetContainer.removeAllFromScene();
+            container.visible = false;
+        }
+    }
+
+    #replaceContainer(container, newAssetContainer) {
+        this.#removeContainer(container);
+        container.assetContainer = newAssetContainer;
+        container.assetContainer.meshes.forEach((mesh) => {
             mesh.receiveShadows = true;
             this.#shadowGen.addShadowCaster(mesh, true);
         });
-        this.#addContainer(group);
+        this.#addContainer(container);
     }
 
-    async #loadAssetContainer(storage) {
+    async #loadAssetContainer(container) {
+        let storage = container?.storage;
+
         if (!storage) {
             return false;
         }
@@ -351,6 +544,11 @@ class PrefViewer extends HTMLElement {
             await this.#initStorage(storage.db, storage.table);
             const object = await loadModel(storage.id, storage.table);
             source = object.data;
+            if (object.timestamp === container.timestamp) {
+                return false;
+            } else {
+                container.changed = { timestamp: object.timestamp, size: object.size };
+            }
         }
 
         if (!source) {
@@ -359,20 +557,34 @@ class PrefViewer extends HTMLElement {
 
         let file = null;
 
-        let { blob, extension } = this.#decodeBase64(source);
+        let { blob, extension, size } = this.#decodeBase64(source);
         if (blob && extension) {
-            file = new File([blob], `model${extension}`, {
+            file = new File([blob], `${container.name}${extension}`, {
                 type: blob.type,
             });
+            if (!container.changed) {
+                if (container.timestamp === null && container.size === size) {
+                    return false;
+                } else {
+                    container.changed = { timestamp: null, size: size };
+                }
+            }
         } else {
             const extMatch = source.match(/\.(gltf|glb)(\?|#|$)/i);
             extension = extMatch ? `.${extMatch[1].toLowerCase()}` : ".gltf";
+            const { fileSize, fileTimestamp } = await this.#getServerFileDataHeader(source);
+            if (container.timestamp === fileTimestamp && container.size === fileSize) {
+                return false;
+            } else {
+                container.changed = { timestamp: fileTimestamp, size: fileSize };
+            }
         }
 
         let options = {
             pluginExtension: extension,
             pluginOptions: {
                 gltf: {
+                    loadAllMaterials: true,
                     preprocessUrlAsync: this.#transformUrl,
                 },
             },
@@ -381,27 +593,43 @@ class PrefViewer extends HTMLElement {
         return LoadAssetContainerAsync(file || source, this.#scene, options);
     }
 
-    async #loadContainers(loadModel = true, loadEnvironment = true) {
+    async #loadContainers(loadModel = true, loadEnvironment = true, loadMaterials = true) {
         const promiseArray = [];
-
-        promiseArray.push(loadModel ? this.#loadAssetContainer(this.#model.storage) : false);
-        promiseArray.push(loadEnvironment ? this.#loadAssetContainer(this.#environment.storage) : false);
+        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(async (values) => {
                 const modelContainer = values[0];
                 const environmentContainer = values[1];
+                const materialsContainer = values[2];
 
                 if (modelContainer.status === "fulfilled" && modelContainer.value) {
-                    this.#replaceContainer(this.#model, modelContainer.value);
+                    this.#replaceContainer(this.#data.containers.model, modelContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.model);
+                } else {
+                    this.#data.containers.model.show ? this.#addContainer(this.#data.containers.model) : this.#removeContainer(this.#data.containers.model);
                 }
 
                 if (environmentContainer.status === "fulfilled" && environmentContainer.value) {
-                    this.#replaceContainer(this.#environment, environmentContainer.value);
+                    this.#replaceContainer(this.#data.containers.environment, environmentContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.environment);
+                } else {
+                    this.#data.containers.environment.show ? this.#addContainer(this.#data.containers.environment) : this.#removeContainer(this.#data.containers.environment);
                 }
 
+                if (materialsContainer.status === "fulfilled" && materialsContainer.value) {
+                    this.#replaceContainer(this.#data.containers.materials, materialsContainer.value);
+                    this.#storeChangedFlagsForContainer(this.#data.containers.materials);
+                }
+
+                this.#setOptionsMaterials();
+                this.#setOptionsCamera();
                 this.#setVisibilityOfWallAndFloorInModel();
 
+                this.#resetChangedFlags();
+
                 this.dispatchEvent(
                     new CustomEvent("model-loaded", {
                         detail: { success: "" },
@@ -428,11 +656,21 @@ class PrefViewer extends HTMLElement {
         if (!config) {
             return false;
         }
-        this.#model.storage = config.model?.storage || null;
-        this.#model.show = config.model?.visible !== undefined ? config.model.visible : this.#model.show;
-        this.#environment.storage = config.scene?.storage || null;
-        this.#environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#environment.show;
-        this.#initialized && this.#loadContainers(true, true);
+
+        // AssetContainers
+        this.#data.containers.model.storage = config.model?.storage || null;
+        this.#data.containers.model.show = config.model?.visible !== undefined ? config.model.visible : this.#data.containers.model.show;
+        this.#data.containers.environment.storage = config.scene?.storage || null;
+        this.#data.containers.environment.show = config.scene?.visible !== undefined ? config.scene.visible : this.#data.containers.environment.show;
+        this.#data.containers.materials.storage = config.materials?.storage || null;
+
+        // Options
+        if (config.options) {
+            this.#checkCameraChanged(config.options);
+            this.#checkMaterialsChanged(config.options);
+        }
+
+        this.#initialized && this.#loadContainers(true, true, true);
     }
 
     loadModel(model) {
@@ -440,9 +678,9 @@ class PrefViewer extends HTMLElement {
         if (!model) {
             return false;
         }
-        this.#model.storage = model.storage || null;
-        this.#model.show = model.visible !== undefined ? model.visible : this.#model.show;
-        this.#initialized && this.#loadContainers(true, false);
+        this.#data.containers.model.storage = model.storage || null;
+        this.#data.containers.model.show = model.visible !== undefined ? model.visible : this.#data.containers.model.show;
+        this.#initialized && this.#loadContainers(true, false, false);
     }
 
     loadScene(scene) {
@@ -450,43 +688,43 @@ class PrefViewer extends HTMLElement {
         if (!scene) {
             return false;
         }
-        this.#environment.storage = scene.storage || null;
-        this.#environment.show = scene.visible !== undefined ? scene.visible : this.#environment.show;
-        this.#initialized && this.#loadContainers(false, true);
+        this.#data.containers.environment.storage = scene.storage || null;
+        this.#data.containers.environment.show = scene.visible !== undefined ? scene.visible : this.#data.containers.environment.show;
+        this.#initialized && this.#loadContainers(false, true, false);
     }
 
     showModel() {
-        this.#model.show = true;
-        this.#addContainer(this.#model);
+        this.#data.containers.model.show = true;
+        this.#addContainer(this.#data.containers.model);
     }
 
     hideModel() {
-        this.#model.show = false;
-        this.#removeContainer(this.#model);
+        this.#data.containers.model.show = false;
+        this.#removeContainer(this.#data.containers.model);
     }
 
     showScene() {
-        this.#environment.show = true;
-        this.#addContainer(this.#environment);
+        this.#data.containers.environment.show = true;
+        this.#addContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     hideScene() {
-        this.#environment.show = false;
-        this.#removeContainer(this.#environment);
+        this.#data.containers.environment.show = false;
+        this.#removeContainer(this.#data.containers.environment);
         this.#setVisibilityOfWallAndFloorInModel();
     }
 
     downloadModelGLB() {
         const fileName = "model";
-        GLTF2Export.GLBAsync(this.#model.container, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
+        GLTF2Export.GLBAsync(this.#data.containers.model.assetContainer, fileName, { exportWithoutWaitingForScene: true }).then((glb) => {
             glb.downloadFiles();
         });
     }
 
     downloadModelUSDZ() {
         const fileName = "model";
-        USDZExportAsync(this.#model.container).then((response) => {
+        USDZExportAsync(this.#data.containers.model.assetContainer).then((response) => {
             if (response) {
                 Tools.Download(new Blob([response], { type: "model/vnd.usdz+zip" }), `${fileName}.usdz`);
             }