@preference-sl/pref-viewer 2.7.0 → 2.8.0

package/package.json

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

package/src/index.js

@@ -56,6 +56,8 @@ class PrefViewer extends HTMLElement {
     this.camera = null;
     this.hemiLight = null;
     this.dirLight = null;
+    this.cameraLight = null;
+    this.shadowGen = null;
     this._onWindowResize = null;
 
     // Model sources
@@ -111,7 +113,8 @@ class PrefViewer extends HTMLElement {
   }
 
   _setupUrlPreprocessing() {
-    const transformUrl = (url) => url.replace(/^blob:[^/]+\//i, "").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;
@@ -158,23 +161,35 @@ class PrefViewer extends HTMLElement {
   }
 
   _createLights() {
-    // Ambient hemisphere for general fill
-    this.hemiLight = new HemisphericLight("hemiLight", new Vector3(0, 1, 0), this.scene);
-    this.hemiLight.intensity = 0.8;                // stronger ambient
+    // 1) Stronger ambient fill
+    this.hemiLight = new HemisphericLight(
+      "hemiLight",
+      new Vector3(0, 1, 0),
+      this.scene
+    );
+    this.hemiLight.intensity = 0.8;
 
-    // Main “sun” light, but softer
-    this.dirLight = new DirectionalLight("dirLight", new Vector3(-0.5, -1, -0.5), this.scene);
+    // 2) Soft directional “sun” for form
+    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
+    this.dirLight.intensity = 0.3;
 
-    // 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
+    // 3) Soft blurred shadows
+    this.shadowGen = new ShadowGenerator(1024, this.dirLight);
+    this.shadowGen.useBlurExponentialShadowMap = true;
+    this.shadowGen.blurKernel = 16;
+    this.shadowGen.darkness = 0.2;
 
-    // Headlight: ensure the camera always shines on what you’re looking at
-    this.cameraLight = new PointLight("cameraLight", this.camera.position, this.scene);
+    // 4) Camera‐attached headlight
+    this.cameraLight = new PointLight(
+      "cameraLight",
+      this.camera.position,
+      this.scene
+    );
     this.cameraLight.parent = this.camera;
     this.cameraLight.intensity = 0.5;
   }
@@ -205,7 +220,22 @@ class PrefViewer extends HTMLElement {
         result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, extension);
       }
 
-      this.scene.createDefaultCameraOrLight(true, true, true);
+      // Remove any extra lights that the loader might have added
+      this.scene.lights
+        .filter(
+          (light) =>
+            !["hemiLight", "dirLight", "cameraLight"].includes(
+              light.name
+            )
+        )
+        .forEach((light) => light.dispose());
+
+      // Hook up our soft shadows to every mesh
+      result.meshes.forEach((mesh) => {
+        mesh.receiveShadows = true;
+        this.shadowGen.addShadowCaster(mesh, true);
+      });
+
       this.dispatchEvent(
         new CustomEvent("model-loaded", { detail: result, bubbles: true, composed: true })
       );
@@ -238,7 +268,9 @@ class PrefViewer extends HTMLElement {
   _disposeEngine() {
     if (!this.engine) return;
     this.engine.dispose();
-    this.engine = this.scene = this.camera = this.hemiLight = this.dirLight = null;
+    this.engine = this.scene = this.camera = null;
+    this.hemiLight = this.dirLight = this.cameraLight = null;
+    this.shadowGen = null;
   }
 }