@preference-sl/pref-viewer 1.1.0 → 2.1.0

package/package.json

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

package/src/index.js

@@ -1,30 +1,107 @@
+/**
+ * =============================================================================
+ * PrefViewer Web Component (JavaScript)
+ * =============================================================================
+ *
+ * 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 a `model` attribute to load different glTF files (defaults to "./models/patata.gltf").
+ *   • Automatically disposes previous meshes when switching models.
+ *   • Dispatches “model-loaded” and “model-error” CustomEvents so host pages can react.
+ *
+ * Usage
+ * -----
+ * 1. **Import the script (module)**
+ *      <script type="module" src="path/to/pref-viewer.js"></script>
+ *
+ * 2. **Place the custom element in your HTML**
+ *      <pref-viewer
+ *        model="https://example.com/models/myModel.gltf"
+ *        style="width:800px; height:600px;">
+ *      </pref-viewer>
+ *
+ * 3. **Listen for loading events (optional)**
+ *      const viewer = document.querySelector("pref-viewer");
+ *      viewer.addEventListener("model-loaded", (evt) => {
+ *        console.log("Loaded meshes:", evt.detail.meshes);
+ *      });
+ *      viewer.addEventListener("model-error", (evt) => {
+ *        console.error("Failed to load model:", evt.detail.error);
+ *      });
+ *
+ * 4. **Change models at runtime**
+ *      viewer.setAttribute("model", "https://example.com/models/anotherModel.glb");
+ *
+ * -----------------------------------------------------------------------------
+ * Implementation code below
+ * -----------------------------------------------------------------------------
+ */
+
 import {
   Engine,
   Scene,
   ArcRotateCamera,
   Vector3,
   SceneLoader,
-  Color4
+  Color4,
+  HemisphericLight,
+  DirectionalLight
 } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
 class PrefViewer extends HTMLElement {
-  canvas;
-  engine;
-  scene;
-  modelUrl = null;
-
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
+    this._createCanvas();
+    this._wrapCanvas();
+    this.engine = null;
+    this.scene = null;
+    this.camera = null;
+    this.hemiLight = null;
+    this.dirLight = null;
+    this.modelUrl = null;
+    this._onWindowResize = null;
+  }
 
+  static get observedAttributes() {
+    return ["model"];
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === "model" && newValue) {
+      this.modelUrl = newValue;
+      this._reloadModel();
+    }
+  }
+
+  connectedCallback() {
+    // If no `model` attribute is present, use default bundled GLTF
+    if (!this.hasAttribute("model")) {
+      this.modelUrl = new URL("./models/patata.gltf", import.meta.url).href;
+    }
+    this._initializeBabylon();
+  }
+
+  disconnectedCallback() {
+    this._disposeEngine();
+    window.removeEventListener("resize", this._onWindowResize);
+  }
+
+  // ====== Private setup methods ======
+  _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%",
@@ -35,63 +112,110 @@ class PrefViewer extends HTMLElement {
     this.shadowRoot.append(wrapper);
   }
 
-  static get observedAttributes() {
-    return ["model"];
-  }
+  _initializeBabylon() {
+    // 1) Create engine and scene
+    this.engine = new Engine(this.canvas, true, { alpha: true });
+    this.scene = new Scene(this.engine);
+    this.scene.clearColor = new Color4(1, 1, 1, 1);
 
-  attributeChangedCallback(name, _old, value) {
-    if (name === "model" && value) {
-      this.modelUrl = value;
-      this.loadModel();
-    }
-  }
+    // 2) Hook into Babylon’s GLTF loader so "https://..." URIs aren't prefixed with blob:
+    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
+      if (plugin.name === "gltf" || plugin.name === "gltf2") {
+        plugin.preprocessUrl = (url) => {
+          // Normalize backslashes to forward slashes
+          const fixed = url.replace(/\\/g, "/");
+          // If it starts with http:// or https://, return as-is:
+          if (/^https?:\/\//i.test(fixed)) {
+            return fixed;
+          }
+          // Otherwise, leave it (Babylon will treat it relative to the blob)
+          return fixed;
+        };
+      }
+    });
 
-  connectedCallback() {
-    if (!this.hasAttribute("model")) {
-      this.modelUrl = new URL("./models/patata.gltf", import.meta.url).href;
-    }
-    this.initBabylon();
-  }
+    // 3) Create camera and lights
+    this._createCamera();
+    this._createLights();
 
-  disconnectedCallback() {
-    this.engine?.dispose();
-    window.removeEventListener("resize", this._resizeHandler);
-  }
+    // 4) Hook up input/event handlers
+    this._setupEventListeners();
 
-  initBabylon() {
-    this.engine = new Engine(this.canvas, true, { alpha: true });
-    this.scene = new Scene(this.engine);
-    this.scene.clearColor = new Color4(1, 1, 1, 1);
+    // 5) Start render loop
+    this.engine.runRenderLoop(() => {
+      if (this.scene) {
+        this.scene.render();
+      }
+    });
+    this._onWindowResize = () => this.engine.resize();
+    window.addEventListener("resize", this._onWindowResize);
+
+    // 6) Load the initial model (if modelUrl is already set)
+    this._reloadModel();
+  }
 
-    const camera = new ArcRotateCamera(
-      "cam",
+  _createCamera() {
+    // ArcRotateCamera that orbits around origin
+    this.camera = new ArcRotateCamera(
+      "camera",
       Math.PI / 2,
       Math.PI / 3,
       10,
       Vector3.Zero(),
       this.scene
     );
-    camera.attachControl(this.canvas, true);
+    this.camera.attachControl(this.canvas, true);
+  }
+
+  _createLights() {
+    // Simple hemispheric + directional as a starting point
+    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;
+  }
 
+  _setupEventListeners() {
+    // Zoom toward point-of-interest on wheel scroll
     this.canvas.addEventListener("wheel", (evt) => {
-      const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      const pivot = pick.hit ? pick.pickedPoint.clone() : camera.target.clone();
-      camera.target = pivot;
-      camera.inertialRadiusOffset += evt.deltaY * camera.wheelPrecision * 0.01;
+      if (!this.scene || !this.camera) return;
+
+      const pickResult = this.scene.pick(
+        this.scene.pointerX,
+        this.scene.pointerY
+      );
+      const pivotPoint = pickResult.hit
+        ? pickResult.pickedPoint.clone()
+        : this.camera.target.clone();
+
+      this.camera.target = pivotPoint;
+      this.camera.inertialRadiusOffset +=
+        evt.deltaY * this.camera.wheelPrecision * 0.01;
       evt.preventDefault();
     });
+  }
 
-    this.engine.runRenderLoop(() => this.scene.render());
-    this._resizeHandler = () => this.engine.resize();
-    window.addEventListener("resize", this._resizeHandler);
+  // ====== Model loading / management ======
+  async _reloadModel() {
+    if (!this.scene || !this.modelUrl) {
+      return;
+    }
 
-    this.loadModel();
-  }
+    // Dispose previous meshes so we don’t accumulate them
+    this._disposePreviousMeshes();
 
-  async loadModel() {
-    if (!this.scene || !this.modelUrl) return;
     try {
-      await SceneLoader.ImportMeshAsync(
+      const result = await SceneLoader.ImportMeshAsync(
         null,
         "",
         this.modelUrl,
@@ -99,11 +223,53 @@ class PrefViewer extends HTMLElement {
         undefined,
         ".gltf"
       );
+      // After loading, create defaults if none exist
       this.scene.createDefaultCameraOrLight(true, true, true);
+
+      // Dispatch "model-loaded" event
+      this.dispatchEvent(
+        new CustomEvent("model-loaded", {
+          detail: {
+            meshes: result.meshes,
+            particleSystems: result.particleSystems
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
     } catch (err) {
       console.error("Error loading model:", err);
+      // Dispatch "model-error" event
+      this.dispatchEvent(
+        new CustomEvent("model-error", {
+          detail: { error: err },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+
+  _disposePreviousMeshes() {
+    if (!this.scene) return;
+    this.scene.meshes.slice().forEach((mesh) => {
+      if (mesh.getClassName() === "Mesh") {
+        mesh.dispose();
+      }
+    });
+  }
+
+  // ====== Cleanup ======
+  _disposeEngine() {
+    if (this.engine) {
+      this.engine.dispose();
+      this.engine = null;
+      this.scene = null;
+      this.camera = null;
+      this.hemiLight = null;
+      this.dirLight = null;
     }
   }
 }
 
-customElements.define("pref-viewer", PrefViewer);
+customElements.define("pref-viewer", PrefViewer);

package/src/test.global.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>PrefViewer Test (Global Babylon)</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    #viewer-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f0f0f0;
+    }
+  </style>
+
+  <!-- 1) Load Babylon Core (Global) -->
+  <script src="https://cdn.babylonjs.com/babylon.js"></script>
+  <!-- 2) Load Babylon glTF loader so SceneLoader.ImportMeshAsync can parse .gltf -->
+  <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+</head>
+<body>
+  <div id="viewer-container">
+    <!-- Omit "model" attribute: PrefViewer will default to "./models/patata.gltf" -->
+    <pref-viewer style="width: 800px; height: 600px; border: 1px solid #ccc;"></pref-viewer>
+  </div>
+
+  <!-- 3) Define PrefViewer using the global `BABYLON` object -->
+  <script>
+    (function () {
+      const { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight } = BABYLON;
+
+      class PrefViewer extends HTMLElement {
+        constructor() {
+          super();
+          this.attachShadow({ mode: "open" });
+          this.canvas = document.createElement("canvas");
+          Object.assign(this.canvas.style, {
+            width: "100%",
+            height: "100%",
+            display: "block",
+          });
+
+          const wrapper = document.createElement("div");
+          Object.assign(wrapper.style, {
+            width: "100%",
+            height: "100%",
+            position: "relative",
+          });
+          wrapper.appendChild(this.canvas);
+          this.shadowRoot.append(wrapper);
+
+          this.engine = null;
+          this.scene = null;
+          this.camera = null;
+          this.hemiLight = null;
+          this.dirLight = null;
+          this.modelUrl = null;
+          this._onWindowResize = null;
+        }
+
+        static get observedAttributes() {
+          return ["model"];
+        }
+
+        attributeChangedCallback(name, _oldValue, newValue) {
+          if (name === "model" && newValue) {
+            this.modelUrl = newValue;
+            this._reloadModel();
+          }
+        }
+
+        connectedCallback() {
+          // If no `model` attribute is provided, default to "models/patata.gltf"
+          if (!this.hasAttribute("model")) {
+            // Note: NO import.meta.url here—just use a relative path.
+            this.modelUrl = "models/patata.gltf";
+          }
+          this._initializeBabylon();
+        }
+
+        disconnectedCallback() {
+          this._disposeEngine();
+          if (this._onWindowResize) {
+            window.removeEventListener("resize", this._onWindowResize);
+            this._onWindowResize = null;
+          }
+        }
+
+        // —— Private setup methods —— 
+
+        _initializeBabylon() {
+          // 1) Create engine & scene
+          this.engine = new Engine(this.canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false });
+          this.scene = new Scene(this.engine);
+          this.scene.clearColor = new Color4(1, 1, 1, 1);
+
+          // 2) Create camera & lights
+          this._createCamera();
+          this._createLights();
+
+          // 3) Hook up events
+          this._setupEventListeners();
+
+          // 4) Start render loop
+          this.engine.runRenderLoop(() => {
+            if (this.scene) {
+              this.scene.render();
+            }
+          });
+          this._onWindowResize = () => this.engine.resize();
+          window.addEventListener("resize", this._onWindowResize);
+
+          // 5) Load the initial model
+          this._reloadModel();
+        }
+
+        _createCamera() {
+          // ArcRotateCamera around (0,0,0)
+          const camera = new ArcRotateCamera(
+            "camera",
+            Math.PI / 2,
+            Math.PI / 3,
+            10,
+            Vector3.Zero(),
+            this.scene
+          );
+          camera.attachControl(this.canvas, true);
+          this.camera = camera;
+        }
+
+        _createLights() {
+          // Hemispheric light (fills in shadows)
+          const hemiLight = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), this.scene);
+          hemiLight.intensity = 0.8;
+
+          // Directional key light
+          const dirLight = new DirectionalLight("dirLight", new Vector3(-0.5, -1, -0.5), this.scene);
+          dirLight.position = new Vector3(0, 5, 0);
+          dirLight.intensity = 0.8;
+
+          this.hemiLight = hemiLight;
+          this.dirLight = dirLight;
+        }
+
+        _setupEventListeners() {
+          // Zoom towards the pointer's picked point on wheel scroll:
+          this.canvas.addEventListener("wheel", (evt) => {
+            if (!this.scene || !this.camera) return;
+            const pickResult = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
+            const pivotPoint = pickResult.hit
+              ? pickResult.pickedPoint.clone()
+              : this.camera.target.clone();
+            this.camera.target = pivotPoint;
+            this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
+            evt.preventDefault();
+          });
+        }
+
+        // —— Model loading / management —— 
+
+        async _reloadModel() {
+          if (!this.scene || !this.modelUrl) return;
+
+          // Dispose previous meshes (to avoid stacking them up)
+          this._disposePreviousMeshes();
+
+          try {
+            const result = await SceneLoader.ImportMeshAsync(
+              null,
+              "",
+              this.modelUrl,
+              this.scene,
+              undefined,
+              ".gltf"
+            );
+
+            // Ensure there's at least one camera / light if glTF had none
+            this.scene.createDefaultCameraOrLight(true, true, true);
+
+            // Turn off back-face culling so you can see both sides
+            result.meshes.forEach((mesh) => {
+              if (mesh.material) {
+                mesh.material.backFaceCulling = false;
+              }
+            });
+
+            this.dispatchEvent(
+              new CustomEvent("model-loaded", {
+                detail: { meshes: result.meshes, particleSystems: result.particleSystems },
+                bubbles: true,
+                composed: true,
+              })
+            );
+          } catch (err) {
+            console.error("Error loading 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((mesh) => {
+            if (mesh.getClassName && mesh.getClassName() === "Mesh") {
+              mesh.dispose();
+            }
+          });
+        }
+
+        // —— Cleanup —— 
+
+        _disposeEngine() {
+          if (this.engine) {
+            this.engine.dispose();
+            this.engine = null;
+            this.scene = null;
+            this.camera = null;
+          }
+        }
+      }
+
+      customElements.define("pref-viewer", PrefViewer);
+    })();
+  </script>
+
+</body>
+</html>

package/src/test.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>PrefViewer Test (Reuse Index.js)</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    #viewer-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #f0f0f0;
+    }
+  </style>
+
+  <!--
+    IMPORT MAP
+    ──────────
+    This tells the browser where to fetch "@babylonjs/core" and "@babylonjs/loaders".
+    We use jsDelivr's "?module" query so that it automatically serves the ESM build
+    corresponding to each package's "module" field in package.json.
+
+    Make sure the version (5.0.1 here) matches what you have in package.json.
+    If you have "@babylonjs/core": "^5.0.2" in your package.json, change both URLs
+    to "@5.0.2?module", etc.
+
+    This import-map must appear *before* you load index.js as a module.
+  -->
+  <script type="importmap">
+  {
+    "imports": {
+      "@babylonjs/core":    "https://cdn.jsdelivr.net/npm/@babylonjs/core@5.0.1?module",
+      "@babylonjs/loaders": "https://cdn.jsdelivr.net/npm/@babylonjs/loaders@5.0.1?module"
+    }
+  }
+  </script>
+</head>
+<body>
+  <div id="viewer-container">
+    <!-- 
+      By omitting the `model` attribute, PrefViewer’s connectedCallback()
+      will fall back to "./models/patata.gltf" (relative to index.js).
+    -->
+    <pref-viewer style="width: 800px; height: 600px; border: 1px solid #ccc;"></pref-viewer>
+  </div>
+
+  <!--
+    Load your existing ES-module index.js. Because of the import-map above,
+    any `import { … } from "@babylonjs/core"` inside index.js will resolve to
+    "https://cdn.jsdelivr.net/npm/@babylonjs/core@5.0.1?module", etc.
+  -->
+  <script type="module" src="./index.js"></script>
+</body>
+</html>