Add double-tap zoom for Environment Controls#1439

Open

pizza3 wants to merge 2 commits intoNASA-AMMOS:masterfrom

pizza3:feature/environmentTapZoom

Contributor

pizza3 commented Jan 13, 2026

Implements double-tap to zoom functionality for EnvironmentControls, inspired by Google Maps and other modern mapping platforms. This adds an intuitive touch gesture for zooming in on mobile and tablet devices.

@gkjohnson the animation is in _updateDoubleTapAnimation

Complete Implementation

Configuration Options (EnvironmentControls.js:107-109)

this.enableDoubleTapZoom = true;           // Enable/disable feature
this.doubleTapZoomScale = 2.0;             // 2x zoom multiplier
this.doubleTapAnimationDuration = 0.3;     // 300ms animation

State Management (EnvironmentControls.js:133-136)

this._lastTapTime = 0;
this._lastTapPoint = new Vector2();
this._doubleTapAnim = null;  // Single object for animation state

Tap Detection (EnvironmentControls.js:442-450)

Added in pointerupCallback
Detects single-finger touch taps
Calls _detectDoubleTap() before pointer cleanup

Three Private Methods (EnvironmentControls.js:1141-1244)

_detectDoubleTap() - 300ms window, 10px tolerance
_startDoubleTapZoom() - Raycasts to find target, sets up animation
_updateDoubleTapAnimation() - Ease-out cubic interpolation

Update Loop Integration (EnvironmentControls.js:713-747)

Calls _updateDoubleTapAnimation() every frame
Blocks normal zoom/drag/rotate during animation
Dispatches change events


          Add double-tap zoom functionality to EnvironmentControls

b9b936c

gkjohnson reviewed

View reviewed changes

Contributor

gkjohnson left a comment

Thanks! I've left a few comments about the code structure - I think a few things can be simplified. Regarding that actual usability, here are two things I've noticed:

It's currently not possible to "cancel" the animation. As in if you place your finger on the screen to draw while the "zoom" animation is occurring then the animation should cancel so the user can interact.
If you drag your finger a long distance, then release and tap again in the same spot this counts as a "double tap".

src/three/renderer/controls/EnvironmentControls.js Outdated

+              		// double-tap state
+              		this._lastTapTime = 0;
+              		this._lastTapPoint = new Vector2();
+              		this._doubleTapAnim = null; // stores { startTime, startValue, targetValue, zoomPoint }

Contributor

gkjohnson Jan 13, 2026

Lets initialize this during initialization rather than setting it to null.

src/three/renderer/controls/EnvironmentControls.js Outdated


		_detectDoubleTap( pointerTracker ) {

		const currentPoint = new Vector2();

Contributor

gkjohnson Jan 14, 2026

Lets use an existing scratch variable for this.

src/three/renderer/controls/EnvironmentControls.js Outdated

+              		const now = performance.now();
+              		const timeSinceLastTap = now - this._lastTapTime;
+              		const moveDistance = pointerTracker.getMoveDistance();

Contributor

gkjohnson Jan 14, 2026

"getMoveDistance" seems to always be "0" because the "pointerup" event is fired without any "pointerMove" events on the same frame. And the "pointerTracker.updateFrame()" call in "update()" resets the distances. Have you checked if this is returning what you expect it to?

src/three/renderer/controls/EnvironmentControls.js

+              		adjustedPointerToCoords( _pointer, domElement, _pointer );
+              		setRaycasterFromCamera( raycaster, _pointer, camera );
+              		const hit = this._raycast( raycaster );
+              		const zoomPoint = hit ? hit.point.clone() : camera.position.clone().addScaledVector( raycaster.ray.direction, 100 );

Contributor

gkjohnson Jan 14, 2026

Please use the scratch variables

src/three/renderer/controls/EnvironmentControls.js Outdated

+              		// Ease-out cubic: t = 1 - (1-t)³
+              		const progress = Math.min( elapsed / duration, 1 );
+              		const t = 1 - Math.pow( 1 - progress, 3 );
+              		const currentValue = startValue + ( targetValue - startValue ) * t;

Contributor

gkjohnson Jan 14, 2026

Can we use MathUtils.lerp here?

src/three/renderer/controls/EnvironmentControls.js Outdated

+              		const { camera } = this;
+              		const { startTime, startValue, targetValue, zoomPoint } = this._doubleTapAnim;
+              		const elapsed = this.clock.getElapsedTime() - startTime;

Contributor

gkjohnson Jan 14, 2026

We should take a "deltaTime" passed into the function and thread it through the "update" function, as is done elsewhere in the class. Then the animation time can be counted down on each update.

src/three/renderer/controls/EnvironmentControls.js Outdated

Comment on lines 463 to 467

+              			// Don't reset state if we're animating a double-tap zoom
+              			if ( ! this._doubleTapAnim ) {
+              				this.resetState();

Contributor

gkjohnson Jan 14, 2026

Why is this necessary? It doesn't seem to impact anything relating to the animation

src/three/renderer/controls/EnvironmentControls.js Outdated

Comment on lines 721 to 727

+              			if ( ! this._doubleTapAnim ) {
+              				this._updateZoom();
+              				this._updatePosition( deltaTime );
+              				this._updateRotation( deltaTime );
+              			}

Contributor

gkjohnson Jan 14, 2026

This guard shouldn't be needed, either. If the zoom animation has begun / is animating then the mouse / touch should be up and there should be no way for these functions to do anything

src/three/renderer/controls/EnvironmentControls.js Outdated

               				this.inertiaTargetDistance = _vec.copy( pivotPoint ).sub( camera.position ).dot( _forward );
-              			} else if ( state === NONE ) {
+              			} else if ( state === NONE && ! this._doubleTapAnim ) {

Contributor

gkjohnson Jan 14, 2026

Same here - this check should not be needed. if the double tap has begun then all the residual inertia field should have been reset. Otherwise we'll run into a case where the "inertia" just begins again once the animation completes.


          Enhance double-tap zoom functionality in EnvironmentControls

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet