TrackballControls - Touch Support

[JGeerWM]

Are there any plans to add Touch Support to TrackballControls.js? I am looking to use the pinch gesture in IE 10 to zoom, and a swipe to twist the camera.

[mrdoob]

Are you aware of any javascript lib that implements touch gestures?

[JGeerWM]

I'm only aware of IE 10 gestures
http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx#Gesture_events

[alteredq]

I have found this:

http://eightmedia.github.com/hammer.js/

[JGeerWM]

http://eightmedia.github.com/hammer.js/ doesn't appear to recognize IE 10 touch events

[mrdoob]

I'm only aware of IE 10 gestures
http://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx#Gesture_events

I can't see the pinch gesture there...

[JGeerWM]

http://bing.maps.com handles the pinch well. I'll try to understand how they are doing it.

[mrdoob]

Implemented in r53.

[ericnoble]

As of r54, the touch implementation in TrackballControls.js could still use some improvement, particularly with the zoom. The current zoom implementation is activated when two fingers touch the screen, but only uses the first touch position in its calculations. This results in unpredictable behavior when a user attempts a pinch-zoom, and is particularly sensitive to which finger touched the display first. A better implementation would use the distance between the two touch points, and then compare the initial distance at touchstart to the final or current distance during a touchmove or touchend. See code below. Tested in Google Chrome and Firefox 18 on Windows 8 touch display, as well as on Firefox 18 for Android (Jelly Bean) on a Samsung Galaxy S3.

function touchstart( event ) {
    if ( ! _this.enabled ) return;

        switch ( event.touches.length ) {
            case 1:
                _state = STATE.TOUCH_ROTATE;
                _rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
                break;
            case 2:
                _state = STATE.TOUCH_ZOOM;
                var p1 = new THREE.Vector2(event.touches[0].pageX, event.touches[0].pageY);
                var p2 = new THREE.Vector2(event.touches[1].pageX, event.touches[1].pageY);
                _touchZoomDistanceCurrent = _touchZoomDistancePrevious = p1.distanceTo(p2);
                break;
            case 3:
                _state = STATE.TOUCH_PAN;
                _panStart = _panEnd = _this.getMouseOnScreen(event.touches[0].pageX, event.touches[0].pageY);
                break;
            default:
                _state = STATE.NONE;
    }
}

function touchmove( event ) {
    if ( ! _this.enabled ) return;
    event.preventDefault();
    event.stopPropagation();
        switch ( event.touches.length ) {
        case 1:
            _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
            break;
        case 2:
            var p1 = new THREE.Vector2(event.touches[0].pageX, event.touches[0].pageY);
            var p2 = new THREE.Vector2(event.touches[1].pageX, event.touches[1].pageY);
            _touchZoomDistanceCurrent = p1.distanceTo(p2);
            break;
        case 3:
            _panEnd = _this.getMouseOnScreen(event.touches[0].pageX, event.touches[0].pageY);
            break;
        default:
            _state = STATE.NONE;
    }
}

this.zoomCamera = function () {
    if (_state === STATE.TOUCH_ZOOM) {
        var factor = _touchZoomDistancePrevious / _touchZoomDistanceCurrent;
        _touchZoomDistancePrevious = _touchZoomDistanceCurrent;
        _eye.multiplyScalar(factor);
    } else {
        var factor = 1.0 + (_zoomEnd.y - _zoomStart.y) * _this.zoomSpeed;
        if (factor !== 1.0 && factor > 0.0) {
            _eye.multiplyScalar(factor);
            if (_this.staticMoving) {
                _zoomStart.copy(_zoomEnd);
            } else {
                _zoomStart.y += (_zoomEnd.y - _zoomStart.y) * this.dynamicDampingFactor;
            }
        }
    }
};