three-render-objects 1.26.2 → 1.26.6

package/dist/three-render-objects.js

@@ -1,9 +1,9 @@
-// Version 1.26.2 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.26.6 three-render-objects - https://github.com/vasturiano/three-render-objects
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
   typeof define === 'function' && define.amd ? define(['three'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ThreeRenderObjects = factory(global.THREE));
-}(this, (function (three$1) { 'use strict';
+})(this, (function (three$1) { 'use strict';
 
   function styleInject(css, ref) {
     if ( ref === void 0 ) ref = {};
@@ -71,7 +71,7 @@
   }
 
   function _iterableToArrayLimit$1(arr, i) {
-    var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
     if (_i == null) return;
     var _arr = [];
@@ -143,6 +143,7 @@
 
   		this.object = object;
   		this.domElement = domElement;
+  		this.domElement.style.touchAction = 'none'; // disable touch scroll
 
   		// API
 
@@ -196,7 +197,10 @@
   			_zoomEnd = new three$1.Vector2(),
 
   			_panStart = new three$1.Vector2(),
-  			_panEnd = new three$1.Vector2();
+  			_panEnd = new three$1.Vector2(),
+
+  			_pointers = [],
+  			_pointerPositions = {};
 
   		// for reset
 
@@ -323,7 +327,7 @@
 
   				} else if ( scope.object.isOrthographicCamera ) {
 
-  					scope.object.zoom *= factor;
+  					scope.object.zoom /= factor;
   					scope.object.updateProjectionMatrix();
 
   				} else {
@@ -525,14 +529,26 @@
 
   			if ( scope.enabled === false ) return;
 
-  			switch ( event.pointerType ) {
+  			if ( _pointers.length === 0 ) {
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseDown( event );
-  					break;
+  				scope.domElement.setPointerCapture( event.pointerId );
 
-  				// TODO touch
+  				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+  				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+  			}
+
+  			//
+
+  			addPointer( event );
+
+  			if ( event.pointerType === 'touch' ) {
+
+  				onTouchStart( event );
+
+  			} else {
+
+  				onMouseDown( event );
 
   			}
 
@@ -542,14 +558,13 @@
 
   			if ( scope.enabled === false ) return;
 
-  			switch ( event.pointerType ) {
+  			if ( event.pointerType === 'touch' ) {
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseMove( event );
-  					break;
+  				onTouchMove( event );
 
-  				// TODO touch
+  			} else {
+
+  				onMouseMove( event );
 
   			}
 
@@ -559,17 +574,36 @@
 
   			if ( scope.enabled === false ) return;
 
-  			switch ( event.pointerType ) {
+  			if ( event.pointerType === 'touch' ) {
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseUp( event );
-  					break;
+  				onTouchEnd( event );
+
+  			} else {
+
+  				onMouseUp();
+
+  			}
+
+  			//
+
+  			removePointer( event );
 
-  				// TODO touch
+  			if ( _pointers.length === 0 ) {
+
+  				scope.domElement.releasePointerCapture( event.pointerId );
+
+  				scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+  				scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
   			}
 
+
+  		}
+
+  		function onPointerCancel( event ) {
+
+  			removePointer( event );
+
   		}
 
   		function keydown( event ) {
@@ -610,8 +644,6 @@
 
   		function onMouseDown( event ) {
 
-  			event.preventDefault();
-
   			if ( _state === STATE.NONE ) {
 
   				switch ( event.button ) {
@@ -654,19 +686,12 @@
 
   			}
 
-  			scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-  			scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
-
   			scope.dispatchEvent( _startEvent$1 );
 
   		}
 
   		function onMouseMove( event ) {
 
-  			if ( scope.enabled === false ) return;
-
-  			event.preventDefault();
-
   			const state = ( _keyState !== STATE.NONE ) ? _keyState : _state;
 
   			if ( state === STATE.ROTATE && ! scope.noRotate ) {
@@ -686,22 +711,15 @@
 
   		}
 
-  		function onMouseUp( event ) {
-
-  			if ( scope.enabled === false ) return;
-
-  			event.preventDefault();
+  		function onMouseUp() {
 
   			_state = STATE.NONE;
 
-  			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-  			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
-
   			scope.dispatchEvent( _endEvent$1 );
 
   		}
 
-  		function mousewheel( event ) {
+  		function onMouseWheel( event ) {
 
   			if ( scope.enabled === false ) return;
 
@@ -733,28 +751,26 @@
 
   		}
 
-  		function touchstart( event ) {
-
-  			if ( scope.enabled === false ) return;
+  		function onTouchStart( event ) {
 
-  			event.preventDefault();
+  			trackPointer( event );
 
-  			switch ( event.touches.length ) {
+  			switch ( _pointers.length ) {
 
   				case 1:
   					_state = STATE.TOUCH_ROTATE;
-  					_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+  					_moveCurr.copy( getMouseOnCircle( _pointers[ 0 ].pageX, _pointers[ 0 ].pageY ) );
   					_movePrev.copy( _moveCurr );
   					break;
 
   				default: // 2 or more
   					_state = STATE.TOUCH_ZOOM_PAN;
-  					const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-  					const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+  					const dx = _pointers[ 0 ].pageX - _pointers[ 1 ].pageX;
+  					const dy = _pointers[ 0 ].pageY - _pointers[ 1 ].pageY;
   					_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
 
-  					const x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
-  					const y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
+  					const x = ( _pointers[ 0 ].pageX + _pointers[ 1 ].pageX ) / 2;
+  					const y = ( _pointers[ 0 ].pageY + _pointers[ 1 ].pageY ) / 2;
   					_panStart.copy( getMouseOnScreen( x, y ) );
   					_panEnd.copy( _panStart );
   					break;
@@ -765,26 +781,27 @@
 
   		}
 
-  		function touchmove( event ) {
+  		function onTouchMove( event ) {
 
-  			if ( scope.enabled === false ) return;
+  			trackPointer( event );
 
-  			event.preventDefault();
-
-  			switch ( event.touches.length ) {
+  			switch ( _pointers.length ) {
 
   				case 1:
   					_movePrev.copy( _moveCurr );
-  					_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+  					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
   					break;
 
   				default: // 2 or more
-  					const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-  					const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+
+  					const position = getSecondPointerPosition( event );
+
+  					const dx = event.pageX - position.x;
+  					const dy = event.pageY - position.y;
   					_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
 
-  					const x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
-  					const y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
+  					const x = ( event.pageX + position.x ) / 2;
+  					const y = ( event.pageY + position.y ) / 2;
   					_panEnd.copy( getMouseOnScreen( x, y ) );
   					break;
 
@@ -792,11 +809,9 @@
 
   		}
 
-  		function touchend( event ) {
-
-  			if ( scope.enabled === false ) return;
+  		function onTouchEnd( event ) {
 
-  			switch ( event.touches.length ) {
+  			switch ( _pointers.length ) {
 
   				case 0:
   					_state = STATE.NONE;
@@ -804,7 +819,13 @@
 
   				case 1:
   					_state = STATE.TOUCH_ROTATE;
-  					_moveCurr.copy( getMouseOnCircle( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
+  					_moveCurr.copy( getMouseOnCircle( event.pageX, event.pageY ) );
+  					_movePrev.copy( _moveCurr );
+  					break;
+
+  				case 2:
+  					_state = STATE.TOUCH_ZOOM_PAN;
+  					_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.pageX, event.pageY - _movePrev.pageY ) );
   					_movePrev.copy( _moveCurr );
   					break;
 
@@ -822,19 +843,62 @@
 
   		}
 
+  		function addPointer( event ) {
+
+  			_pointers.push( event );
+
+  		}
+
+  		function removePointer( event ) {
+
+  			delete _pointerPositions[ event.pointerId ];
+
+  			for ( let i = 0; i < _pointers.length; i ++ ) {
+
+  				if ( _pointers[ i ].pointerId == event.pointerId ) {
+
+  					_pointers.splice( i, 1 );
+  					return;
+
+  				}
+
+  			}
+
+  		}
+
+  		function trackPointer( event ) {
+
+  			let position = _pointerPositions[ event.pointerId ];
+
+  			if ( position === undefined ) {
+
+  				position = new three$1.Vector2();
+  				_pointerPositions[ event.pointerId ] = position;
+
+  			}
+
+  			position.set( event.pageX, event.pageY );
+
+  		}
+
+  		function getSecondPointerPosition( event ) {
+
+  			const pointer = ( event.pointerId === _pointers[ 0 ].pointerId ) ? _pointers[ 1 ] : _pointers[ 0 ];
+
+  			return _pointerPositions[ pointer.pointerId ];
+
+  		}
+
   		this.dispose = function () {
 
   			scope.domElement.removeEventListener( 'contextmenu', contextmenu );
 
   			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
-  			scope.domElement.removeEventListener( 'wheel', mousewheel );
-
-  			scope.domElement.removeEventListener( 'touchstart', touchstart );
-  			scope.domElement.removeEventListener( 'touchend', touchend );
-  			scope.domElement.removeEventListener( 'touchmove', touchmove );
+  			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
+  			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
 
-  			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-  			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+  			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+  			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
   			window.removeEventListener( 'keydown', keydown );
   			window.removeEventListener( 'keyup', keyup );
@@ -844,14 +908,9 @@
   		this.domElement.addEventListener( 'contextmenu', contextmenu );
 
   		this.domElement.addEventListener( 'pointerdown', onPointerDown );
-  		this.domElement.addEventListener( 'wheel', mousewheel, { passive: false } );
+  		this.domElement.addEventListener( 'pointercancel', onPointerCancel );
+  		this.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
 
-  		this.domElement.addEventListener( 'touchstart', touchstart, { passive: false } );
-  		this.domElement.addEventListener( 'touchend', touchend );
-  		this.domElement.addEventListener( 'touchmove', touchmove, { passive: false } );
-
-  		this.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-  		this.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
 
   		window.addEventListener( 'keydown', keydown );
   		window.addEventListener( 'keyup', keyup );
@@ -887,6 +946,7 @@
 
   		this.object = object;
   		this.domElement = domElement;
+  		this.domElement.style.touchAction = 'none'; // disable touch scroll
 
   		// Set to false to disable this control
   		this.enabled = true;
@@ -970,6 +1030,12 @@
 
   		};
 
+  		this.getDistance = function () {
+
+  			return this.object.position.distanceTo( this.target );
+
+  		};
+
   		this.listenToKeyEvents = function ( domElement ) {
 
   			domElement.addEventListener( 'keydown', onKeyDown );
@@ -1147,14 +1213,11 @@
   			scope.domElement.removeEventListener( 'contextmenu', onContextMenu );
 
   			scope.domElement.removeEventListener( 'pointerdown', onPointerDown );
+  			scope.domElement.removeEventListener( 'pointercancel', onPointerCancel );
   			scope.domElement.removeEventListener( 'wheel', onMouseWheel );
 
-  			scope.domElement.removeEventListener( 'touchstart', onTouchStart );
-  			scope.domElement.removeEventListener( 'touchend', onTouchEnd );
-  			scope.domElement.removeEventListener( 'touchmove', onTouchMove );
-
-  			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-  			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+  			scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+  			scope.domElement.removeEventListener( 'pointerup', onPointerUp );
 
 
   			if ( scope._domElementKeyEvents !== null ) {
@@ -1208,6 +1271,9 @@
   		const dollyEnd = new three$1.Vector2();
   		const dollyDelta = new three$1.Vector2();
 
+  		const pointers = [];
+  		const pointerPositions = {};
+
   		function getAutoRotationAngle() {
 
   			return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
@@ -1487,16 +1553,16 @@
 
   		}
 
-  		function handleTouchStartRotate( event ) {
+  		function handleTouchStartRotate() {
 
-  			if ( event.touches.length == 1 ) {
+  			if ( pointers.length === 1 ) {
 
-  				rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+  				rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
 
   			} else {
 
-  				const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-  				const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
+  				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
+  				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
 
   				rotateStart.set( x, y );
 
@@ -1504,16 +1570,16 @@
 
   		}
 
-  		function handleTouchStartPan( event ) {
+  		function handleTouchStartPan() {
 
-  			if ( event.touches.length == 1 ) {
+  			if ( pointers.length === 1 ) {
 
-  				panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+  				panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY );
 
   			} else {
 
-  				const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-  				const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
+  				const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX );
+  				const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY );
 
   				panStart.set( x, y );
 
@@ -1521,10 +1587,10 @@
 
   		}
 
-  		function handleTouchStartDolly( event ) {
+  		function handleTouchStartDolly() {
 
-  			const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-  			const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+  			const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX;
+  			const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY;
 
   			const distance = Math.sqrt( dx * dx + dy * dy );
 
@@ -1532,32 +1598,34 @@
 
   		}
 
-  		function handleTouchStartDollyPan( event ) {
+  		function handleTouchStartDollyPan() {
 
-  			if ( scope.enableZoom ) handleTouchStartDolly( event );
+  			if ( scope.enableZoom ) handleTouchStartDolly();
 
-  			if ( scope.enablePan ) handleTouchStartPan( event );
+  			if ( scope.enablePan ) handleTouchStartPan();
 
   		}
 
-  		function handleTouchStartDollyRotate( event ) {
+  		function handleTouchStartDollyRotate() {
 
-  			if ( scope.enableZoom ) handleTouchStartDolly( event );
+  			if ( scope.enableZoom ) handleTouchStartDolly();
 
-  			if ( scope.enableRotate ) handleTouchStartRotate( event );
+  			if ( scope.enableRotate ) handleTouchStartRotate();
 
   		}
 
   		function handleTouchMoveRotate( event ) {
 
-  			if ( event.touches.length == 1 ) {
+  			if ( pointers.length == 1 ) {
 
-  				rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+  				rotateEnd.set( event.pageX, event.pageY );
 
   			} else {
 
-  				const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-  				const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
+  				const position = getSecondPointerPosition( event );
+
+  				const x = 0.5 * ( event.pageX + position.x );
+  				const y = 0.5 * ( event.pageY + position.y );
 
   				rotateEnd.set( x, y );
 
@@ -1577,14 +1645,16 @@
 
   		function handleTouchMovePan( event ) {
 
-  			if ( event.touches.length == 1 ) {
+  			if ( pointers.length === 1 ) {
 
-  				panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
+  				panEnd.set( event.pageX, event.pageY );
 
   			} else {
 
-  				const x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
-  				const y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
+  				const position = getSecondPointerPosition( event );
+
+  				const x = 0.5 * ( event.pageX + position.x );
+  				const y = 0.5 * ( event.pageY + position.y );
 
   				panEnd.set( x, y );
 
@@ -1600,8 +1670,10 @@
 
   		function handleTouchMoveDolly( event ) {
 
-  			const dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
-  			const dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
+  			const position = getSecondPointerPosition( event );
+
+  			const dx = event.pageX - position.x;
+  			const dy = event.pageY - position.y;
 
   			const distance = Math.sqrt( dx * dx + dy * dy );
 
@@ -1639,14 +1711,26 @@
 
   			if ( scope.enabled === false ) return;
 
-  			switch ( event.pointerType ) {
+  			if ( pointers.length === 0 ) {
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseDown( event );
-  					break;
+  				scope.domElement.setPointerCapture( event.pointerId );
 
-  				// TODO touch
+  				scope.domElement.addEventListener( 'pointermove', onPointerMove );
+  				scope.domElement.addEventListener( 'pointerup', onPointerUp );
+
+  			}
+
+  			//
+
+  			addPointer( event );
+
+  			if ( event.pointerType === 'touch' ) {
+
+  				onTouchStart( event );
+
+  			} else {
+
+  				onMouseDown( event );
 
   			}
 
@@ -1656,14 +1740,13 @@
 
   			if ( scope.enabled === false ) return;
 
-  			switch ( event.pointerType ) {
+  			if ( event.pointerType === 'touch' ) {
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseMove( event );
-  					break;
+  				onTouchMove( event );
+
+  			} else {
 
-  				// TODO touch
+  				onMouseMove( event );
 
   			}
 
@@ -1671,28 +1754,30 @@
 
   		function onPointerUp( event ) {
 
-  			switch ( event.pointerType ) {
+  		    removePointer( event );
 
-  				case 'mouse':
-  				case 'pen':
-  					onMouseUp();
-  					break;
+  		    if ( pointers.length === 0 ) {
 
-  				// TODO touch
+  		        scope.domElement.releasePointerCapture( event.pointerId );
 
-  			}
+  		        scope.domElement.removeEventListener( 'pointermove', onPointerMove );
+  		        scope.domElement.removeEventListener( 'pointerup', onPointerUp );
+
+  		    }
+
+  		    scope.dispatchEvent( _endEvent );
+
+  		    state = STATE.NONE;
 
   		}
 
-  		function onMouseDown( event ) {
+  		function onPointerCancel( event ) {
 
-  			// Prevent the browser from scrolling.
-  			event.preventDefault();
+  			removePointer( event );
 
-  			// Manually set the focus since calling preventDefault above
-  			// prevents the browser from setting it automatically.
+  		}
 
-  			scope.domElement.focus ? scope.domElement.focus() : window.focus();
+  		function onMouseDown( event ) {
 
   			let mouseAction;
 
@@ -1783,9 +1868,6 @@
 
   			if ( state !== STATE.NONE ) {
 
-  				scope.domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
-  				scope.domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
-
   				scope.dispatchEvent( _startEvent );
 
   			}
@@ -1796,8 +1878,6 @@
 
   			if ( scope.enabled === false ) return;
 
-  			event.preventDefault();
-
   			switch ( state ) {
 
   				case STATE.ROTATE:
@@ -1828,22 +1908,9 @@
 
   		}
 
-  		function onMouseUp( event ) {
-
-  			scope.domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
-  			scope.domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
-
-  			if ( scope.enabled === false ) return;
-
-  			scope.dispatchEvent( _endEvent );
-
-  			state = STATE.NONE;
-
-  		}
-
   		function onMouseWheel( event ) {
 
-  			if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
+  			if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
 
   			event.preventDefault();
 
@@ -1865,11 +1932,9 @@
 
   		function onTouchStart( event ) {
 
-  			if ( scope.enabled === false ) return;
-
-  			event.preventDefault(); // prevent scrolling
+  			trackPointer( event );
 
-  			switch ( event.touches.length ) {
+  			switch ( pointers.length ) {
 
   				case 1:
 
@@ -1879,7 +1944,7 @@
 
   							if ( scope.enableRotate === false ) return;
 
-  							handleTouchStartRotate( event );
+  							handleTouchStartRotate();
 
   							state = STATE.TOUCH_ROTATE;
 
@@ -1889,7 +1954,7 @@
 
   							if ( scope.enablePan === false ) return;
 
-  							handleTouchStartPan( event );
+  							handleTouchStartPan();
 
   							state = STATE.TOUCH_PAN;
 
@@ -1911,7 +1976,7 @@
 
   							if ( scope.enableZoom === false && scope.enablePan === false ) return;
 
-  							handleTouchStartDollyPan( event );
+  							handleTouchStartDollyPan();
 
   							state = STATE.TOUCH_DOLLY_PAN;
 
@@ -1921,7 +1986,7 @@
 
   							if ( scope.enableZoom === false && scope.enableRotate === false ) return;
 
-  							handleTouchStartDollyRotate( event );
+  							handleTouchStartDollyRotate();
 
   							state = STATE.TOUCH_DOLLY_ROTATE;
 
@@ -1951,9 +2016,7 @@
 
   		function onTouchMove( event ) {
 
-  			if ( scope.enabled === false ) return;
-
-  			event.preventDefault(); // prevent scrolling
+  			trackPointer( event );
 
   			switch ( state ) {
 
@@ -2005,21 +2068,57 @@
 
   		}
 
-  		function onTouchEnd( event ) {
+  		function onContextMenu( event ) {
 
   			if ( scope.enabled === false ) return;
 
-  			scope.dispatchEvent( _endEvent );
+  			event.preventDefault();
 
-  			state = STATE.NONE;
+  		}
+
+  		function addPointer( event ) {
+
+  			pointers.push( event );
 
   		}
 
-  		function onContextMenu( event ) {
+  		function removePointer( event ) {
 
-  			if ( scope.enabled === false ) return;
+  			delete pointerPositions[ event.pointerId ];
 
-  			event.preventDefault();
+  			for ( let i = 0; i < pointers.length; i ++ ) {
+
+  				if ( pointers[ i ].pointerId == event.pointerId ) {
+
+  					pointers.splice( i, 1 );
+  					return;
+
+  				}
+
+  			}
+
+  		}
+
+  		function trackPointer( event ) {
+
+  			let position = pointerPositions[ event.pointerId ];
+
+  			if ( position === undefined ) {
+
+  				position = new three$1.Vector2();
+  				pointerPositions[ event.pointerId ] = position;
+
+  			}
+
+  			position.set( event.pageX, event.pageY );
+
+  		}
+
+  		function getSecondPointerPosition( event ) {
+
+  			const pointer = ( event.pointerId === pointers[ 0 ].pointerId ) ? pointers[ 1 ] : pointers[ 0 ];
+
+  			return pointerPositions[ pointer.pointerId ];
 
   		}
 
@@ -2028,12 +2127,9 @@
   		scope.domElement.addEventListener( 'contextmenu', onContextMenu );
 
   		scope.domElement.addEventListener( 'pointerdown', onPointerDown );
+  		scope.domElement.addEventListener( 'pointercancel', onPointerCancel );
   		scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
 
-  		scope.domElement.addEventListener( 'touchstart', onTouchStart, { passive: false } );
-  		scope.domElement.addEventListener( 'touchend', onTouchEnd );
-  		scope.domElement.addEventListener( 'touchmove', onTouchMove, { passive: false } );
-
   		// force an update at start
 
   		this.update();
@@ -2095,8 +2191,6 @@
 
   			}
 
-  			//event.preventDefault();
-
   			switch ( event.code ) {
 
   				case 'ShiftLeft':
@@ -2161,14 +2255,6 @@
 
   		this.mousedown = function ( event ) {
 
-  			if ( this.domElement !== document ) {
-
-  				this.domElement.focus();
-
-  			}
-
-  			event.preventDefault();
-
   			if ( this.dragToLook ) {
 
   				this.mouseStatus ++;
@@ -2207,8 +2293,6 @@
 
   		this.mouseup = function ( event ) {
 
-  			event.preventDefault();
-
   			if ( this.dragToLook ) {
 
   				this.mouseStatus --;
@@ -3466,7 +3550,7 @@
       };
     }
 
-    var rgbaMatched = rgbaRegex.exec(normalizedColor);
+    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
     if (rgbaMatched) {
       return {
@@ -3497,7 +3581,7 @@
       };
     }
 
-    var hslaMatched = hslaRegex.exec(normalizedColor);
+    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
     if (hslaMatched) {
       var _hue = parseInt("" + hslaMatched[1], 10);
@@ -3537,6 +3621,8 @@
     return value;
   };
 
+  var reduceHexValue$1 = reduceHexValue;
+
   function numberToHex(value) {
     var hex = value.toString(16);
     return hex.length === 1 ? "0" + hex : hex;
@@ -3567,9 +3653,9 @@
    */
   function rgb(value, green, blue) {
     if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-      return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+      return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
     } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-      return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+      return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
     }
 
     throw new PolishedError(6);
@@ -3688,6 +3774,7 @@
   var curriedOpacify = /*#__PURE__*/curry
   /* ::<number | string, string, string> */
   (opacify);
+  var curriedOpacify$1 = curriedOpacify;
 
   /**
    * The Ease class provides a collection of easing functions for use with tween.js.
@@ -4576,6 +4663,25 @@
     }
   }
 
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
+    return Constructor;
+  }
+
   function _slicedToArray(arr, i) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
@@ -4585,7 +4691,7 @@
   }
 
   function _iterableToArrayLimit(arr, i) {
-    var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
     if (_i == null) return;
     var _arr = [];
@@ -4635,7 +4741,7 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
-  var Prop = function Prop(name, _ref) {
+  var Prop = /*#__PURE__*/_createClass(function Prop(name, _ref) {
     var _ref$default = _ref["default"],
         defaultVal = _ref$default === void 0 ? null : _ref$default,
         _ref$triggerUpdate = _ref.triggerUpdate,
@@ -4649,7 +4755,7 @@
     this.defaultVal = defaultVal;
     this.triggerUpdate = triggerUpdate;
     this.onChange = onChange;
-  };
+  });
 
   function index (_ref2) {
     var _ref2$stateInit = _ref2.stateInit,
@@ -4958,7 +5064,14 @@
         }
 
         function setLookAt(lookAt) {
-          state.controls.target = new three.Vector3(lookAt.x, lookAt.y, lookAt.z);
+          var lookAtVect = new three.Vector3(lookAt.x, lookAt.y, lookAt.z);
+
+          if (state.controls.target) {
+            state.controls.target = lookAtVect;
+          } else {
+            // Fly controls doesn't have target attribute
+            camera.lookAt(lookAtVect); // note: lookAt may be overridden by other controls in some cases
+          }
         }
 
         function getLookAt() {
@@ -5211,8 +5324,6 @@
         state.controls.minDistance = 0.1;
         state.controls.maxDistance = state.skyRadius;
         state.controls.addEventListener('start', function () {
-          state.isPointerPressed = true; // trackball controls blocks pointerdown events, so we have to track it (also) here
-
           state.controlsEngaged = true;
         });
         state.controls.addEventListener('change', function () {
@@ -5241,8 +5352,8 @@
     update: function update(state, changedProps) {
       // resize canvas
       if (state.width && state.height && (changedProps.hasOwnProperty('width') || changedProps.hasOwnProperty('height'))) {
-        state.container.style.width = state.width;
-        state.container.style.height = state.height;
+        state.container.style.width = "".concat(state.width, "px");
+        state.container.style.height = "".concat(state.height, "px");
         [state.renderer, state.postProcessingComposer].concat(_toConsumableArray(state.extraRenderers)).forEach(function (r) {
           return r.setSize(state.width, state.height);
         });
@@ -5260,7 +5371,7 @@
       if (changedProps.hasOwnProperty('backgroundColor')) {
         var alpha = parseToRgb(state.backgroundColor).alpha;
         if (alpha === undefined) alpha = 1;
-        state.renderer.setClearColor(new three.Color(curriedOpacify(1, state.backgroundColor)), alpha);
+        state.renderer.setClearColor(new three.Color(curriedOpacify$1(1, state.backgroundColor)), alpha);
       }
 
       if (changedProps.hasOwnProperty('backgroundImageUrl')) {
@@ -5303,5 +5414,5 @@
 
   return threeRenderObjects;
 
-})));
+}));
 //# sourceMappingURL=three-render-objects.js.map