@preference-sl/pref-viewer 2.9.0-beta.0 → 2.9.0-beta.2

package/package.json

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

package/src/index.js

@@ -39,8 +39,7 @@ import {
   HemisphericLight,
   DirectionalLight,
   PointLight,
-  ShadowGenerator,
-  PointerEventTypes
+  ShadowGenerator
 } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
@@ -159,8 +158,6 @@ class PrefViewer extends HTMLElement {
       this.scene
     );
     this.camera.attachControl(this.canvas, true);
-    // remove default wheel behavior
-    this.camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");
   }
 
   _createLights() {
@@ -170,22 +167,22 @@ class PrefViewer extends HTMLElement {
       new Vector3(0, 1, 0),
       this.scene
     );
-    this.hemiLight.intensity = 0.8;
+    this.hemiLight.intensity = 0.5;
 
     // 2) Soft directional “sun” for form
     this.dirLight = new DirectionalLight(
       "dirLight",
-      new Vector3(-0.5, -1, -0.5),
+      new Vector3(-1, -0.3, -0.5), // more horizontal light
       this.scene
     );
-    this.dirLight.position = new Vector3(0, 5, 0);
-    this.dirLight.intensity = 0.3;
+    this.dirLight.position = new Vector3(5, 3, 5); // coming from above + front/right
+    this.dirLight.intensity = 0.4;
 
     // 3) Soft blurred shadows
     this.shadowGen = new ShadowGenerator(1024, this.dirLight);
     this.shadowGen.useBlurExponentialShadowMap = true;
     this.shadowGen.blurKernel = 16;
-    this.shadowGen.darkness = 0.2;
+    this.shadowGen.darkness = 0.5;
 
     // 4) Camera‐attached headlight
     this.cameraLight = new PointLight(
@@ -198,30 +195,11 @@ class PrefViewer extends HTMLElement {
   }
 
   _setupInteraction() {
-    // custom wheel zoom: zoom toward the point under mouse
-    this.scene.onPointerObservable.add((pointerInfo) => {
-      if (pointerInfo.type !== PointerEventTypes.POINTERWHEEL) return;
-      const evt = pointerInfo.event;
+    this.canvas.addEventListener("wheel", (evt) => {
+      if (!this.scene || !this.camera) return;
       const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      if (!pick.hit) return;
-      const zoomPoint = pick.pickedPoint;
-
-      // compute new radius
-      const delta = evt.deltaY * this.camera.wheelDeltaPercentage;
-      let newRadius = this.camera.radius + delta;
-      if (this.camera.lowerRadiusLimit) newRadius = Math.max(newRadius, this.camera.lowerRadiusLimit);
-      if (this.camera.upperRadiusLimit) newRadius = Math.min(newRadius, this.camera.upperRadiusLimit);
-
-      // compute direction from target to camera
-      const fromTarget = this.camera.position.subtract(this.camera.target);
-      const ratio = newRadius / this.camera.radius;
-      const newFromTarget = fromTarget.scale(ratio);
-
-      // update camera
-      this.camera.target = zoomPoint;
-      this.camera.radius = newRadius;
-      this.camera.position = zoomPoint.add(newFromTarget);
-
+      this.camera.target = pick.hit ? pick.pickedPoint.clone() : this.camera.target;
+      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
       evt.preventDefault();
     });
   }