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

mrdoob · web-flow · commit db7233612cb0 · 2025-03-21T16:49:59.000+09:00
diff --git a/editor/js/EditorControls.js b/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,21 +271,31 @@ 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 );
 			domElement.removeEventListener( 'wheel', onMouseWheel );
 
 			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
 
diff --git a/editor/js/Viewport.js b/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 );
diff --git a/examples/jsm/controls/ArcballControls.js b/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;
diff --git a/examples/jsm/controls/DragControls.js b/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 );
diff --git a/examples/jsm/controls/FirstPersonControls.js b/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 );
diff --git a/examples/jsm/controls/FlyControls.js b/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 );
diff --git a/examples/jsm/controls/OrbitControls.js b/examples/jsm/controls/OrbitControls.js
@@ -453,15 +453,17 @@ class OrbitControls extends Controls {
 
 		if ( this.domElement !== null ) {
 
-			this.connect();
+			this.connect( this.domElement );
 
 		}
 
 		this.update();
 
 	}
 
-	connect() {
+	connect( element ) {
+
+		super.connect( element );
 
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.addEventListener( 'pointercancel', this._onPointerUp );
diff --git a/examples/jsm/controls/PointerLockControls.js b/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 );
diff --git a/examples/jsm/controls/TrackballControls.js b/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 );
diff --git a/examples/jsm/controls/TransformControls.js b/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 );
diff --git a/src/extras/Controls.js b/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.

Original file line number	Diff line number	Diff line change
`@@ -441,13 +441,15 @@ class ArcballControls extends Controls {`
`441`	`441`
`442`	`442`	`if ( domElement !== null ) {`
`443`	`443`
`444`		`- this.connect();`
	`444`	`+ this.connect( domElement );`
`445`	`445`
`446`	`446`	`}`
`447`	`447`
`448`	`448`	`}`
`449`	`449`
`450`		`- connect() {`
	`450`	`+ connect( element ) {`
	`451`	`+`
	`452`	`+ super.connect( element );`
`451`	`453`
`452`	`454`	`this.domElement.style.touchAction = 'none';`
`453`	`455`	`this._devPxRatio = window.devicePixelRatio;`
Original file line number	Diff line number	Diff line change
`@@ -122,13 +122,15 @@ class DragControls extends Controls {`
`122`	`122`
`123`	`123`	`if ( domElement !== null ) {`
`124`	`124`
`125`		`- this.connect();`
	`125`	`+ this.connect( domElement );`
`126`	`126`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`}`
`130`	`130`
`131`		`- connect() {`
	`131`	`+ connect( element ) {`
	`132`	`+`
	`133`	`+ super.connect( element );`
`132`	`134`
`133`	`135`	`this.domElement.addEventListener( 'pointermove', this._onPointerMove );`
`134`	`136`	`this.domElement.addEventListener( 'pointerdown', this._onPointerDown );`
Original file line number	Diff line number	Diff line change
`@@ -89,13 +89,15 @@ class FlyControls extends Controls {`
`89`	`89`
`90`	`90`	`if ( domElement !== null ) {`
`91`	`91`
`92`		`- this.connect();`
	`92`	`+ this.connect( domElement );`
`93`	`93`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`}`
`97`	`97`
`98`		`- connect() {`
	`98`	`+ connect( element ) {`
	`99`	`+`
	`100`	`+ super.connect( element );`
`99`	`101`
`100`	`102`	`window.addEventListener( 'keydown', this._onKeyDown );`
`101`	`103`	`window.addEventListener( 'keyup', this._onKeyUp );`
Original file line number	Diff line number	Diff line change
`@@ -453,15 +453,17 @@ class OrbitControls extends Controls {`
`453`	`453`
`454`	`454`	`if ( this.domElement !== null ) {`
`455`	`455`
`456`		`- this.connect();`
	`456`	`+ this.connect( this.domElement );`
`457`	`457`
`458`	`458`	`}`
`459`	`459`
`460`	`460`	`this.update();`
`461`	`461`
`462`	`462`	`}`
`463`	`463`
`464`		`- connect() {`
	`464`	`+ connect( element ) {`
	`465`	`+`
	`466`	`+ super.connect( element );`
`465`	`467`
`466`	`468`	`this.domElement.addEventListener( 'pointerdown', this._onPointerDown );`
`467`	`469`	`this.domElement.addEventListener( 'pointercancel', this._onPointerUp );`
Original file line number	Diff line number	Diff line change
`@@ -109,13 +109,15 @@ class PointerLockControls extends Controls {`
`109`	`109`
`110`	`110`	`if ( this.domElement !== null ) {`
`111`	`111`
`112`		`- this.connect();`
	`112`	`+ this.connect( this.domElement );`
`113`	`113`
`114`	`114`	`}`
`115`	`115`
`116`	`116`	`}`
`117`	`117`
`118`		`- connect() {`
	`118`	`+ connect( element ) {`
	`119`	`+`
	`120`	`+ super.connect( element );`
`119`	`121`
`120`	`122`	`this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );`
`121`	`123`	`this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );`
Original file line number	Diff line number	Diff line change
`@@ -358,13 +358,15 @@ class TransformControls extends Controls {`
`358`	`358`
`359`	`359`	`if ( domElement !== null ) {`
`360`	`360`
`361`		`- this.connect();`
	`361`	`+ this.connect( domElement );`
`362`	`362`
`363`	`363`	`}`
`364`	`364`
`365`	`365`	`}`
`366`	`366`
`367`		`- connect() {`
	`367`	`+ connect( element ) {`
	`368`	`+`
	`369`	`+ super.connect( element );`
`368`	`370`
`369`	`371`	`this.domElement.addEventListener( 'pointerdown', this._onPointerDown );`
`370`	`372`	`this.domElement.addEventListener( 'pointermove', this._onPointerHover );`