NASA-AMMOS / NASA-AMMOS/3DTilesRendererJS

Add middle-click + drag listener for ZOOM on EnvironmentControls

Open
#788 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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.deltaY motion with movementY, and apply to zoomDelta, 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.