Pinch Zoom Functionality in Three.js

Question

Pinch Zoom Functionality in Three.js

I’m looking to incorporate Pinch Zoom functionality into my three.js panorama viewer.

After some research, it appears that TrackBallControls.js might have this feature built in?

I attempted to implement it, but encountered an error:

'Uncaught TypeError: undefined is not a function'

specifically on the line:

var controls = new THREE.TrackballControls( camera );

Since I am dynamically loading all Three.js scripts using Sid.js due to the nature of my system, could that be why it’s unable to locate THREE.TrackballControls?

Furthermore, is TrackBallControls the right solution for pinch and zoom functionality on mobile devices within a Three.js environment?

javascript mobile three.js

Answer 1

Answer №1

The TrackBallControls.js library does include touch zoom functionality, as shown in the code snippet below. However, this library is not integrated into the core Three.js package; it's only available in the example projects. You can access 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 );

}

Answer 2

The TrackBallControls.js library does include touch zoom functionality, as shown in the code snippet below. However, this library is not integrated into the core Three.js package; it's only available in the example projects. You can access 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 );

}

Answer 3

Answer №2

If someone requires the code, I've made some adjustments to it

function handleTouchStart(event) {

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

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

        initPointerX = event.touches[0].pageX;
        initPointerY = event.touches[0].pageY;

        initLon = lon;
        initLat = lat;

        checkHotspotClick();

    }

    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 handleTouchMove(event) {

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

        event.preventDefault();

        lon = (initPointerX - event.touches[0].pageX) * 0.1 + initLon;
        lat = (event.touches[0].pageY - initPointerY) * 0.1 + initLat;

    }

    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;
        adjustZoom(camera.fov * factor);

    }

}

function handleTouchEnd(event) {

            _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

}

function adjustZoom(fov){

    camera.fov = fov;

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

    camera.updateProjectionMatrix();

}

Answer 4

If someone requires the code, I've made some adjustments to it

function handleTouchStart(event) {

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

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

        initPointerX = event.touches[0].pageX;
        initPointerY = event.touches[0].pageY;

        initLon = lon;
        initLat = lat;

        checkHotspotClick();

    }

    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 handleTouchMove(event) {

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

        event.preventDefault();

        lon = (initPointerX - event.touches[0].pageX) * 0.1 + initLon;
        lat = (event.touches[0].pageY - initPointerY) * 0.1 + initLat;

    }

    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;
        adjustZoom(camera.fov * factor);

    }

}

function handleTouchEnd(event) {

            _touchZoomDistanceStart = _touchZoomDistanceEnd = 0;

}

function adjustZoom(fov){

    camera.fov = fov;

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

    camera.updateProjectionMatrix();

}

Pinch Zoom Functionality in Three.js

Answer №1

Answer №2

Similar questions

What is the most effective way to use checkboxes to apply multiple filters to an array of objects?

What is the process for displaying a PHP array in HTML5 audio and video players?

Strange behavior of shadows within Three.js

Activate the "order evaluation" trigger on the checkout page in Woocommerce

Is it possible to include numbers and commas in JQuery Validation?

Need help with writing code in Angular for setting intervals and clearing intervals?

The issue of React state not being properly updated in Jest tests, even though it functions correctly in

Enhancing Numbers with JavaScript

React Apollo Error - When using refetchQueries, data does not re-render in one component but does so in another. Surprisingly, it works when the refetchQueries is in the same

Leveraging Express.js alongside websockets

Steps for uploading an item to an API using an Excel document

The API for /api/addproducts has been resolved without a response being sent, potentially causing delays in processing requests

Troubleshooting Selenium JS: Challenges with Locating Elements Across Pages

Converting DateTime objects into JSON format for use in AJAX calls

Navigating Through Secondary Navigation with Ease

Sending data from TextBoxFor to controller with @Ajax.ActionLink in MVC

The issue lies within the representation of the vector's projection

Guide on Incorporating Coffeescript into the Node.js Blueprint Framework

The search for the view in the directory "/views" was unsuccessful in Express 4.0

Is it possible to access a service within the config function or access a provider from inside a service?