@preference-sl/pref-viewer 2.1.3 → 2.1.5

package/package.json

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

package/src/index.js

@@ -40,16 +40,7 @@
  * ----------------------------------------------------------------------------- 
  */
 
-import {
-  Engine,
-  Scene,
-  ArcRotateCamera,
-  Vector3,
-  SceneLoader,
-  Color4,
-  HemisphericLight,
-  DirectionalLight
-} from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
 class PrefViewer extends HTMLElement {
@@ -147,47 +138,16 @@ class PrefViewer extends HTMLElement {
     this.scene = new Scene(this.engine);
     this.scene.clearColor = new Color4(1, 1, 1, 1);
 
-    // 2) Hook into Babylon’s GLTF loader so that any URIs starting with "blob:…"
-    //    get stripped off before we check for an absolute "https://".
-    console.log("PrefViewer: Adding preprocessUrl hook");
-    SceneLoader.OnPluginActivatedObservable.add((plugin) => {
-      console.log(`PrefViewer: Plugin activated - ${plugin.name}`);
-      if (plugin.name === "gltf" || plugin.name === "gltf2") {
-        plugin.preprocessUrl = (url) => {
-          // a) If the loader already prepended "blob:…", strip it out.
-          //    Regex explanation: ^blob:(?:file|https?|ftp):\/\/[^\/]+\/(.*)
-          //    basically removes the entire "blob:http://localhost:3000/" prefix.
-          const stripped = url.replace(
-            /^blob:(?:http|https|file):\/\/[^\/]+\/(.+)/i,
-            "$1"
-          );
-          // b) Normalize backslashes "\" → forward slashes "/"
-          const fixedSlashes = stripped.replace(/\\/g, "/");
-          console.log(
-            `PrefViewer: preprocessUrl received "${url}", stripped to "${stripped}", normalized to "${fixedSlashes}"`
-          );
-          // c) If it now starts with "http://" or "https://", return it as an absolute URL:
-          if (/^https?:\/\//i.test(fixedSlashes)) {
-            console.log(`PrefViewer: preprocessUrl returning absolute URL "${fixedSlashes}"`);
-            return fixedSlashes;
-          }
-          // d) Otherwise, return the relative path (Babylon will resolve it relative to the blob if needed)
-          console.log(`PrefViewer: preprocessUrl returning relative URL "${fixedSlashes}"`);
-          return fixedSlashes;
-        };
-      }
-    });
-
-    // 3) Create camera and lights
+    // 2) Create camera and lights
     console.log("PrefViewer: _createCamera and _createLights");
     this._createCamera();
     this._createLights();
 
-    // 4) Hook up input/event handlers (e.g. wheel-to-zoom)
+    // 3) Hook up input/event handlers (e.g. wheel-to-zoom)
     console.log("PrefViewer: _setupEventListeners");
     this._setupEventListeners();
 
-    // 5) Start Babylon’s render loop
+    // 4) Start Babylon’s render loop
     console.log("PrefViewer: Starting render loop");
     this.engine.runRenderLoop(() => {
       if (this.scene) {
@@ -263,6 +223,21 @@ class PrefViewer extends HTMLElement {
     // Dispose previous meshes so we don’t accumulate them
     this._disposePreviousMeshes();
 
+    SceneLoader.OnPluginActivatedObservable.addOnce((plugin) => {
+      if (plugin.name === "gltf") {
+        plugin.preprocessUrlAsync = async (url) => {
+          try {
+            const parsed = new URL(url);
+            return parsed.href; // Absolute URL: use as-is
+          } catch {
+            // If relative, optionally fix or log
+            console.warn("Relative texture URL, resolving manually:", url);
+            return url; // or prepend your desired base path here
+          }
+        };
+      }
+    });
+
     try {
       console.log(`PrefViewer: ImportMeshAsync("${this.modelUrl}")`);
       const result = await SceneLoader.ImportMeshAsync(