From 529d5ddd2d39bcc934dce35f3fbdd84eaabfa1b4 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Fri, 21 Mar 2025 16:30:20 +0900 Subject: [PATCH] Controls: Require element in connect() --- editor/js/EditorControls.js | 28 ++++++++++++++------ editor/js/Viewport.js | 7 +++-- examples/jsm/controls/ArcballControls.js | 6 +++-- examples/jsm/controls/DragControls.js | 6 +++-- examples/jsm/controls/FirstPersonControls.js | 6 +++-- examples/jsm/controls/FlyControls.js | 6 +++-- examples/jsm/controls/OrbitControls.js | 6 +++-- examples/jsm/controls/PointerLockControls.js | 6 +++-- examples/jsm/controls/TrackballControls.js | 6 +++-- examples/jsm/controls/TransformControls.js | 6 +++-- src/extras/Controls.js | 17 +++++++++++- 11 files changed, 73 insertions(+), 27 deletions(-) diff --git a/editor/js/EditorControls.js b/editor/js/EditorControls.js index 8ae3c6a5817748..e242dab772fbb1 100644 --- 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,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 diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index f832b7f64b6a98..c3b54d4e65e879 100644 --- 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 index eadfebc9b91d2d..340e6b678b952f 100644 --- 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 index b72d6e90d6653e..e7919020a77a19 100644 --- 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 index 5cbfd1e744221e..6c45b1c0bce762 100644 --- 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 index a56e7f5e1b9ff4..9c2060bf437df2 100644 --- 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 index d88f1f059ce036..66fe50e969da8a 100644 --- a/examples/jsm/controls/OrbitControls.js +++ b/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 ); diff --git a/examples/jsm/controls/PointerLockControls.js b/examples/jsm/controls/PointerLockControls.js index 5c433be7b1dbb0..5d3953519cc737 100644 --- 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 index 1a1103f290388d..9b0fdd849fd2c3 100644 --- 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 index 7a438fc88aaa3c..0c53d52d645071 100644 --- 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 index 2bf49cf27fa179..4c170c80cd2156 100644 --- 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.