[OrbitControls] Use touchmove instead of pinch for zooming

Questions
1

Hi folks,
I would like to change the default behaviour of the OrbitControls.
My needs is to use touchmove instead of pinch for zooming on mobile devices.

I see that the function onTouchMove() (which call handleTouchMoveDolly()) is triggered when you use two fingers.

Take a look at this reference:

Did you have any suggestion?

Thanks.

2

Instead of using THREE.OrbitControls, have you considered to use a custom control for mobile devices? As far as I can see, the website uses the orientation of the device in order to rotate the camera and touch input for dollying. You can achieve the latter one by using two event listeners for the touchstart and touchmove events. With a few lines of code, you can compute a delta value that translates the camera along the z-axis. The idea is this basic pattern:

var startY;

function onTouchStart(event) {

    startY = event.touches[ 0 ].pageY;

}

function onTouchMove( event ) {

    var deltaY = ( event.touches[ 0 ].pageY - startY );
    
    camera.position.z += ( deltaY * speed );

}

Live demo (works only for touch devices): https://jsfiddle.net/h6fkybdz/6/

1 Like
3

Thanks for your reply! As you suggested I created a custom control.

I’d like to improve the scroll with a better smooth animation and also I’m experiencing an issue with the opacity of the images, which is calculated to fade in.

Did you have any suggestion for this?

Thanks :slight_smile: