@preference-sl/pref-viewer 2.9.0-beta.6 → 2.9.0-beta.7

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.9.0-beta.6",
+  "version": "2.9.0-beta.7",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
     "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\""
+    "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js --sourcemap",
+    "start": "npm run build && http-server dist -c-1 -p 8080"
   },
   "repository": {
     "type": "git",
@@ -36,6 +38,8 @@
     "@babylonjs/loaders": "^8.0.0"
   },
   "devDependencies": {
+    "esbuild": "^0.25.5",
+    "http-server": "^14.1.1",
     "standard-version": "^9.5.0"
   }
 }

package/src/index.js

@@ -29,26 +29,26 @@
  * </pref-viewer>
  * ```
  */
-import {
-  Engine,
-  Scene,
-  ArcRotateCamera,
-  Vector3,
-  SceneLoader,
-  Color4,
-  HemisphericLight,
-  DirectionalLight,
-  PointLight,
-  ShadowGenerator
-} from "@babylonjs/core";
+import { Engine, Scene, ArcRotateCamera, Vector3, SceneLoader, Color4, HemisphericLight, DirectionalLight, PointLight, ShadowGenerator } from "@babylonjs/core";
 import "@babylonjs/loaders";
-
+import "@babylonjs/loaders/glTF/2.0/Extensions/KHR_draco_mesh_compression";
+import { DracoCompression } from "@babylonjs/core/Meshes/Compression/dracoCompression";
 class PrefViewer extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
     this._createCanvas();
     this._wrapCanvas();
+    // Point to whichever version you packaged or want to use:
+    const DRACO_BASE = "https://www.gstatic.com/draco/versioned/decoders/1.5.7";
+    DracoCompression.Configuration.decoder = {
+      // loader for the “wrapper” that pulls in the real WASM
+      wasmUrl: `${DRACO_BASE}/draco_wasm_wrapper_gltf.js`,
+      // the raw WebAssembly binary
+      wasmBinaryUrl: `${DRACO_BASE}/draco_decoder_gltf.wasm`,
+      // JS fallback if WASM isn’t available
+      fallbackUrl: `${DRACO_BASE}/draco_decoder_gltf.js`,
+    };
 
     // Babylon.js core objects
     this.engine = null;
@@ -164,7 +164,7 @@ class PrefViewer extends HTMLElement {
     // 1) Stronger ambient fill
     this.hemiLight = new HemisphericLight(
       "hemiLight",
-      new Vector3(0, 1, 0),
+      new Vector3(-10, 10, -10),
       this.scene
     );
     this.hemiLight.intensity = 0.6;
@@ -172,17 +172,17 @@ class PrefViewer extends HTMLElement {
     // 2) Directional light from the front-right, angled slightly down
     this.dirLight = new DirectionalLight(
       "dirLight",
-      new Vector3(-1, -0.5, -0.5), // direction TOWARD the model
+      new Vector3(-10, 10, -10),
       this.scene
     );
     this.dirLight.position = new Vector3(5, 4, 5); // light is IN FRONT + ABOVE + to the RIGHT
     this.dirLight.intensity = 0.6;
 
-  // 3) Soft shadows
-  this.shadowGen = new ShadowGenerator(1024, this.dirLight);
-  this.shadowGen.useBlurExponentialShadowMap = true;
-  this.shadowGen.blurKernel = 16;
-  this.shadowGen.darkness = 0.5;
+    // 3) Soft shadows
+    this.shadowGen = new ShadowGenerator(1024, this.dirLight);
+    this.shadowGen.useBlurExponentialShadowMap = true;
+    this.shadowGen.blurKernel = 16;
+    this.shadowGen.darkness = 0.5;
 
     // 4) Camera‐attached headlight
     this.cameraLight = new PointLight(
@@ -222,16 +222,6 @@ class PrefViewer extends HTMLElement {
 
       this.scene.createDefaultCamera(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;