OrbitControls: Touch event crash - "Cannot read properties of undefined (reading 'x')"

[adamistheanswer]

Description

OrbitControls crashes intermittently on touch devices (tablets) during multi-touch gestures with the error:

TypeError: Cannot read properties of undefined (reading 'x')

This occurs in the _getSecondPointerPosition() method when handling two-finger pinch-to-zoom gestures.

Reproduction steps

1. Open a three.js scene with OrbitControls on a tablet device (Android)
2. Start a two-finger pinch gesture (pinch-to-zoom)
3. Lift one finger mid-gesture while the other finger remains touching
4. The error occurs sporadically when the second pointer position becomes undefined

Code

In OrbitControls.js, the _getSecondPointerPosition() method returns undefined when a pointer is no longer tracked:

// Line ~1407-1411
_getSecondPointerPosition( event ) {
    const pointerId = ( event.pointerId === this._pointers[ 0 ] ) ? this._pointers[ 1 ] : this._pointers[ 0 ];
    return this._pointerPositions[ pointerId ]; // Can return undefined!
}

This undefined value is then used without null checking in multiple places:

// Line ~1234-1238 (handleTouchMoveDolly)
const position = this._getSecondPointerPosition( event );
const dx = event.pageX - position.x; // ❌ Crash: position is undefined
const dy = event.pageY - position.y;

Similar crashes occur at:

• Line 1202-1204 (handleTouchStartRotate)
• Line 1221-1223 (handleTouchStartPan)
• Line 1269-1271 (handleTouchMoveRotate)
• Line 1298-1300 (handleTouchMovePan)
• Line 1317-1320 (handleTouchMoveDolly)

Live example

1. User starts two-finger gesture → both pointers tracked in _pointers array
2. User lifts one finger → pointer is removed from _pointers
3. Move event fires for remaining finger → tries to get second pointer position
4. _pointerPositions[pointerId] returns undefined because pointer was removed
5. Code attempts position.x → crash

Screenshots

No response

Version

v0.180.0

Device

Mobile

Browser

Chrome

OS

Android

[sciecode]

@Mugen87 I'm unable to reproduce this behavior.

On every instance of a pointer being removed, i correctly enter the single pointer variant of the event handler. The placeholder _onTouchStart re-enables the pointer information for the remaining active pointers.

This is the specific part that I can't replicate:

3. Move event fires for remaining finger → tries to get second pointer position

I never enter in control flow for the handlers that detect multiple pointers active, so the error doesn't happen. I have tried on Chrome for Android, and yet no luck.

I can infer what is happening, one of the removePointer events might not be tracking properly and the pointers array keeps a dangling entry, which triggers the error.

I cannot, however, say for sure how this happens.

[sciecode]

This section makes an assumption that the pointerID for pointerUp is equal to the pointerID processed during pointerDown, which is a correct assumption based on the specification. There is a possibility this could be an user-agent problem, but I cannot say for sure without being able to replicate.

three.js/examples/jsm/controls/OrbitControls.js

Lines 1363 to 1378 in e6084f9

	_removePointer( event ) {
	delete this._pointerPositions[ event.pointerId ];
	for ( let i = 0; i < this._pointers.length; i ++ ) {
	if ( this._pointers[ i ] == event.pointerId ) {
	this._pointers.splice( i, 1 );
	return;
	}
	}
	}

[Mugen87]

I never enter in control flow for the handlers that detect multiple pointers active, so the error doesn't happen. I have tried on Chrome for Android, and yet no luck.

Indeed. I have tested the issue on a Pixel 8a and latest Chrome with remote debugging today and I can't reproduce the issue as well. At least misc_controls_orbit works as expected, the browser console in the remote inspector is clean.

@adamistheanswer Can you tell us more about the environment you are using OrbitControls? Does your application maybe modify events in some way? Do you see the error with our misc_controls_orbit demo as well?