TrackballControls not working due to bounding box problem

Describe the bug

I was trying to use TrackballControls as a drop-in replacement for OrbitControls but it does not work at all. Using the mouse does nothing. I loaded them as a modules.

To Reproduce

Steps to reproduce the behavior:

1. Replace OrbitControls with TrackballControls
2. Try to rotate the view
3. No rotation is happening

Code (TrackballControls.js) What happens is that the code inside getMouseOnCircle for finding the mouse position is always zeros . This results to the function returning Infinity for vector (division by zero). Using the following code fixes that problem:

	var getMouseOnCircle = ( function () {

		var vector = new Vector2();

		return function getMouseOnCircle( pageX, pageY ) {

			const elem = scope.domElement;
			
			// Updated version!
			vector.set(
				( ( pageX - elem.clientWidth * 0.5 - elem.offsetLeft ) / ( elem.clientWidth * 0.5 ) ),
				( ( elem.clientHeight + 2 * ( elem.offsetTop - pageY ) ) / elem.clientWidth ) // screen.width intentional
			);
			
			return vector;

		};

	}() );

Another problem as a drop-in replacement is that scope.update(); is not called on mouse events. This prevents the on change event from occurring “scope.dispatchEvent( changeEvent );” and thus never updates the animation loop in my normal code. Adding an update of the scope corrects this behaviour and is smilar to how OrbitControls works:

	function onMouseMove( event ) {

		...
		
		scope.update();
	}

Fixing those things resolves some problems and TrackballControls works as a drop-in replacement. However this is not all as there are problems with mouse wheel scrolling as well. First of all the scope need to be updated here as well. But then there is another bug happening to me. I use the scroll wheel. The view is zoomed as expected. But when followed by rotation, the view is suddenly zoomed in a short burst and by a far distance.

Platform:

• Device: [Desktop]
• OS: [Linux]
• Browser: [Chrome, Firefox]
• Three.js version: [0.126.1]

[WestLangley]

@jjoakim TrackballControls requires controls.update(); in an animation loop. Is that what you are missing?

[jjoakim]

@jjoakim In #18483, I incorporated all of the TrackballControls functionality (but with simplified math logic) into the more-complete OrbitControls so they would share the same codebase, but unfortunately, the PR was blocked.

You can find the code archived here. It may provide a more reliable drop-in replacement.

The leading issue for this topic is #18496.

Thank you for letting me know. It feels like I have wasted several hours for nothing now. I will not spend any more effort on this bug report as it has turned out it was pretty much pointless to begin with.

I will add my point of view to #18496.