# \[OrbitControls\] Use touchmove instead of pinch for zooming

**URL:** <https://discourse.threejs.org/t/orbitcontrols-use-touchmove-instead-of-pinch-for-zooming/7017>\
**Category:** Questions\
**Tags:** orbit-controls\
**Created:** [April 11, 2019, 8:57am UTC](https://discourse.threejs.org/t/orbitcontrols-use-touchmove-instead-of-pinch-for-zooming/7017 "2019-04-11T08:57:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MorenoDD](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MorenoDD](https://discourse.threejs.org/u/MorenoDD)\
**Post date:** [April 11, 2019, 8:57am UTC](https://discourse.threejs.org/t/orbitcontrols-use-touchmove-instead-of-pinch-for-zooming/7017/1 "2019-04-11T08:57:27Z")

</div>

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:

> **[2018 - A Year In Review from Green Chameleon](https://2018.craftedbygc.com/)**
>
> With the hours, days and months flying by at lightning speed, we take a moment to dive into our 2018 time capsule and reflect on the year gone by.

Did you have any suggestion?

Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 11, 2019, 7:28pm UTC](https://discourse.threejs.org/t/orbitcontrols-use-touchmove-instead-of-pinch-for-zooming/7017/2 "2019-04-11T19:28:27Z")

</div>

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:

```auto
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/](https://jsfiddle.net/h6fkybdz/6/)

---

<div class="post-metadata">

**Author:** ![MorenoDD](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MorenoDD](https://discourse.threejs.org/u/MorenoDD)\
**Post date:** [April 12, 2019, 3:10pm UTC](https://discourse.threejs.org/t/orbitcontrols-use-touchmove-instead-of-pinch-for-zooming/7017/3 "2019-04-12T15:10:11Z")

</div>

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

https://codepen.io/MorenoDiDomenico/embed/preview/ZZyZJE?height=300&slug-hash=ZZyZJE&default-tabs=js,result&host=https://codepen.io

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 🙂