TrackballControls not working due to bounding box problem

[jjoakim]

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]

[Mugen87]

Please use the fourm for help requests. Also demonstrate with a complete live example what you are doing.

Keep in mind that you can't just replace the ctor call of OrbitControls with TrackballControls since the classes have different implementations/APIs.

[jjoakim]

I spent a lot of time trying to find the cause of the bug and to see what was needed in order to fix it. What I reported was what is correctly broken in TrackballControls.js and what is needed for it to work correctly. I do not require any forum assistance and I have no idea why this was brought up? After fixing those bug with TrackballControls it worked well enough by simply replacing the two classes with each other without any further alterations. Why would such a behaviour be undesirable?

I spent a lot of time on it already and did not have more time at the moment but I was already planning to include a stripped down example of my current project when I have more time to spend on it. Flat out closing a bug report is not really a good way of motivating a developer who tries to help and contribute to the project.

[Mugen87]

Sorry but there are often issues reported at GitHub which could be clarified at the forum first.

If you want to demonstrate a bug, it's best to do this with a live example/small test case. This makes it easier for everyone to understand and comprehend a potential issue.

You can use this fiddle as a starter template: https://jsfiddle.net/4Ltpdbv7/

[mrdoob]

Indeed! Would be great if you can provide a link that shows the issue.

More often than not, when the person reporting the bugs puts together the example they realize the bug was on their side.

[WestLangley]

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

[jjoakim]

I will come back later with a working+bugged example as I have fully understood the problem. There is a inconsistency in how TrackballControls handles the bounding box of the element compared to OrbitControls. TrackballControls only reads this information as it is constructed. I guess my problem is that my parent element is probably not visible at the time TrackballControls is created leading to getBoundingClientRect to return zero for all parameters. OrbitControls on the other hands reads this information directly from scope.domElement at each update thus always using the correct and up-to-date values. This is why my suggested correction to TrackballControls works. There are no good reasons why the two APIs should operate differently in their respective implementation.

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

Yes and no. I already found this information from google as people are have enough problems with it but it did not help me much as my main problem is caused by what I described above. However, it would be great if it was included in TrackballControls in a similar style to OrbitControls as it would help make things consistent and easy to understand!!

[WestLangley]

@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.

[Mugen87]

The leading issue for this topic is #18496.

[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.