From 7f06131ecf25e122ac4011d06ee082193abc9a39 Mon Sep 17 00:00:00 2001 From: Jonathan Chemla Date: Mon, 7 Oct 2024 13:13:12 +0200 Subject: [PATCH 1/2] Handle Middle Click Drag for Environment Control Handle Middle Click Drag for Environment Control --- src/three/controls/EnvironmentControls.js | 30 ++++++++++++++++------- src/three/controls/PointerTracker.js | 6 +++++ 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/three/controls/EnvironmentControls.js b/src/three/controls/EnvironmentControls.js index 8daad63cd..ea19789ab 100644 --- a/src/three/controls/EnvironmentControls.js +++ b/src/three/controls/EnvironmentControls.js @@ -284,6 +284,11 @@ export class EnvironmentControls extends EventDispatcher { const hit = this._raycast( raycaster ); if ( hit ) { + this.pivotPoint.copy( hit.point ); + this.pivotMesh.position.copy( hit.point ); + this.pivotMesh.updateMatrixWorld(); + this.scene.add( this.pivotMesh ); + // if two fingers, right click, or shift click are being used then we trigger // a rotation action to begin if ( @@ -294,20 +299,16 @@ export class EnvironmentControls extends EventDispatcher { this.setState( pointerTracker.isPointerTouch() ? WAITING : ROTATE ); - this.pivotPoint.copy( hit.point ); - this.pivotMesh.position.copy( hit.point ); - this.pivotMesh.updateMatrixWorld(); - this.scene.add( this.pivotMesh ); - } else if ( pointerTracker.isLeftClicked() ) { // if the clicked point is coming from below the plane then don't perform the drag this.setState( DRAG ); - this.pivotPoint.copy( hit.point ); - this.pivotMesh.position.copy( hit.point ); - this.pivotMesh.updateMatrixWorld(); - this.scene.add( this.pivotMesh ); + } else if ( pointerTracker.isMiddleClicked() ) { + + this.setState( ZOOM ); + this.zoomDirectionSet = false; + this._updateZoomDirection(); } @@ -399,6 +400,17 @@ export class EnvironmentControls extends EventDispatcher { } + // Add mouse click handle in pointerMove + if ( this.state === ZOOM ) { + + const delta = e.movementY; + // use LOG to scale the scroll delta and hopefully normalize them across platforms + const deltaSign = Math.sign( delta ); + const normalizedDelta = Math.log( Math.abs( delta ) + 1 ); + this.zoomDelta -= 3 * deltaSign * normalizedDelta * 1; + + } + }; const pointerupCallback = e => { diff --git a/src/three/controls/PointerTracker.js b/src/three/controls/PointerTracker.js index 72f5d1898..75731d9ee 100644 --- a/src/three/controls/PointerTracker.js +++ b/src/three/controls/PointerTracker.js @@ -254,4 +254,10 @@ export class PointerTracker { } + isMiddleClicked() { + + return Boolean( this.buttons & 4 ); + + } + } From fdf6e135bc35cbd25f3db902a44a5d273e7733d0 Mon Sep 17 00:00:00 2001 From: Jonathan Chemla Date: Mon, 7 Oct 2024 14:18:23 +0200 Subject: [PATCH 2/2] Remove log + these two calls are not necessary: ```js // this._updateZoomDirection(); // this.needsUpdate = true; ``` --- src/three/controls/EnvironmentControls.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/three/controls/EnvironmentControls.js b/src/three/controls/EnvironmentControls.js index ea19789ab..43180789f 100644 --- a/src/three/controls/EnvironmentControls.js +++ b/src/three/controls/EnvironmentControls.js @@ -403,11 +403,7 @@ export class EnvironmentControls extends EventDispatcher { // Add mouse click handle in pointerMove if ( this.state === ZOOM ) { - const delta = e.movementY; - // use LOG to scale the scroll delta and hopefully normalize them across platforms - const deltaSign = Math.sign( delta ); - const normalizedDelta = Math.log( Math.abs( delta ) + 1 ); - this.zoomDelta -= 3 * deltaSign * normalizedDelta * 1; + this.zoomDelta -= 2 * e.movementY; }