Three.js Pinch Zoom

Question

我想将Pinch Zoom添加到我的three.js全景播放器中。

我已经环顾四周，似乎TrackBallControls.js可能有这个内置？

我已经尝试过实施它，但我得到了

  

＆＃39;未捕获的TypeError：undefined不是函数＆＃39;

on

var controls = new THREE.TrackballControls( camera );

现在由于系统我不得不使用Sid.js动态加载所有Three.js脚本，这是为什么它似乎无法找到THREE.TrackballControls的原因？

这对于三人手机上的捏合和缩放是否是正确的解决方案？

Answer 1

TrackBallControls.js内置了触控缩放功能，相关代码如下;但是这些文件不是Three.js库的一部分。它仅存在于示例项目中。您可以找到源代码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

如果其他人需要代码我稍微修改了一下

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();

}