DragControls/OrbitControls/TrackballControls: wheel/touchmove/touchstart add { passive: false }

[puxiao]

Related issue: null

Description

What?

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

Why?

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

passive

A Boolean that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners

Improving scrolling performance with passive listeners

To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the passive option to true for the touchstart and touchmove events on the document-level nodes Window, Document, and Document.body. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.

Browser compatibility

So...

DragControls.js

-	_domElement.addEventListener( 'touchmove', onTouchMove );
-	_domElement.addEventListener( 'touchstart', onTouchStart );

+	_domElement.addEventListener( 'touchmove', onTouchMove, { passive: false } );
+	_domElement.addEventListener( 'touchstart', onTouchStart, { passive: false } );

OrbitControls.js

-	scope.domElement.removeEventListener( 'wheel', onMouseWheel );
-	scope.domElement.removeEventListener( 'touchstart', onTouchStart );
-	scope.domElement.removeEventListener( 'touchmove', onTouchMove );

+	scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+	scope.domElement.addEventListener( 'touchstart', onTouchStart, { passive: false } );
+	scope.domElement.addEventListener( 'touchmove', onTouchMove, { passive: false } );

TrackballControls.js

-	this.domElement.addEventListener( 'wheel', mousewheel );
-	this.domElement.addEventListener( 'touchstart', touchstart );
-	this.domElement.addEventListener( 'touchmove', touchmove );

+	this.domElement.addEventListener( 'wheel', mousewheel, { passive: false } );
+	this.domElement.addEventListener( 'touchstart', touchstart, { passive: false } );
+	this.domElement.addEventListener( 'touchmove', touchmove, { passive: false } );

[Mugen87]

Related #19782.

I guess the last PR was not merged because of some confusion about capture. I guess this looks more what @mrdoob had in mind.

[mrdoob]

Thanks!

[mrdoob]

/cc @WestLangley