yomotsu / camera-controls

A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features.

Home Page:https://yomotsu.github.io/camera-controls/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slow pinch-zoom when using orthographic camera

diredev opened this issue · comments

Describe the bug

Using the pinch gesture to zoom the scene works great when using a perspective camera.
If I use the gesture with an orthographic camera however, the camera moves very slowly, making the gesture pretty much unusable.

This is easily reproducible on mobile devices, I've tested it on both on iPad Pro 11 and an Android phone.

To Reproduce

Steps to reproduce the behavior:

  1. Launch the "orthographic" camera example on a mobile device
  2. Zoom using the pinch gesture

Code

No response

Live example

No response

Expected behavior

Should zoom at a reasonable speed even in orthographic mode.

Screenshots or Video

No response

Device

Mobile

OS

MacOS, Android

Browser

Chrome, Safari

Thank you for your report.
The problem has been reproduced.

I will take a look, but sorry, I don't have much time at this moment. It may take some time.

Hi @yomotsu

I have been facing the same issue of zoom in ortho camera. Can you point me in a direction where I can take a look so that I can take a dig at this issue?

Regards
Srinivas

Hi @yomotsu

Any help on this will be appreciated!

sorry for the loooooong delay...
I checked the passed the delta value when internal zoom happens:

protected _zoomInternal = ( delta: number, x: number, y: number ): void => {

left is with a mouse wheel, and right is touch.
image

seems the value is not much different on both sides.
but mouse wheel events happened more frequently if my investigation is correct...

What we could do is that:
Accelerate the delta a little bit, If the internalZoom is called from touch events.
(but not sure...

if (
( this._state & ACTION.TOUCH_DOLLY ) === ACTION.TOUCH_DOLLY ||
( this._state & ACTION.TOUCH_ZOOM ) === ACTION.TOUCH_ZOOM ||
( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
( this._state & ACTION.TOUCH_ZOOM_TRUCK ) === ACTION.TOUCH_ZOOM_TRUCK ||
( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET ||
( this._state & ACTION.TOUCH_ZOOM_OFFSET ) === ACTION.TOUCH_ZOOM_OFFSET ||
( this._state & ACTION.TOUCH_DOLLY_ROTATE ) === ACTION.TOUCH_DOLLY_ROTATE ||
( this._state & ACTION.TOUCH_ZOOM_ROTATE ) === ACTION.TOUCH_ZOOM_ROTATE
) {
const dx = _v2.x - this._activePointers[ 1 ].clientX;
const dy = _v2.y - this._activePointers[ 1 ].clientY;
const distance = Math.sqrt( dx * dx + dy * dy );
const dollyDelta = dollyStart.y - distance;
dollyStart.set( 0, distance );
const dollyX = this.dollyToCursor ? ( lastDragPosition.x - this._elementRect.x ) / this._elementRect.width * 2 - 1 : 0;
const dollyY = this.dollyToCursor ? ( lastDragPosition.y - this._elementRect.y ) / this._elementRect.height * - 2 + 1 : 0;
if (
( this._state & ACTION.TOUCH_DOLLY ) === ACTION.TOUCH_DOLLY ||
( this._state & ACTION.TOUCH_DOLLY_ROTATE ) === ACTION.TOUCH_DOLLY_ROTATE ||
( this._state & ACTION.TOUCH_DOLLY_TRUCK ) === ACTION.TOUCH_DOLLY_TRUCK ||
( this._state & ACTION.TOUCH_DOLLY_OFFSET ) === ACTION.TOUCH_DOLLY_OFFSET
) {
this._dollyInternal( dollyDelta * TOUCH_DOLLY_FACTOR, dollyX, dollyY );
this._isUserControllingDolly = true;
} else {
this._zoomInternal( dollyDelta * TOUCH_DOLLY_FACTOR, dollyX, dollyY );
this._isUserControllingZoom = true;
}

Thanks @yomotsu :) Sorry for my late reply, ill take a look based on your inputs :) I appreciate your help on this!

This helped me fix it for mobile devices. But the same pinch zoom slowness is observed when using the trackpad to pinch zoom on laptops in the orthographic mode. What solution would you suggest ?

This should definitely be configurable by a factor provided by the user. Is there any way of fixing this currently? It's quite unusable right now.

After further testing, this issue is only affecting tablets and not smartphones.