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

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.8.0",
+  "version": "2.9.0-beta.0",
   "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": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+    "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\""
   },
   "repository": {
     "type": "git",

package/src/index.js

@@ -39,7 +39,8 @@ import {
   HemisphericLight,
   DirectionalLight,
   PointLight,
-  ShadowGenerator
+  ShadowGenerator,
+  PointerEventTypes
 } from "@babylonjs/core";
 import "@babylonjs/loaders";
 
@@ -158,6 +159,8 @@ class PrefViewer extends HTMLElement {
       this.scene
     );
     this.camera.attachControl(this.canvas, true);
+    // remove default wheel behavior
+    this.camera.inputs.removeByType("ArcRotateCameraMouseWheelInput");
   }
 
   _createLights() {
@@ -195,11 +198,30 @@ class PrefViewer extends HTMLElement {
   }
 
   _setupInteraction() {
-    this.canvas.addEventListener("wheel", (evt) => {
-      if (!this.scene || !this.camera) return;
+    // custom wheel zoom: zoom toward the point under mouse
+    this.scene.onPointerObservable.add((pointerInfo) => {
+      if (pointerInfo.type !== PointerEventTypes.POINTERWHEEL) return;
+      const evt = pointerInfo.event;
       const pick = this.scene.pick(this.scene.pointerX, this.scene.pointerY);
-      this.camera.target = pick.hit ? pick.pickedPoint.clone() : this.camera.target;
-      this.camera.inertialRadiusOffset += evt.deltaY * this.camera.wheelPrecision * 0.01;
+      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);
+
       evt.preventDefault();
     });
   }
@@ -220,6 +242,8 @@ class PrefViewer extends HTMLElement {
         result = await SceneLoader.ImportMeshAsync(null, "", this.modelUrl, this.scene, undefined, extension);
       }
 
+      this.scene.createDefaultCamera(true, true, true);
+
       // Remove any extra lights that the loader might have added
       this.scene.lights
         .filter(