|
@@ -0,0 +1,161 @@
|
|
|
|
|
+/**
|
|
|
|
|
+ * @author qiao / https://github.com/qiao
|
|
|
|
|
+ * @author mrdoob / http://mrdoob.com
|
|
|
|
|
+ * @author alteredq / http://alteredqualia.com/
|
|
|
|
|
+ * @author WestLangley / http://github.com/WestLangley
|
|
|
|
|
+ */
|
|
|
|
|
+
|
|
|
|
|
+THREE.EditorControls = function ( object, domElement ) {
|
|
|
|
|
+
|
|
|
|
|
+ this.object = object;
|
|
|
|
|
+ this.domElement = ( domElement !== undefined ) ? domElement : document;
|
|
|
|
|
+
|
|
|
|
|
+ // API
|
|
|
|
|
+
|
|
|
|
|
+ this.enabled = true;
|
|
|
|
|
+
|
|
|
|
|
+ this.center = new THREE.Vector3();
|
|
|
|
|
+
|
|
|
|
|
+ // internals
|
|
|
|
|
+
|
|
|
|
|
+ var scope = this;
|
|
|
|
|
+ var normalMatrix = new THREE.Matrix3();
|
|
|
|
|
+
|
|
|
|
|
+ var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };
|
|
|
|
|
+ var state = STATE.NONE;
|
|
|
|
|
+
|
|
|
|
|
+ // events
|
|
|
|
|
+
|
|
|
|
|
+ var changeEvent = { type: 'change' };
|
|
|
|
|
+
|
|
|
|
|
+ this.pan = function ( distance ) {
|
|
|
|
|
+
|
|
|
|
|
+ normalMatrix.getNormalMatrix( this.object.matrix );
|
|
|
|
|
+
|
|
|
|
|
+ distance.applyMatrix3( normalMatrix );
|
|
|
|
|
+
|
|
|
|
|
+ this.object.position.add( distance );
|
|
|
|
|
+ this.center.add( distance );
|
|
|
|
|
+
|
|
|
|
|
+ this.dispatchEvent( changeEvent );
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ this.rotate = function ( delta ) {
|
|
|
|
|
+
|
|
|
|
|
+ var position = this.object.position;
|
|
|
|
|
+ var offset = position.clone().sub( this.center );
|
|
|
|
|
+
|
|
|
|
|
+ var theta = Math.atan2( offset.x, offset.z );
|
|
|
|
|
+ var phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );
|
|
|
|
|
+
|
|
|
|
|
+ theta += delta.x;
|
|
|
|
|
+ phi += delta.y;
|
|
|
|
|
+
|
|
|
|
|
+ var EPS = 0.000001;
|
|
|
|
|
+
|
|
|
|
|
+ phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
|
|
|
|
|
+
|
|
|
|
|
+ var radius = offset.length();
|
|
|
|
|
+
|
|
|
|
|
+ offset.x = radius * Math.sin( phi ) * Math.sin( theta );
|
|
|
|
|
+ offset.y = radius * Math.cos( phi );
|
|
|
|
|
+ offset.z = radius * Math.sin( phi ) * Math.cos( theta );
|
|
|
|
|
+
|
|
|
|
|
+ position.copy( this.center ).add( offset );
|
|
|
|
|
+
|
|
|
|
|
+ this.object.lookAt( this.center );
|
|
|
|
|
+
|
|
|
|
|
+ this.dispatchEvent( changeEvent );
|
|
|
|
|
+
|
|
|
|
|
+ };
|
|
|
|
|
+
|
|
|
|
|
+ function onMouseDown( event ) {
|
|
|
|
|
+
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
+
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
+
|
|
|
|
|
+ if ( event.button === 0 ) {
|
|
|
|
|
+
|
|
|
|
|
+ state = STATE.ROTATE;
|
|
|
|
|
+
|
|
|
|
|
+ } else if ( event.button === 1 ) {
|
|
|
|
|
+
|
|
|
|
|
+ state = STATE.ZOOM;
|
|
|
|
|
+
|
|
|
|
|
+ } else if ( event.button === 2 ) {
|
|
|
|
|
+
|
|
|
|
|
+ state = STATE.PAN;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ document.addEventListener( 'mousemove', onMouseMove, false );
|
|
|
|
|
+ document.addEventListener( 'mouseup', onMouseUp, false );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function onMouseMove( event ) {
|
|
|
|
|
+
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
+
|
|
|
|
|
+ event.preventDefault();
|
|
|
|
|
+
|
|
|
|
|
+ var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
|
|
|
|
|
+ var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
|
|
|
|
|
+
|
|
|
|
|
+ if ( state === STATE.ROTATE ) {
|
|
|
|
|
+
|
|
|
|
|
+ scope.rotate( new THREE.Vector3( - movementX * 0.005, - movementY * 0.005, 0 ) );
|
|
|
|
|
+
|
|
|
|
|
+ } else if ( state === STATE.ZOOM ) {
|
|
|
|
|
+
|
|
|
|
|
+ scope.pan( new THREE.Vector3( 0, 0, movementY ) );
|
|
|
|
|
+
|
|
|
|
|
+ } else if ( state === STATE.PAN ) {
|
|
|
|
|
+
|
|
|
|
|
+ scope.pan( new THREE.Vector3( - movementX * 0.5, movementY * 0.5, 0 ) );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function onMouseUp( event ) {
|
|
|
|
|
+
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
+
|
|
|
|
|
+ document.removeEventListener( 'mousemove', onMouseMove, false );
|
|
|
|
|
+ document.removeEventListener( 'mouseup', onMouseUp, false );
|
|
|
|
|
+
|
|
|
|
|
+ state = STATE.NONE;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function onMouseWheel( event ) {
|
|
|
|
|
+
|
|
|
|
|
+ if ( scope.enabled === false ) return;
|
|
|
|
|
+
|
|
|
|
|
+ var delta = 0;
|
|
|
|
|
+
|
|
|
|
|
+ if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9
|
|
|
|
|
+
|
|
|
|
|
+ delta = - event.wheelDelta;
|
|
|
|
|
+
|
|
|
|
|
+ } else if ( event.detail ) { // Firefox
|
|
|
|
|
+
|
|
|
|
|
+ delta = event.detail;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ scope.pan( new THREE.Vector3( 0, 0, delta * 0.1 ) );
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
|
|
|
|
|
+ this.domElement.addEventListener( 'mousedown', onMouseDown, false );
|
|
|
|
|
+ this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
|
|
|
|
|
+ this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox
|
|
|
|
|
+
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+THREE.EditorControls.prototype = Object.create( THREE.EventDispatcher.prototype );
|
Mr.doob