NASA-AMMOS / NASA-AMMOS/3DTilesRendererJS
Add middle-click + drag listener for ZOOM on EnvironmentControls
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2.5k
- Forks
- 416
- Avg merge
- 17h 52m
- Merged PRs (30d)
- 37
Description
Is your feature request related to a problem? Please describe.
The EnvironmentControls parses left and right clicks + mouse-wheel events, (Quick note, the SHIFT + LEFT_CLICK did not trigger rotate during my tests). It could be nice if these controls could also parse Middle click for zoom - the awy it is done in googleMapsAerial within OrbitControls
Describe the solution you'd like
Web/API/Pointer_events suggest adding to PointerTracker.js
isMiddleClicked() {
return Boolean( this.buttons & 4 );
}
And then this could probably resort to something like the following addition to EnvironmentControls.js - pointerdownCallback
else if ( pointerTracker.isMiddleClicked() ) {
// if the clicked point is coming from below the plane then don't perform the drag
this.setState( ZOOM );
this.zoomDirectionSet = false;
this._updateZoomDirection();
// The below could be shared on top if the `if (hit)` block
this.pivotPoint.copy( hit.point );
this.pivotMesh.position.copy( hit.point );
this.pivotMesh.updateMatrixWorld();
this.scene.add( this.pivotMesh );
}
Finally,
- or replicate somehow the wheelCallback and replace how it handles event cursor
e.deltaYmotion withmovementY, and apply tozoomDelta, but build this into pointermoveCallback:
const pointermoveCallback = e => {
// ...
// Add mouse click handle in pointerMove
if ( this.state === ZOOM ) {
console.log( 'MOUSE MIDDLE CLICKED: ', e, e.deltaMode, e.deltaY );
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.needsUpdate = true;
}
Describe alternatives you've considered
Use another controls, like Pivot controls instead of EnvironmentControls to handle middle-mouse click
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with PointerTracker.js and EnvironmentControls.js, especially pointerdownCallback, pointermoveCallback, and wheelCallback. Compare the existing behavior with OrbitControls in the linked googleMapsAerial example, then verify that middle-button dragging zooms around the selected pivot without changing existing click or wheel controls. Check the project’s existing examples or tests for regressions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, three.js
- Domain
- computer-graphics
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100