OrbitControls: Infinite Return of getZoomScale When window.devicePixelRatio < 1

[MasatoMakino]

Description

• Current Behavior: In the OrbitControls.js, specifically the getZoomScale function, the use of the bitwise operator window.devicePixelRatio | 0 causes an issue. When the browser's zoom level changes, and window.devicePixelRatio becomes less than 1, this operation evaluates to 0, leading to the getZoomScale function returning infinity. This results in incorrect camera movement upon mouse wheel operations.
• Location of Issue: getZoomScale function in OrbitControls.js
• Expected Behavior: Regardless of the window.devicePixelRatio value, the getZoomScale function should return a proper zoom scale, ensuring the camera moves correctly with mouse wheel operations.

Reproduction steps

1. Go to the Three.js OrbitControls example.
2. Change the browser's zoom level so that window.devicePixelRatio becomes less than 1.
3. Use the OrbitControls to operate the camera, attempting to zoom in and out using the mouse wheel.
4. Observe that in this state, getZoomScale returns infinity, leading to inaccurate camera movement.

Code

function getZoomScale( delta ) {
	const normalized_delta = Math.abs( delta ) / ( 100 * ( window.devicePixelRatio | 0 ) );
	return Math.pow( 0.95, scope.zoomSpeed * normalized_delta );
}

// If window.devicePixelRatio is less than 1, infinity is returned regardless of delta.

Live example

https://threejs.org/examples/#misc_controls_orbit

Change the browser's zoom level so that window.devicePixelRatio becomes less than 1. The camera jumps to minDistance or maxDistance with a single wheel operation.

Screenshots

No response

Version

v0.160.0

Device

Desktop

Browser

Chrome

OS

MacOS

[mrdoob]

/ping @sciecode

[MasatoMakino]

The issue related to the getZoomScale function in OrbitControls.js has been resolved in Pull Request #27446. The resolution was confirmed as the problem no longer reproduces in the live demo available here.