feat(globeControls): zoom on mouse position while using wheel

src/Controls/GlobeControls.js

@@ -159,7 +159,7 @@ let previous;
  * @param      {object}  [options] An object with one or more configuration properties. Any property of GlobeControls
  * can be passed in this object.
  * @property      {number}  zoomFactor The factor the scale is multiplied by when dollying (zooming) in or
- * divided by when dollying out. Default is 2.
+ * divided by when dollying out. Default is 1.1.
  * @property      {number}  rotateSpeed Speed camera rotation in orbit and panoramic mode. Default is 0.25.
  * @property      {number}  minDistance Minimum distance between ground and camera in meters (Perspective Camera only).
  * Default is 250.
@@ -211,7 +211,7 @@ class GlobeControls extends THREE.EventDispatcher {
             console.warn('Controls zoomSpeed parameter is deprecated. Use zoomFactor instead.');
             options.zoomFactor = options.zoomFactor || options.zoomSpeed;
         }
-        this.zoomFactor = options.zoomFactor || 1.25;
+        this.zoomFactor = options.zoomFactor || 1.1;
 
         // Limits to how far you can dolly in and out ( PerspectiveCamera only )
         this.minDistance = options.minDistance || 250;
@@ -268,7 +268,7 @@ class GlobeControls extends THREE.EventDispatcher {
         this.updateHelper = enableTargetHelper ? (position, helper) => {
             positionObject(position, helper);
             view.notifyChange(this.camera);
-        } : function empty() {};
+        } : function empty() { };
 
         this._onEndingMove = null;
         this._onTravel = this.travel.bind(this);
@@ -323,10 +323,10 @@ class GlobeControls extends THREE.EventDispatcher {
         coordCameraTarget.crs = this.view.referenceCrs;
     }
 
