Controls: Require element in connect() (#30772)

editor/js/EditorControls.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 
 class EditorControls extends THREE.EventDispatcher {
 
-	constructor( object, domElement ) {
+	constructor( object ) {
 
 		super();
 
@@ -34,6 +34,8 @@ class EditorControls extends THREE.EventDispatcher {
 		var pointers = [];
 		var pointerPositions = {};
 
+		var domElement = null;
+
 		// events
 
 		var changeEvent = { type: 'change' };
@@ -269,7 +271,21 @@ class EditorControls extends THREE.EventDispatcher {
 
 		}
 
-		this.dispose = function () {
+		this.connect = function ( element ) {
+
+			if ( domElement !== null ) this.disconnect();
+
+			domElement = element;
+
+			domElement.addEventListener( 'contextmenu', contextmenu );
+			domElement.addEventListener( 'dblclick', onMouseUp );
+			domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
+
+			domElement.addEventListener( 'pointerdown', onPointerDown );
+
+		};
+
+		this.disconnect = function () {
 
 			domElement.removeEventListener( 'contextmenu', contextmenu );
 			domElement.removeEventListener( 'dblclick', onMouseUp );
@@ -277,13 +293,9 @@ class EditorControls extends THREE.EventDispatcher {
 
 			domElement.removeEventListener( 'pointerdown', onPointerDown );
 
-		};
+			domElement = null;
 
-		domElement.addEventListener( 'contextmenu', contextmenu );
-		domElement.addEventListener( 'dblclick', onMouseUp );
-		domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
-
-		domElement.addEventListener( 'pointerdown', onPointerDown );
+		};
 
 		// touch
 

editor/js/Viewport.js

@@ -74,7 +74,7 @@ function Viewport( editor ) {
 	let objectRotationOnDown = null;
 	let objectScaleOnDown = null;
 
-	const transformControls = new TransformControls( camera, container.dom );
+	const transformControls = new TransformControls( camera );
 	transformControls.addEventListener( 'axis-changed', function () {
 
 		if ( editor.viewportShading !== 'realistic' ) render();
@@ -274,7 +274,7 @@ function Viewport( editor ) {
 	// controls need to be added *after* main logic,
 	// otherwise controls.enabled doesn't work.
 
-	const controls = new EditorControls( camera, container.dom );
+	const controls = new EditorControls( camera );
 	controls.addEventListener( 'change', function () {
 
 		signals.cameraChanged.dispatch( camera );
@@ -345,6 +345,9 @@ function Viewport( editor ) {
 
 		}
 
+		controls.connect( newRenderer.domElement );
+		transformControls.connect( newRenderer.domElement );
+
 		renderer = newRenderer;
 
 		renderer.setAnimationLoop( animate );

examples/jsm/controls/ArcballControls.js

@@ -441,13 +441,15 @@ class ArcballControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 		}
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.style.touchAction = 'none';
 		this._devPxRatio = window.devicePixelRatio;

examples/jsm/controls/DragControls.js

@@ -122,13 +122,15 @@ class DragControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 		}
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.addEventListener( 'pointermove', this._onPointerMove );
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );

examples/jsm/controls/FirstPersonControls.js

@@ -164,7 +164,7 @@ class FirstPersonControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 			this.handleResize();
 
@@ -174,7 +174,9 @@ class FirstPersonControls extends Controls {
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		window.addEventListener( 'keydown', this._onKeyDown );
 		window.addEventListener( 'keyup', this._onKeyUp );

examples/jsm/controls/FlyControls.js

@@ -89,13 +89,15 @@ class FlyControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 		}
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		window.addEventListener( 'keydown', this._onKeyDown );
 		window.addEventListener( 'keyup', this._onKeyUp );

examples/jsm/controls/OrbitControls.js

@@ -453,7 +453,7 @@ class OrbitControls extends Controls {
 
 		if ( this.domElement !== null ) {
 
-			this.connect();
+			this.connect( this.domElement );
 
 		}
 
@@ -461,7 +461,9 @@ class OrbitControls extends Controls {
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.addEventListener( 'pointercancel', this._onPointerUp );

examples/jsm/controls/PointerLockControls.js

@@ -109,13 +109,15 @@ class PointerLockControls extends Controls {
 
 		if ( this.domElement !== null ) {
 
-			this.connect();
+			this.connect( this.domElement );
 
 		}
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
 		this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );

examples/jsm/controls/TrackballControls.js

@@ -257,7 +257,7 @@ class TrackballControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 			this.handleResize();
 
@@ -268,7 +268,9 @@ class TrackballControls extends Controls {
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		window.addEventListener( 'keydown', this._onKeyDown );
 		window.addEventListener( 'keyup', this._onKeyUp );

examples/jsm/controls/TransformControls.js

@@ -358,13 +358,15 @@ class TransformControls extends Controls {
 
 		if ( domElement !== null ) {
 
-			this.connect();
+			this.connect( domElement );
 
 		}
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.addEventListener( 'pointermove', this._onPointerHover );

src/extras/Controls.js

@@ -77,8 +77,23 @@ class Controls extends EventDispatcher {
 	/**
 	 * Connects the controls to the DOM. This method has so called "side effects" since
 	 * it adds the module's event listeners to the DOM.
+	 *
+	 * @param {HTMLDOMElement} element - The DOM element to connect to.
 	 */
-	connect() {}
+	connect( element ) {
+
+		if ( element === undefined ) {
+
+			console.warn( 'THREE.Controls: connect() now requires an element.' );
+			return;
+
+		}
+
+		if ( this.domElement !== null ) this.disconnect();
+
+		this.domElement = element;
+
+	}
 
 	/**
 	 * Disconnects the controls from the DOM.