@preference-sl/pref-viewer 2.5.5 → 2.7.0

package/package.json

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

package/src/index.js

@@ -6,25 +6,28 @@
  * Overview
  * --------
  * `PrefViewer` is a self-contained Web Component built with Babylon.js that:
- *   • Inserts a <canvas> into its shadow DOM to render a glTF model.
- *   • Creates and manages a Babylon Engine, Scene, ArcRotateCamera, and basic lighting.
- *   • Listens for `model` (URL) or `model-data` (Base64) attributes to load different glTF files.
- *   • Automatically disposes previous meshes when switching models.
- *   • Dispatches “model-loaded” and “model-error” CustomEvents so host pages can react.
+ *   • 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).
+ *   • Automatically handles scene creation (engine, camera, lighting) and resource cleanup.
+ *   • Emits `model-loaded` and `model-error` events for integration.
  *
  * Usage
  * -----
+ * Load from a URL:
+ * ```html
  * <pref-viewer
- *   model="https://example.com/models/myModel.gltf"
+ *   model="https://example.com/models/myModel.glb"
  *   style="width:800px; height:600px;">
  * </pref-viewer>
+ * ```
  *
- * or:
- *
+ * Load from Base64 data:
+ * ```html
  * <pref-viewer
  *   model-data="data:application/gltf+json;base64,UEsDB..."
  *   style="width:800px; height:600px;">
  * </pref-viewer>
+ * ```
  */
 import {
   Engine,
@@ -34,7 +37,9 @@ import {
   SceneLoader,
   Color4,
   HemisphericLight,
-  DirectionalLight
+  DirectionalLight,
+  PointLight,
+  ShadowGenerator
 } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
@@ -53,38 +58,38 @@ class PrefViewer extends HTMLElement {
     this.dirLight = null;
     this._onWindowResize = null;
 
-    // Model data sources
+    // Model sources
     this.modelUrl = null;
     this.modelBase64 = null;
 
-    this._hasInitialized = false;
-    this._pluginHookSetup = false;
+    this._initialized = false;
+    this._urlHooked = false;
   }
 
   static get observedAttributes() {
     return ["model", "model-data"];
   }
 
-  attributeChangedCallback(name, _oldValue, newValue) {
+  attributeChangedCallback(name, _old, value) {
     if (name === "model") {
-      this.modelUrl = newValue;
+      this.modelUrl = value;
       this.modelBase64 = null;
-      if (this._hasInitialized) this._reloadModel();
+      this._initialized && this._reloadModel();
     } else if (name === "model-data") {
-      this.modelBase64 = newValue;
+      this.modelBase64 = value;
       this.modelUrl = null;
-      if (this._hasInitialized) this._reloadModel();
+      this._initialized && this._reloadModel();
     }
   }
 
   connectedCallback() {
-    if (!this._pluginHookSetup) {
+    if (!this._urlHooked) {
       this._setupUrlPreprocessing();
-      this._pluginHookSetup = true;
+      this._urlHooked = true;
     }
 
     if (!this.hasAttribute("model") && !this.hasAttribute("model-data")) {
-      const err = 'PrefViewer: No "model" or "model-data" attribute provided.';
+      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 })
@@ -92,28 +97,21 @@ class PrefViewer extends HTMLElement {
       return;
     }
 
-    if (this.hasAttribute("model")) {
-      this.modelUrl = this.getAttribute("model");
-    }
-    if (this.hasAttribute("model-data")) {
-      this.modelBase64 = this.getAttribute("model-data");
-    }
+    this.modelUrl = this.getAttribute("model");
+    this.modelBase64 = this.getAttribute("model-data");
 
     this._initializeBabylon();
-    this._hasInitialized = true;
+    this._initialized = true;
     this._reloadModel();
   }
 
   disconnectedCallback() {
     this._disposeEngine();
-    if (this._onWindowResize) window.removeEventListener("resize", this._onWindowResize);
+    this._onWindowResize && window.removeEventListener("resize", this._onWindowResize);
   }
 
   _setupUrlPreprocessing() {
-    const transformUrl = (url) => {
-      const stripped = url.replace(/^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i, "$1");
-      return stripped.replace(/\\/g, "/");
-    };
+    const transformUrl = (url) => url.replace(/^blob:[^/]+\//i, "").replace(/\\/g, "/");
     SceneLoader.OnPluginActivatedObservable.add((plugin) => {
       if (plugin.name === "gltf" || plugin.name === "gltf2") {
         plugin.preprocessUrl = transformUrl;
@@ -140,7 +138,8 @@ class PrefViewer extends HTMLElement {
     this.scene.clearColor = new Color4(1, 1, 1, 1);
     this._createCamera();
     this._createLights();
-    this._setupEventListeners();
+    this._setupInteraction();
+
     this.engine.runRenderLoop(() => this.scene && this.scene.render());
     this._onWindowResize = () => this.engine && this.engine.resize();
     window.addEventListener("resize", this._onWindowResize);
@@ -148,20 +147,39 @@ class PrefViewer extends HTMLElement {
 
   _createCamera() {
     this.camera = new ArcRotateCamera(
-      "camera", Math.PI/2, Math.PI/3, 10, Vector3.Zero(), this.scene
+      "camera",
+      Math.PI / 2,
+      Math.PI / 3,
+      10,
+      Vector3.Zero(),
+      this.scene
     );
     this.camera.attachControl(this.canvas, true);
   }
 
   _createLights() {
-    this.hemiLight = new HemisphericLight("hemiLight", new Vector3(0,1,0), this.scene);
-    this.hemiLight.intensity = 0.6;
-    this.dirLight = new DirectionalLight("dirLight", new Vector3(-0.5,-1,-0.5), this.scene);
-    this.dirLight.position = new Vector3(0,5,0);
-    this.dirLight.intensity = 0.8;
+    // Ambient hemisphere for general fill
+    this.hemiLight = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), this.scene);
+    this.hemiLight.intensity = 0.8;                // stronger ambient
+
+    // Main “sun” light, but softer
+    this.dirLight = new DirectionalLight("dirLight", new Vector3(-0.5, -1, -0.5), this.scene);
+    this.dirLight.position = new Vector3(0, 5, 0);
+    this.dirLight.intensity = 0.3;                 // much lower than before
+
+    // Optional: very light, blurred shadows just for form (darkness: 0 → no shadows, 1 → full)
+    const shadowGen = new ShadowGenerator(1024, this.dirLight);
+    shadowGen.useBlurExponentialShadowMap = true;   // soften edges
+    shadowGen.blurKernel = 16;
+    shadowGen.darkness = 0.2;                       // practically “skimmed milk” shadows
+
+    // Headlight: ensure the camera always shines on what you’re looking at
+    this.cameraLight = new PointLight("cameraLight", this.camera.position, this.scene);
+    this.cameraLight.parent = this.camera;
+    this.cameraLight.intensity = 0.5;
   }
 
-  _setupEventListeners() {
+  _setupInteraction() {
     this.canvas.addEventListener("wheel", (evt) => {
       if (!this.scene || !this.camera) return;
       const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
@@ -174,54 +192,46 @@ class PrefViewer extends HTMLElement {
   async _reloadModel() {
     if (!this.scene || (!this.modelUrl && !this.modelBase64)) return;
     this._disposePreviousMeshes();
+
     try {
       let result;
       if (this.modelBase64) {
-        const { blob, extension } = this._createBlobFromBase64(this.modelBase64);
-        const fileName = `model${extension}`;
-        const file = new File([blob], fileName, { type: blob.type });
-        console.log('[PrefViewer] Loading from Base64 as File:', fileName);
+        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 ext = (this.modelUrl.match(/\.(gltf|glb)(\?|#|$)/i) || [])[1]?.toLowerCase() || 'gltf';
-        result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, `.${ext}`);
+        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.createDefaultCameraOrLight(true, true, true);
-      this.dispatchEvent(new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true }));
+      this.dispatchEvent(
+        new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true })
+      );
     } catch (err) {
-      console.error("PrefViewer: Error loading model:", err);
-      this.dispatchEvent(new CustomEvent("model-error", { detail: { error: err }, bubbles: true, composed: true }));
+      console.error("PrefViewer: failed to load model", err);
+      this.dispatchEvent(
+        new CustomEvent("model-error", { detail: { error: err }, bubbles: true, composed: true })
+      );
     }
   }
 
   _disposePreviousMeshes() {
     if (!this.scene) return;
-    this.scene.meshes.slice().forEach(m => m.getClassName()==="Mesh" && m.dispose());
+    this.scene.meshes.slice().forEach((m) => m.getClassName() === "Mesh" && m.dispose());
   }
 
-  _createBlobFromBase64(base64) {
-    console.log('[PrefViewer] Decoding Base64...');
-    const [prefix, payload] = base64.split(',');
-    const raw = payload ?? base64;
-    let decoded;
-    try {
-      decoded = atob(raw);
-    } catch (e) {
-      console.error('[PrefViewer] atob failed:', e);
-      throw e;
-    }
-    // detect JSON vs binary glb
+  _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';
-    console.log('[PrefViewer] Detected format:', extension, type);
-    const array = Uint8Array.from(decoded, c => c.charCodeAt(0));
+    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 });
-    console.log('[PrefViewer] Created Blob of size', blob.size);
     return { blob, extension };
   }