-    get dollyInScale() {
+    get zoomInScale() {
         return this.zoomFactor;
     }
-    get dollyOutScale() {
+    get zoomOutScale() {
         return 1 / this.zoomFactor;
     }
 
@@ -389,9 +389,10 @@ class GlobeControls extends THREE.EventDispatcher {
         }
     }
 
+    // For Mobile
     dolly(delta) {
         if (delta === 0) { return; }
-        dollyScale = delta > 0 ? this.dollyInScale : this.dollyOutScale;
+        dollyScale = delta > 0 ? this.zoomInScale : this.zoomOutScale;
 
         if (this.camera.isPerspectiveCamera) {
             orbitScale /= dollyScale;
@@ -454,7 +455,8 @@ class GlobeControls extends THREE.EventDispatcher {
                 quaterPano.setFromAxisAngle(normal, sphericalDelta.theta).multiply(quaterAxis.setFromAxisAngle(axisX, sphericalDelta.phi));
                 cameraTarget.position.applyQuaternion(quaterPano);
                 this.camera.localToWorld(cameraTarget.position);
-                break; }
+                break;
+            }
             // ZOOM/ORBIT Move Camera around the target camera
             default: {
                 // get camera position in local space of target
@@ -594,6 +596,7 @@ class GlobeControls extends THREE.EventDispatcher {
 
         // Initialize dolly movement.
         dollyStart.copy(event.viewCoords);
+        this.view.getPickingPositionFromDepth(event.viewCoords, pickedPosition);        // mouse position
 
         // Initialize pan movement.
         panStart.copy(event.viewCoords);
@@ -629,11 +632,9 @@ class GlobeControls extends THREE.EventDispatcher {
     handleDolly(event) {
         dollyEnd.copy(event.viewCoords);
         dollyDelta.subVectors(dollyEnd, dollyStart);
-
-        this.dolly(-dollyDelta.y);
         dollyStart.copy(dollyEnd);
-
-        this.update();
+        event.delta = dollyDelta.y;
+        if (event.delta != 0) { this.handleZoom(event); }
     }
 
     handlePan(event) {
@@ -764,23 +765,31 @@ class GlobeControls extends THREE.EventDispatcher {
     handleZoom(event) {
         this.player.stop();
         CameraUtils.stop(this.view, this.camera);
+        const zoomScale = event.delta > 0 ? this.zoomInScale : this.zoomOutScale;
+        let point = event.type === 'dolly' ? pickedPosition : this.view.getPickingPositionFromDepth(event.viewCoords);        // get cursor position
+        let range = this.getRange();
+        range *= zoomScale;
 
-        this.updateTarget();
-        const delta = -event.delta;
-        this.dolly(delta);
+        if (point && (range > this.minDistance && range < this.maxDistance)) {  // check if the zoom is in the allowed interval
+            const camPos = xyz.setFromVector3(cameraTarget.position).as('EPSG:4326', c).toVector3();
+            point = xyz.setFromVector3(point).as('EPSG:4326', c).toVector3();
 
-        const previousRange = this.getRange(pickedPosition);
-        this.update();
-        const newRange = this.getRange(pickedPosition);
-        if (Math.abs(newRange - previousRange) / previousRange > 0.001) {
-            this.dispatchEvent({
-                type: CONTROL_EVENTS.RANGE_CHANGED,
-                previous: previousRange,
-                new: newRange,
-            });
+            if (camPos.x * point.x < 0) {     // Correct rotation at 180th meridian by using 0 <= longitude <=360 for interpolation purpose
+                if (camPos.x - point.x > 180) { point.x += 360; } else if (point.x - camPos.x > 180) { camPos.x += 360; }
+            }
+            point.lerp(  // point interpol between mouse cursor and cam pos
+                camPos,
+                zoomScale, // interpol factor
+            );
+
+            point = c.setFromVector3(point).as('EPSG:4978', xyz);
+
+            return this.lookAtCoordinate({       // update view to the interpolate point
+                coord: point,
+                range,
+            },
+            false);
         }
-        this.dispatchEvent(this.startEvent);
-        this.dispatchEvent(this.endEvent);
     }
 
     onTouchStart(event) {
@@ -804,7 +813,8 @@ class GlobeControls extends THREE.EventDispatcher {
                     } else {
                         this.state = this.states.NONE;
                     }
-                    break; }
+                    break;
+                }
                 case this.states.ORBIT:
                 case this.states.DOLLY: {
                     const x = event.touches[0].pageX;
@@ -814,7 +824,8 @@ class GlobeControls extends THREE.EventDispatcher {
                     const distance = Math.sqrt(dx * dx + dy * dy);
                     dollyStart.set(0, distance);
                     rotateStart.set(x, y);
-                    break; }
+                    break;
+                }
                 case this.states.PAN:
                     panStart.set(event.touches[0].pageX, event.touches[0].pageY);
                     break;
@@ -851,7 +862,8 @@ class GlobeControls extends THREE.EventDispatcher {
                 } else {
                     this.onTouchEnd();
                 }
-                break; }
+                break;
+            }
             case this.states.ORBIT.finger:
             case this.states.DOLLY.finger: {
                 const gfx = this.view.mainLoop.gfxEngine;
@@ -875,7 +887,8 @@ class GlobeControls extends THREE.EventDispatcher {
 
                 dollyStart.copy(dollyEnd);
 
-                break; }
+                break;
+            }
             case this.states.PAN.finger:
                 panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
                 panDelta.subVectors(panEnd, panStart);

src/Controls/StateControl.js

@@ -395,7 +395,9 @@ class StateControl extends THREE.EventDispatcher {
         event.preventDefault();
 
         if (this.enabled && this.ZOOM.enable) {
-            this.dispatchEvent({ type: this.ZOOM._event, delta: event.deltaY });
+            viewCoords.copy(this._view.eventToViewCoords(event));
+            this.currentState = this.NONE;
+            this.dispatchEvent({ type: this.ZOOM._event, delta: event.deltaY, viewCoords });
         }
     }