@preference-sl/pref-viewer 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.6.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

@@ -37,7 +37,9 @@ import {
   SceneLoader,
   Color4,
   HemisphericLight,
-  DirectionalLight
+  DirectionalLight,
+  PointLight,
+  ShadowGenerator
 } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
@@ -54,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
@@ -109,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;
@@ -156,11 +161,37 @@ class PrefViewer extends HTMLElement {
   }
 
   _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);
+    // 1) Stronger ambient fill
+    this.hemiLight = new HemisphericLight(
+      "hemiLight",
+      new Vector3(0, 1, 0),
+      this.scene
+    );
+    this.hemiLight.intensity = 0.8;
+
+    // 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.8;
+    this.dirLight.intensity = 0.3;
+
+    // 3) Soft blurred shadows
+    this.shadowGen = new ShadowGenerator(1024, this.dirLight);
+    this.shadowGen.useBlurExponentialShadowMap = true;
+    this.shadowGen.blurKernel = 16;
+    this.shadowGen.darkness = 0.2;
+
+    // 4) Camera‐attached headlight
+    this.cameraLight = new PointLight(
+      "cameraLight",
+      this.camera.position,
+      this.scene
+    );
+    this.cameraLight.parent = this.camera;
+    this.cameraLight.intensity = 0.5;
   }
 
   _setupInteraction() {
@@ -189,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 })
       );
@@ -211,7 +257,7 @@ class PrefViewer extends HTMLElement {
     const raw = payload || base64;
     const decoded = atob(raw);
     let isJson = false;
-    try { JSON.parse(decoded); isJson = true; } catch {}
+    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));
@@ -222,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;
   }
 }