I want to add Pinch Zoom to my three.js panorama player.

I've had a look around and it seems TrackBallControls.js might have this build in?

I've tried implementing it, however I'm getting a

'Uncaught TypeError: undefined is not a function'

on

var controls = new THREE.TrackballControls( camera );

Now because of the system I'm having to load all Three.js scripts dynamically using Sid.js, would this be a reason why it can't seem to find THREE.TrackballControls?

Is this even the right solution for pinch and zoom on mobile in Three?

I want to add Pinch Zoom to my three.js panorama player.

I've had a look around and it seems TrackBallControls.js might have this build in?

I've tried implementing it, however I'm getting a

'Uncaught TypeError: undefined is not a function'

on

var controls = new THREE.TrackballControls( camera );

Now because of the system I'm having to load all Three.js scripts dynamically using Sid.js, would this be a reason why it can't seem to find THREE.TrackballControls?

Is this even the right solution for pinch and zoom on mobile in Three?

• javascript
• mobile
• three.js

2 Answers 2

TrackBallControls.js does have touch zoom built in, relevant code below; however the files is not a part of the Three.js library. It only exists in the example projects. You can find the source code here.

function touchstart( event ) {

    if ( _this.enabled === false ) return;

    switch ( event.touches.length ) {

        case 1:
            _state = STATE.TOUCH_ROTATE;
            _rotateStart.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
            _rotateEnd.copy( _rotateStart );
            break;

        case 2:
            _state = STATE.TOUCH_ZOOM_PAN;
            var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
            var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
            _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );

            var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
            var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
            _panStart.copy( getMouseOnScreen( x, y ) );
            _panEnd.copy( _panStart );
            break;

        default:
            _state = STATE.NONE;

    }
    _this.dispatchEvent( startEvent );


}

function touchmove( event ) {

    if ( _this.enabled === false ) return;

    event.preventDefault();
    event.stopPropagation();

    switch ( event.touches.length ) {

        case 1:
            _rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
            break;

        case 2:
            var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
            var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
            _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );

            var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
            var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
            _panEnd.copy( getMouseOnScreen( x, y ) );
            break;

        default:
            _state = STATE.NONE;

    }

}

function touchend( event ) {

    if ( _this.enabled === false ) return;

    switch ( event.touches.length ) {

        case 1:
            _rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
            _rotateStart.copy( _rotateEnd );
            break;

        case 2:
            _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

            var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
            var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
            _panEnd.copy( getMouseOnScreen( x, y ) );
            _panStart.copy( _panEnd );
            break;

    }

    _state = STATE.NONE;
    _this.dispatchEvent( endEvent );

}

If anyone else needs the code I modified it a bit

function onDocumentTouchStart(event) {

    if (event.touches.length == 1) {

        console.log('1');
        event.preventDefault();


        onPointerDownPointerX = event.touches[0].pageX;
        onPointerDownPointerY = event.touches[0].pageY;

        onPointerDownLon = lon;
        onPointerDownLat = lat;

        detectHotspotClick();

    }

    if (event.touches.length == 2) {

        console.log('2');
        _state = STATE.TOUCH_ZOOM_PAN;
        var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
        var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
        _touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );

    }

}

function onDocumentTouchMove(event) {

    if (event.touches.length == 1) {

        event.preventDefault();

        lon = (onPointerDownPointerX - event.touches[0].pageX) * 0.1 + onPointerDownLon;
        lat = (event.touches[0].pageY - onPointerDownPointerY) * 0.1 + onPointerDownLat;

    }

    if (event.touches.length == 2) {

           var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
           var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
           _touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );

        var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
        _touchZoomDistanceStart = _touchZoomDistanceEnd;
        setZoom(camera.fov * factor);

    }

}

function onDocumentTouchEnd( event ) {

            _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

}

function setZoom(fov){

    camera.fov = fov;

    if(camera.fov < 30) camera.fov = 30;
    if(camera.fov > 100) camera.fov = 100;

    camera.updateProjectionMatrix();

}