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

package/package.json

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

package/src/index.js

@@ -6,30 +6,40 @@
  * Overview
  * --------
  * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Renders glTF or GLB models in a <canvas> inside its shadow DOM.
- *   • Supports loading via remote URLs (`model` attribute) or Base64 data URIs (`model-data` attribute).
+ *   • 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.
+ *   • Emits 'model-loaded' and 'model-error' events for integration.
  *
  * Usage
  * -----
- * Load from a URL:
+ * Load model from IndexedDB:
  * ```html
  * <pref-viewer
- *   model="https://example.com/models/myModel.glb"
- *   style="width:800px; height:600px;">
+ *     model='{ "storage": { "db": "PrefConfiguratorDB", "table": "gltfModels", "id": "1234-1234-1234-1234-1234" }, "visible": true" }'
+ *     style="width:800px; height:600px;">
+ * </pref-viewer>
+ * ```
+ * 
+ * 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>
  * ```
  *
- * Load from Base64 data:
+ * Load model from Base64 data:
  * ```html
  * <pref-viewer
- *   model-data="data:application/gltf+json;base64,UEsDB..."
- *   style="width:800px; height:600px;">
+ *     model='{ "storage": { "url" : "data:model/gltf+json;base64,UEsDB..." }, "visible": true" }'
+ *     style="width:800px; height:600px;">
  * </pref-viewer>
  * ```
  */
-import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools } from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator, LoadAssetContainerAsync, Tools, WebXRSessionManager, WebXRDefaultExperience } from "@babylonjs/core";
 import "@babylonjs/loaders";
 import { USDZExportAsync, GLTF2Export } from "@babylonjs/serializers";
 import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
@@ -41,14 +51,14 @@ class PrefViewer extends HTMLElement {
 
     #model = {
         container: null,
-        show: true,
+        show: true, // Show model by default
         storage: null,
         visible: false,
     };
 
     #environment = {
         container: null,
-        show: true,
+        show: true, // Show environment by default
         storage: null,
         visible: false,
     };
@@ -63,6 +73,7 @@ class PrefViewer extends HTMLElement {
     #dirLight = null;
     #cameraLight = null;
     #shadowGen = null;
+    #XRExperience = null;
 
     constructor() {
         super();
@@ -89,33 +100,13 @@ class PrefViewer extends HTMLElement {
         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);
+                this.loadConfig(value);
                 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);
+                this.loadModel(value);
                 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);
+                this.loadScene(value);
                 break;
             case "show-model":
                 data = value.toLowerCase?.() === "true";
@@ -157,7 +148,7 @@ class PrefViewer extends HTMLElement {
 
     disconnectedCallback() {
         this.#disposeEngine();
-        window.removeEventListener("resize", this.#onWindowResize);
+        this.#canvasResizeObserver.disconnect();
     }
 
     // Web Component
@@ -181,26 +172,58 @@ class PrefViewer extends HTMLElement {
         wrapper.appendChild(this.#canvas);
         this.shadowRoot.append(wrapper);
     }
-
+    
     // Bbylon.js
-    #initializeBabylon() {
+    async #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);
+        this.#canvasResizeObserver.observe(this.#canvas);
+
+        await this.#createXRExperience();
     }
 
-    #onWindowResize() {
-        this.#engine && this.#engine.resize();
+    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;
+        }
+
+        const options = {
+            uiOptions: {
+                sessionMode: sessionMode,
+                renderTarget: "xrLayer",
+                referenceSpaceType: "local",
+            },
+        };
+
+        try {
+        this.#XRExperience = await WebXRDefaultExperience.CreateAsync(this.#scene, options);
+        } catch (error) {
+            console.warn("PrefViewer: failed to create WebXR experience", error);
+            this.#XRExperience = null;
+        }
     }
 
+    #canvasResizeObserver = new ResizeObserver(() => this.#engine && this.#engine.resize());
+
     #createCamera() {
-        this.#camera = new ArcRotateCamera("camera", Math.PI / 2, Math.PI / 3, 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.attachControl(this.#canvas, true);
     }
 
@@ -230,8 +253,8 @@ class PrefViewer extends HTMLElement {
         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;
+            //this.#camera.target = pick.hit ? pick.pickedPoint.clone() : this.#camera.target;
+            this.#camera.inertialRadiusOffset -= event.deltaY * this.#camera.wheelPrecision * 0.001;
             event.preventDefault();
         });
     }
@@ -377,7 +400,6 @@ class PrefViewer extends HTMLElement {
                     this.#replaceContainer(this.#environment, environmentContainer.value);
                 }
 
-                this.#scene.createDefaultCamera(true, true, true);
                 this.#setVisibilityOfWallAndFloorInModel();
 
                 this.dispatchEvent(
@@ -401,6 +423,38 @@ class PrefViewer extends HTMLElement {
     }
 
     // Public Methods
+    loadConfig(config) {
+        config = typeof config === "string" ? JSON.parse(config) : config;
+        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);
+    }
+
+    loadModel(model) {
+        model = typeof model === "string" ? JSON.parse(model) : model;
+        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);
+    }
+
+    loadScene(scene) {
+        scene = typeof scene === "string" ? JSON.parse(scene) : scene;
+        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);
+    }
+
     showModel() {
         this.#model.show = true;
         this.#addContainer(this.#model);