|
@@ -1,354 +1,357 @@
|
|
import * as THREE from 'three';
|
|
import * as THREE from 'three';
|
|
|
|
|
|
-function EditorControls( object, domElement ) {
|
|
|
|
|
|
+class EditorControls extends THREE.EventDispatcher {
|
|
|
|
|
|
- // API
|
|
|
|
|
|
+ constructor( object, domElement ) {
|
|
|
|
|
|
- this.enabled = true;
|
|
|
|
- this.center = new THREE.Vector3();
|
|
|
|
- this.panSpeed = 0.002;
|
|
|
|
- this.zoomSpeed = 0.1;
|
|
|
|
- this.rotationSpeed = 0.005;
|
|
|
|
|
|
+ super();
|
|
|
|
|
|
- // internals
|
|
|
|
|
|
+ // API
|
|
|
|
|
|
- var scope = this;
|
|
|
|
- var vector = new THREE.Vector3();
|
|
|
|
- var delta = new THREE.Vector3();
|
|
|
|
- var box = new THREE.Box3();
|
|
|
|
|
|
+ this.enabled = true;
|
|
|
|
+ this.center = new THREE.Vector3();
|
|
|
|
+ this.panSpeed = 0.002;
|
|
|
|
+ this.zoomSpeed = 0.1;
|
|
|
|
+ this.rotationSpeed = 0.005;
|
|
|
|
|
|
- var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
|
|
|
|
- var state = STATE.NONE;
|
|
|
|
|
|
+ // internals
|
|
|
|
|
|
- var center = this.center;
|
|
|
|
- var normalMatrix = new THREE.Matrix3();
|
|
|
|
- var pointer = new THREE.Vector2();
|
|
|
|
- var pointerOld = new THREE.Vector2();
|
|
|
|
- var spherical = new THREE.Spherical();
|
|
|
|
- var sphere = new THREE.Sphere();
|
|
|
|
|
|
+ var scope = this;
|
|
|
|
+ var vector = new THREE.Vector3();
|
|
|
|
+ var delta = new THREE.Vector3();
|
|
|
|
+ var box = new THREE.Box3();
|
|
|
|
|
|
- // events
|
|
|
|
|
|
+ var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2 };
|
|
|
|
+ var state = STATE.NONE;
|
|
|
|
|
|
- var changeEvent = { type: 'change' };
|
|
|
|
|
|
+ var center = this.center;
|
|
|
|
+ var normalMatrix = new THREE.Matrix3();
|
|
|
|
+ var pointer = new THREE.Vector2();
|
|
|
|
+ var pointerOld = new THREE.Vector2();
|
|
|
|
+ var spherical = new THREE.Spherical();
|
|
|
|
+ var sphere = new THREE.Sphere();
|
|
|
|
|
|
- this.focus = function ( target ) {
|
|
|
|
|
|
+ // events
|
|
|
|
|
|
- var distance;
|
|
|
|
|
|
+ var changeEvent = { type: 'change' };
|
|
|
|
|
|
- box.setFromObject( target );
|
|
|
|
|
|
+ this.focus = function ( target ) {
|
|
|
|
|
|
- if ( box.isEmpty() === false ) {
|
|
|
|
|
|
+ var distance;
|
|
|
|
|
|
- box.getCenter( center );
|
|
|
|
- distance = box.getBoundingSphere( sphere ).radius;
|
|
|
|
|
|
+ box.setFromObject( target );
|
|
|
|
|
|
- } else {
|
|
|
|
|
|
+ if ( box.isEmpty() === false ) {
|
|
|
|
|
|
- // Focusing on an Group, AmbientLight, etc
|
|
|
|
|
|
+ box.getCenter( center );
|
|
|
|
+ distance = box.getBoundingSphere( sphere ).radius;
|
|
|
|
|
|
- center.setFromMatrixPosition( target.matrixWorld );
|
|
|
|
- distance = 0.1;
|
|
|
|
|
|
+ } else {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ // Focusing on an Group, AmbientLight, etc
|
|
|
|
|
|
- delta.set( 0, 0, 1 );
|
|
|
|
- delta.applyQuaternion( object.quaternion );
|
|
|
|
- delta.multiplyScalar( distance * 4 );
|
|
|
|
|
|
+ center.setFromMatrixPosition( target.matrixWorld );
|
|
|
|
+ distance = 0.1;
|
|
|
|
|
|
- object.position.copy( center ).add( delta );
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
+ delta.set( 0, 0, 1 );
|
|
|
|
+ delta.applyQuaternion( object.quaternion );
|
|
|
|
+ delta.multiplyScalar( distance * 4 );
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ object.position.copy( center ).add( delta );
|
|
|
|
|
|
- this.pan = function ( delta ) {
|
|
|
|
|
|
+ scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
- var distance = object.position.distanceTo( center );
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- delta.multiplyScalar( distance * scope.panSpeed );
|
|
|
|
- delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
|
|
|
|
|
|
+ this.pan = function ( delta ) {
|
|
|
|
|
|
- object.position.add( delta );
|
|
|
|
- center.add( delta );
|
|
|
|
|
|
+ var distance = object.position.distanceTo( center );
|
|
|
|
|
|
- scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
+ delta.multiplyScalar( distance * scope.panSpeed );
|
|
|
|
+ delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ object.position.add( delta );
|
|
|
|
+ center.add( delta );
|
|
|
|
|
|
- this.zoom = function ( delta ) {
|
|
|
|
|
|
+ scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
- var distance = object.position.distanceTo( center );
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- delta.multiplyScalar( distance * scope.zoomSpeed );
|
|
|
|
|
|
+ this.zoom = function ( delta ) {
|
|
|
|
|
|
- if ( delta.length() > distance ) return;
|
|
|
|
|
|
+ var distance = object.position.distanceTo( center );
|
|
|
|
|
|
- delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
|
|
|
|
|
|
+ delta.multiplyScalar( distance * scope.zoomSpeed );
|
|
|
|
|
|
- object.position.add( delta );
|
|
|
|
|
|
+ if ( delta.length() > distance ) return;
|
|
|
|
|
|
- scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
+ delta.applyMatrix3( normalMatrix.getNormalMatrix( object.matrix ) );
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ object.position.add( delta );
|
|
|
|
|
|
- this.rotate = function ( delta ) {
|
|
|
|
|
|
+ scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
- vector.copy( object.position ).sub( center );
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- spherical.setFromVector3( vector );
|
|
|
|
|
|
+ this.rotate = function ( delta ) {
|
|
|
|
|
|
- spherical.theta += delta.x * scope.rotationSpeed;
|
|
|
|
- spherical.phi += delta.y * scope.rotationSpeed;
|
|
|
|
|
|
+ vector.copy( object.position ).sub( center );
|
|
|
|
|
|
- spherical.makeSafe();
|
|
|
|
|
|
+ spherical.setFromVector3( vector );
|
|
|
|
|
|
- vector.setFromSpherical( spherical );
|
|
|
|
|
|
+ spherical.theta += delta.x * scope.rotationSpeed;
|
|
|
|
+ spherical.phi += delta.y * scope.rotationSpeed;
|
|
|
|
|
|
- object.position.copy( center ).add( vector );
|
|
|
|
|
|
+ spherical.makeSafe();
|
|
|
|
|
|
- object.lookAt( center );
|
|
|
|
|
|
+ vector.setFromSpherical( spherical );
|
|
|
|
|
|
- scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
+ object.position.copy( center ).add( vector );
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ object.lookAt( center );
|
|
|
|
|
|
- //
|
|
|
|
|
|
+ scope.dispatchEvent( changeEvent );
|
|
|
|
|
|
- function onPointerDown( event ) {
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- if ( scope.enabled === false ) return;
|
|
|
|
|
|
+ //
|
|
|
|
|
|
- switch ( event.pointerType ) {
|
|
|
|
|
|
+ function onPointerDown( event ) {
|
|
|
|
|
|
- case 'mouse':
|
|
|
|
- case 'pen':
|
|
|
|
- onMouseDown( event );
|
|
|
|
- break;
|
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
|
- // TODO touch
|
|
|
|
|
|
+ switch ( event.pointerType ) {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ case 'mouse':
|
|
|
|
+ case 'pen':
|
|
|
|
+ onMouseDown( event );
|
|
|
|
+ break;
|
|
|
|
|
|
- domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
|
|
|
|
- domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
|
|
|
|
|
|
+ // TODO touch
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ domElement.ownerDocument.addEventListener( 'pointermove', onPointerMove );
|
|
|
|
+ domElement.ownerDocument.addEventListener( 'pointerup', onPointerUp );
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
- function onPointerMove( event ) {
|
|
|
|
|
|
+ function onPointerMove( event ) {
|
|
|
|
|
|
- if ( scope.enabled === false ) return;
|
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
|
- switch ( event.pointerType ) {
|
|
|
|
|
|
+ switch ( event.pointerType ) {
|
|
|
|
|
|
- case 'mouse':
|
|
|
|
- case 'pen':
|
|
|
|
- onMouseMove( event );
|
|
|
|
- break;
|
|
|
|
|
|
+ case 'mouse':
|
|
|
|
+ case 'pen':
|
|
|
|
+ onMouseMove( event );
|
|
|
|
+ break;
|
|
|
|
|
|
- // TODO touch
|
|
|
|
|
|
+ // TODO touch
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ function onPointerUp( event ) {
|
|
|
|
|
|
- function onPointerUp( event ) {
|
|
|
|
|
|
+ switch ( event.pointerType ) {
|
|
|
|
|
|
- switch ( event.pointerType ) {
|
|
|
|
|
|
+ case 'mouse':
|
|
|
|
+ case 'pen':
|
|
|
|
+ onMouseUp();
|
|
|
|
+ break;
|
|
|
|
|
|
- case 'mouse':
|
|
|
|
- case 'pen':
|
|
|
|
- onMouseUp();
|
|
|
|
- break;
|
|
|
|
|
|
+ // TODO touch
|
|
|
|
|
|
- // TODO touch
|
|
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
|
|
|
+ domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- domElement.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
|
|
|
|
- domElement.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
|
|
|
|
|
|
+ // mouse
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ function onMouseDown( event ) {
|
|
|
|
|
|
- // mouse
|
|
|
|
|
|
+ if ( event.button === 0 ) {
|
|
|
|
|
|
- function onMouseDown( event ) {
|
|
|
|
|
|
+ state = STATE.ROTATE;
|
|
|
|
|
|
- if ( event.button === 0 ) {
|
|
|
|
|
|
+ } else if ( event.button === 1 ) {
|
|
|
|
|
|
- state = STATE.ROTATE;
|
|
|
|
|
|
+ state = STATE.ZOOM;
|
|
|
|
|
|
- } else if ( event.button === 1 ) {
|
|
|
|
|
|
+ } else if ( event.button === 2 ) {
|
|
|
|
|
|
- state = STATE.ZOOM;
|
|
|
|
|
|
+ state = STATE.PAN;
|
|
|
|
|
|
- } else if ( event.button === 2 ) {
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- state = STATE.PAN;
|
|
|
|
|
|
+ pointerOld.set( event.clientX, event.clientY );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- pointerOld.set( event.clientX, event.clientY );
|
|
|
|
|
|
+ function onMouseMove( event ) {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ pointer.set( event.clientX, event.clientY );
|
|
|
|
|
|
- function onMouseMove( event ) {
|
|
|
|
|
|
+ var movementX = pointer.x - pointerOld.x;
|
|
|
|
+ var movementY = pointer.y - pointerOld.y;
|
|
|
|
|
|
- pointer.set( event.clientX, event.clientY );
|
|
|
|
|
|
+ if ( state === STATE.ROTATE ) {
|
|
|
|
|
|
- var movementX = pointer.x - pointerOld.x;
|
|
|
|
- var movementY = pointer.y - pointerOld.y;
|
|
|
|
|
|
+ scope.rotate( delta.set( - movementX, - movementY, 0 ) );
|
|
|
|
|
|
- if ( state === STATE.ROTATE ) {
|
|
|
|
|
|
+ } else if ( state === STATE.ZOOM ) {
|
|
|
|
|
|
- scope.rotate( delta.set( - movementX, - movementY, 0 ) );
|
|
|
|
|
|
+ scope.zoom( delta.set( 0, 0, movementY ) );
|
|
|
|
|
|
- } else if ( state === STATE.ZOOM ) {
|
|
|
|
|
|
+ } else if ( state === STATE.PAN ) {
|
|
|
|
|
|
- scope.zoom( delta.set( 0, 0, movementY ) );
|
|
|
|
|
|
+ scope.pan( delta.set( - movementX, movementY, 0 ) );
|
|
|
|
|
|
- } else if ( state === STATE.PAN ) {
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- scope.pan( delta.set( - movementX, movementY, 0 ) );
|
|
|
|
|
|
+ pointerOld.set( event.clientX, event.clientY );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- pointerOld.set( event.clientX, event.clientY );
|
|
|
|
|
|
+ function onMouseUp() {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ state = STATE.NONE;
|
|
|
|
|
|
- function onMouseUp() {
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- state = STATE.NONE;
|
|
|
|
|
|
+ function onMouseWheel( event ) {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
|
- function onMouseWheel( event ) {
|
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- if ( scope.enabled === false ) return;
|
|
|
|
|
|
+ // Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
|
|
|
|
+ scope.zoom( delta.set( 0, 0, event.deltaY > 0 ? 1 : - 1 ) );
|
|
|
|
|
|
- event.preventDefault();
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- // Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460
|
|
|
|
- scope.zoom( delta.set( 0, 0, event.deltaY > 0 ? 1 : - 1 ) );
|
|
|
|
|
|
+ function contextmenu( event ) {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
|
- function contextmenu( event ) {
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- event.preventDefault();
|
|
|
|
|
|
+ this.dispose = function () {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ domElement.removeEventListener( 'contextmenu', contextmenu );
|
|
|
|
+ domElement.removeEventListener( 'dblclick', onMouseUp );
|
|
|
|
+ domElement.removeEventListener( 'wheel', onMouseWheel );
|
|
|
|
|
|
- this.dispose = function () {
|
|
|
|
|
|
+ domElement.removeEventListener( 'pointerdown', onPointerDown );
|
|
|
|
|
|
- domElement.removeEventListener( 'contextmenu', contextmenu );
|
|
|
|
- domElement.removeEventListener( 'dblclick', onMouseUp );
|
|
|
|
- domElement.removeEventListener( 'wheel', onMouseWheel );
|
|
|
|
|
|
+ domElement.removeEventListener( 'touchstart', touchStart );
|
|
|
|
+ domElement.removeEventListener( 'touchmove', touchMove );
|
|
|
|
|
|
- domElement.removeEventListener( 'pointerdown', onPointerDown );
|
|
|
|
|
|
+ };
|
|
|
|
|
|
- domElement.removeEventListener( 'touchstart', touchStart );
|
|
|
|
- domElement.removeEventListener( 'touchmove', touchMove );
|
|
|
|
|
|
+ domElement.addEventListener( 'contextmenu', contextmenu );
|
|
|
|
+ domElement.addEventListener( 'dblclick', onMouseUp );
|
|
|
|
+ domElement.addEventListener( 'wheel', onMouseWheel );
|
|
|
|
|
|
- };
|
|
|
|
|
|
+ domElement.addEventListener( 'pointerdown', onPointerDown );
|
|
|
|
|
|
- domElement.addEventListener( 'contextmenu', contextmenu );
|
|
|
|
- domElement.addEventListener( 'dblclick', onMouseUp );
|
|
|
|
- domElement.addEventListener( 'wheel', onMouseWheel );
|
|
|
|
|
|
+ // touch
|
|
|
|
|
|
- domElement.addEventListener( 'pointerdown', onPointerDown );
|
|
|
|
|
|
+ var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
|
|
|
|
+ var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
|
|
|
|
|
|
- // touch
|
|
|
|
|
|
+ var prevDistance = null;
|
|
|
|
|
|
- var touches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
|
|
|
|
- var prevTouches = [ new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3() ];
|
|
|
|
|
|
+ function touchStart( event ) {
|
|
|
|
|
|
- var prevDistance = null;
|
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
|
- function touchStart( event ) {
|
|
|
|
|
|
+ switch ( event.touches.length ) {
|
|
|
|
|
|
- if ( scope.enabled === false ) return;
|
|
|
|
|
|
+ case 1:
|
|
|
|
+ touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ break;
|
|
|
|
|
|
- switch ( event.touches.length ) {
|
|
|
|
|
|
+ case 2:
|
|
|
|
+ touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
|
|
|
|
+ break;
|
|
|
|
|
|
- case 1:
|
|
|
|
- touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- break;
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- case 2:
|
|
|
|
- touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- prevDistance = touches[ 0 ].distanceTo( touches[ 1 ] );
|
|
|
|
- break;
|
|
|
|
|
|
+ prevTouches[ 0 ].copy( touches[ 0 ] );
|
|
|
|
+ prevTouches[ 1 ].copy( touches[ 1 ] );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- prevTouches[ 0 ].copy( touches[ 0 ] );
|
|
|
|
- prevTouches[ 1 ].copy( touches[ 1 ] );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ function touchMove( event ) {
|
|
|
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
|
- function touchMove( event ) {
|
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
+ event.stopPropagation();
|
|
|
|
|
|
- if ( scope.enabled === false ) return;
|
|
|
|
|
|
+ function getClosest( touch, touches ) {
|
|
|
|
|
|
- event.preventDefault();
|
|
|
|
- event.stopPropagation();
|
|
|
|
|
|
+ var closest = touches[ 0 ];
|
|
|
|
|
|
- function getClosest( touch, touches ) {
|
|
|
|
|
|
+ for ( var touch2 of touches ) {
|
|
|
|
|
|
- var closest = touches[ 0 ];
|
|
|
|
|
|
+ if ( closest.distanceTo( touch ) > touch2.distanceTo( touch ) ) closest = touch2;
|
|
|
|
|
|
- for ( var touch2 of touches ) {
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- if ( closest.distanceTo( touch ) > touch2.distanceTo( touch ) ) closest = touch2;
|
|
|
|
|
|
+ return closest;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- return closest;
|
|
|
|
|
|
+ switch ( event.touches.length ) {
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ case 1:
|
|
|
|
+ touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - 1 ) );
|
|
|
|
+ break;
|
|
|
|
|
|
- switch ( event.touches.length ) {
|
|
|
|
|
|
+ case 2:
|
|
|
|
+ touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
+ var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
|
|
|
|
+ scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
|
|
|
|
+ prevDistance = distance;
|
|
|
|
|
|
- case 1:
|
|
|
|
- touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- touches[ 1 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- scope.rotate( touches[ 0 ].sub( getClosest( touches[ 0 ], prevTouches ) ).multiplyScalar( - 1 ) );
|
|
|
|
- break;
|
|
|
|
|
|
|
|
- case 2:
|
|
|
|
- touches[ 0 ].set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- touches[ 1 ].set( event.touches[ 1 ].pageX, event.touches[ 1 ].pageY, 0 ).divideScalar( window.devicePixelRatio );
|
|
|
|
- var distance = touches[ 0 ].distanceTo( touches[ 1 ] );
|
|
|
|
- scope.zoom( delta.set( 0, 0, prevDistance - distance ) );
|
|
|
|
- prevDistance = distance;
|
|
|
|
|
|
+ var offset0 = touches[ 0 ].clone().sub( getClosest( touches[ 0 ], prevTouches ) );
|
|
|
|
+ var offset1 = touches[ 1 ].clone().sub( getClosest( touches[ 1 ], prevTouches ) );
|
|
|
|
+ offset0.x = - offset0.x;
|
|
|
|
+ offset1.x = - offset1.x;
|
|
|
|
|
|
|
|
+ scope.pan( offset0.add( offset1 ) );
|
|
|
|
|
|
- var offset0 = touches[ 0 ].clone().sub( getClosest( touches[ 0 ], prevTouches ) );
|
|
|
|
- var offset1 = touches[ 1 ].clone().sub( getClosest( touches[ 1 ], prevTouches ) );
|
|
|
|
- offset0.x = - offset0.x;
|
|
|
|
- offset1.x = - offset1.x;
|
|
|
|
|
|
+ break;
|
|
|
|
|
|
- scope.pan( offset0.add( offset1 ) );
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- break;
|
|
|
|
|
|
+ prevTouches[ 0 ].copy( touches[ 0 ] );
|
|
|
|
+ prevTouches[ 1 ].copy( touches[ 1 ] );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- prevTouches[ 0 ].copy( touches[ 0 ] );
|
|
|
|
- prevTouches[ 1 ].copy( touches[ 1 ] );
|
|
|
|
|
|
+ domElement.addEventListener( 'touchstart', touchStart );
|
|
|
|
+ domElement.addEventListener( 'touchmove', touchMove );
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
- domElement.addEventListener( 'touchstart', touchStart );
|
|
|
|
- domElement.addEventListener( 'touchmove', touchMove );
|
|
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
-EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
|
|
|
|
-EditorControls.prototype.constructor = EditorControls;
|
|
|
|
-
|
|
|
|
export { EditorControls };
|
|
export { EditorControls };
|