@plastic-software/three 0.167.3 → 0.174.0

package/examples/jsm/controls/FlyControls.js

@@ -1,24 +1,19 @@
 import {
-	EventDispatcher,
+	Controls,
 	Quaternion,
 	Vector3
 } from 'three';
 
 const _changeEvent = { type: 'change' };
 
-class FlyControls extends EventDispatcher {
+const _EPS = 0.000001;
+const _tmpQuaternion = new Quaternion();
 
-	constructor( object, domElement ) {
+class FlyControls extends Controls {
 
-		super();
+	constructor( object, domElement = null ) {
 
-		this.object = object;
-		this.domElement = domElement;
-
-		// API
-
-		// Set to false to disable this control
-		this.enabled = true;
+		super( object, domElement );
 
 		this.movementSpeed = 1.0;
 		this.rollSpeed = 0.005;
@@ -26,301 +21,312 @@ class FlyControls extends EventDispatcher {
 		this.dragToLook = false;
 		this.autoForward = false;
 
-		// disable default target object behavior
-
 		// internals
 
-		const scope = this;
+		this._moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
+		this._moveVector = new Vector3( 0, 0, 0 );
+		this._rotationVector = new Vector3( 0, 0, 0 );
+		this._lastQuaternion = new Quaternion();
+		this._lastPosition = new Vector3();
+		this._status = 0;
 
-		const EPS = 0.000001;
+		// event listeners
 
-		const lastQuaternion = new Quaternion();
-		const lastPosition = new Vector3();
+		this._onKeyDown = onKeyDown.bind( this );
+		this._onKeyUp = onKeyUp.bind( this );
+		this._onPointerMove = onPointerMove.bind( this );
+		this._onPointerDown = onPointerDown.bind( this );
+		this._onPointerUp = onPointerUp.bind( this );
+		this._onPointerCancel = onPointerCancel.bind( this );
+		this._onContextMenu = onContextMenu.bind( this );
 
-		this.tmpQuaternion = new Quaternion();
+		//
 
-		this.status = 0;
+		if ( domElement !== null ) {
 
-		this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
-		this.moveVector = new Vector3( 0, 0, 0 );
-		this.rotationVector = new Vector3( 0, 0, 0 );
+			this.connect();
 
-		this.keydown = function ( event ) {
+		}
 
-			if ( event.altKey || this.enabled === false ) {
+	}
 
-				return;
+	connect() {
 
-			}
+		window.addEventListener( 'keydown', this._onKeyDown );
+		window.addEventListener( 'keyup', this._onKeyUp );
 
-			switch ( event.code ) {
+		this.domElement.addEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.addEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.addEventListener( 'pointercancel', this._onPointerCancel );
+		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
 
-				case 'ShiftLeft':
-				case 'ShiftRight': this.movementSpeedMultiplier = .1; break;
+	}
 
-				case 'KeyW': this.moveState.forward = 1; break;
-				case 'KeyS': this.moveState.back = 1; break;
+	disconnect() {
 
-				case 'KeyA': this.moveState.left = 1; break;
-				case 'KeyD': this.moveState.right = 1; break;
+		window.removeEventListener( 'keydown', this._onKeyDown );
+		window.removeEventListener( 'keyup', this._onKeyUp );
 
-				case 'KeyR': this.moveState.up = 1; break;
-				case 'KeyF': this.moveState.down = 1; break;
+		this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.removeEventListener( 'pointercancel', this._onPointerCancel );
+		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
 
-				case 'ArrowUp': this.moveState.pitchUp = 1; break;
-				case 'ArrowDown': this.moveState.pitchDown = 1; break;
+	}
 
-				case 'ArrowLeft': this.moveState.yawLeft = 1; break;
-				case 'ArrowRight': this.moveState.yawRight = 1; break;
+	dispose() {
 
-				case 'KeyQ': this.moveState.rollLeft = 1; break;
-				case 'KeyE': this.moveState.rollRight = 1; break;
+		this.disconnect();
 
-			}
+	}
 
-			this.updateMovementVector();
-			this.updateRotationVector();
+	update( delta ) {
 
-		};
+		if ( this.enabled === false ) return;
 
-		this.keyup = function ( event ) {
+		const object = this.object;
 
-			if ( this.enabled === false ) return;
+		const moveMult = delta * this.movementSpeed;
+		const rotMult = delta * this.rollSpeed;
 
-			switch ( event.code ) {
+		object.translateX( this._moveVector.x * moveMult );
+		object.translateY( this._moveVector.y * moveMult );
+		object.translateZ( this._moveVector.z * moveMult );
 
-				case 'ShiftLeft':
-				case 'ShiftRight': this.movementSpeedMultiplier = 1; break;
+		_tmpQuaternion.set( this._rotationVector.x * rotMult, this._rotationVector.y * rotMult, this._rotationVector.z * rotMult, 1 ).normalize();
+		object.quaternion.multiply( _tmpQuaternion );
 
-				case 'KeyW': this.moveState.forward = 0; break;
-				case 'KeyS': this.moveState.back = 0; break;
+		if (
+			this._lastPosition.distanceToSquared( object.position ) > _EPS ||
+			8 * ( 1 - this._lastQuaternion.dot( object.quaternion ) ) > _EPS
+		) {
 
-				case 'KeyA': this.moveState.left = 0; break;
-				case 'KeyD': this.moveState.right = 0; break;
+			this.dispatchEvent( _changeEvent );
+			this._lastQuaternion.copy( object.quaternion );
+			this._lastPosition.copy( object.position );
 
-				case 'KeyR': this.moveState.up = 0; break;
-				case 'KeyF': this.moveState.down = 0; break;
+		}
 
-				case 'ArrowUp': this.moveState.pitchUp = 0; break;
-				case 'ArrowDown': this.moveState.pitchDown = 0; break;
+	}
 
-				case 'ArrowLeft': this.moveState.yawLeft = 0; break;
-				case 'ArrowRight': this.moveState.yawRight = 0; break;
+	// private
 
-				case 'KeyQ': this.moveState.rollLeft = 0; break;
-				case 'KeyE': this.moveState.rollRight = 0; break;
+	_updateMovementVector() {
 
-			}
+		const forward = ( this._moveState.forward || ( this.autoForward && ! this._moveState.back ) ) ? 1 : 0;
 
-			this.updateMovementVector();
-			this.updateRotationVector();
+		this._moveVector.x = ( - this._moveState.left + this._moveState.right );
+		this._moveVector.y = ( - this._moveState.down + this._moveState.up );
+		this._moveVector.z = ( - forward + this._moveState.back );
 
-		};
+		//console.log( 'move:', [ this._moveVector.x, this._moveVector.y, this._moveVector.z ] );
 
-		this.pointerdown = function ( event ) {
+	}
 
-			if ( this.enabled === false ) return;
+	_updateRotationVector() {
 
-			if ( this.dragToLook ) {
+		this._rotationVector.x = ( - this._moveState.pitchDown + this._moveState.pitchUp );
+		this._rotationVector.y = ( - this._moveState.yawRight + this._moveState.yawLeft );
+		this._rotationVector.z = ( - this._moveState.rollRight + this._moveState.rollLeft );
 
-				this.status ++;
+		//console.log( 'rotate:', [ this._rotationVector.x, this._rotationVector.y, this._rotationVector.z ] );
 
-			} else {
+	}
 
-				switch ( event.button ) {
+	_getContainerDimensions() {
 
-					case 0: this.moveState.forward = 1; break;
-					case 2: this.moveState.back = 1; break;
+		if ( this.domElement != document ) {
 
-				}
+			return {
+				size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
+				offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
+			};
 
-				this.updateMovementVector();
+		} else {
 
-			}
+			return {
+				size: [ window.innerWidth, window.innerHeight ],
+				offset: [ 0, 0 ]
+			};
 
-		};
+		}
 
-		this.pointermove = function ( event ) {
+	}
 
-			if ( this.enabled === false ) return;
+}
 
-			if ( ! this.dragToLook || this.status > 0 ) {
+function onKeyDown( event ) {
 
-				const container = this.getContainerDimensions();
-				const halfWidth = container.size[ 0 ] / 2;
-				const halfHeight = container.size[ 1 ] / 2;
+	if ( event.altKey || this.enabled === false ) {
 
-				this.moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
-				this.moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
+		return;
 
-				this.updateRotationVector();
+	}
+
+	switch ( event.code ) {
 
-			}
+		case 'ShiftLeft':
+		case 'ShiftRight': this.movementSpeedMultiplier = .1; break;
 
-		};
+		case 'KeyW': this._moveState.forward = 1; break;
+		case 'KeyS': this._moveState.back = 1; break;
 
-		this.pointerup = function ( event ) {
+		case 'KeyA': this._moveState.left = 1; break;
+		case 'KeyD': this._moveState.right = 1; break;
 
-			if ( this.enabled === false ) return;
+		case 'KeyR': this._moveState.up = 1; break;
+		case 'KeyF': this._moveState.down = 1; break;
 
-			if ( this.dragToLook ) {
+		case 'ArrowUp': this._moveState.pitchUp = 1; break;
+		case 'ArrowDown': this._moveState.pitchDown = 1; break;
 
-				this.status --;
+		case 'ArrowLeft': this._moveState.yawLeft = 1; break;
+		case 'ArrowRight': this._moveState.yawRight = 1; break;
 
-				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+		case 'KeyQ': this._moveState.rollLeft = 1; break;
+		case 'KeyE': this._moveState.rollRight = 1; break;
 
-			} else {
+	}
 
-				switch ( event.button ) {
+	this._updateMovementVector();
+	this._updateRotationVector();
 
-					case 0: this.moveState.forward = 0; break;
-					case 2: this.moveState.back = 0; break;
+}
 
-				}
+function onKeyUp( event ) {
 
-				this.updateMovementVector();
+	if ( this.enabled === false ) return;
 
-			}
+	switch ( event.code ) {
 
-			this.updateRotationVector();
+		case 'ShiftLeft':
+		case 'ShiftRight': this.movementSpeedMultiplier = 1; break;
 
-		};
+		case 'KeyW': this._moveState.forward = 0; break;
+		case 'KeyS': this._moveState.back = 0; break;
 
-		this.pointercancel = function () {
+		case 'KeyA': this._moveState.left = 0; break;
+		case 'KeyD': this._moveState.right = 0; break;
 
-			if ( this.enabled === false ) return;
+		case 'KeyR': this._moveState.up = 0; break;
+		case 'KeyF': this._moveState.down = 0; break;
 
-			if ( this.dragToLook ) {
+		case 'ArrowUp': this._moveState.pitchUp = 0; break;
+		case 'ArrowDown': this._moveState.pitchDown = 0; break;
 
-				this.status = 0;
+		case 'ArrowLeft': this._moveState.yawLeft = 0; break;
+		case 'ArrowRight': this._moveState.yawRight = 0; break;
 
-				this.moveState.yawLeft = this.moveState.pitchDown = 0;
+		case 'KeyQ': this._moveState.rollLeft = 0; break;
+		case 'KeyE': this._moveState.rollRight = 0; break;
 
-			} else {
+	}
 
-				this.moveState.forward = 0;
-				this.moveState.back = 0;
+	this._updateMovementVector();
+	this._updateRotationVector();
 
-				this.updateMovementVector();
+}
 
-			}
+function onPointerDown( event ) {
 
-			this.updateRotationVector();
+	if ( this.enabled === false ) return;
 
-		};
+	if ( this.dragToLook ) {
 
-		this.contextMenu = function ( event ) {
+		this._status ++;
 
-			if ( this.enabled === false ) return;
+	} else {
 
-			event.preventDefault();
+		switch ( event.button ) {
 
-		};
+			case 0: this._moveState.forward = 1; break;
+			case 2: this._moveState.back = 1; break;
 
-		this.update = function ( delta ) {
+		}
 
-			if ( this.enabled === false ) return;
+		this._updateMovementVector();
 
-			const moveMult = delta * scope.movementSpeed;
-			const rotMult = delta * scope.rollSpeed;
+	}
 
-			scope.object.translateX( scope.moveVector.x * moveMult );
-			scope.object.translateY( scope.moveVector.y * moveMult );
-			scope.object.translateZ( scope.moveVector.z * moveMult );
+}
 
-			scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
-			scope.object.quaternion.multiply( scope.tmpQuaternion );
+function onPointerMove( event ) {
 
-			if (
-				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
-				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
-			) {
+	if ( this.enabled === false ) return;
 
-				scope.dispatchEvent( _changeEvent );
-				lastQuaternion.copy( scope.object.quaternion );
-				lastPosition.copy( scope.object.position );
+	if ( ! this.dragToLook || this._status > 0 ) {
 
-			}
+		const container = this._getContainerDimensions();
+		const halfWidth = container.size[ 0 ] / 2;
+		const halfHeight = container.size[ 1 ] / 2;
 
-		};
+		this._moveState.yawLeft = - ( ( event.pageX - container.offset[ 0 ] ) - halfWidth ) / halfWidth;
+		this._moveState.pitchDown = ( ( event.pageY - container.offset[ 1 ] ) - halfHeight ) / halfHeight;
 
-		this.updateMovementVector = function () {
+		this._updateRotationVector();
 
-			const forward = ( this.moveState.forward || ( this.autoForward && ! this.moveState.back ) ) ? 1 : 0;
+	}
 
-			this.moveVector.x = ( - this.moveState.left + this.moveState.right );
-			this.moveVector.y = ( - this.moveState.down + this.moveState.up );
-			this.moveVector.z = ( - forward + this.moveState.back );
+}
 
-			//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
+function onPointerUp( event ) {
 
-		};
+	if ( this.enabled === false ) return;
 
-		this.updateRotationVector = function () {
+	if ( this.dragToLook ) {
 
-			this.rotationVector.x = ( - this.moveState.pitchDown + this.moveState.pitchUp );
-			this.rotationVector.y = ( - this.moveState.yawRight + this.moveState.yawLeft );
-			this.rotationVector.z = ( - this.moveState.rollRight + this.moveState.rollLeft );
+		this._status --;
 
-			//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
+		this._moveState.yawLeft = this._moveState.pitchDown = 0;
 
-		};
+	} else {
 
-		this.getContainerDimensions = function () {
+		switch ( event.button ) {
 
-			if ( this.domElement != document ) {
+			case 0: this._moveState.forward = 0; break;
+			case 2: this._moveState.back = 0; break;
 
-				return {
-					size: [ this.domElement.offsetWidth, this.domElement.offsetHeight ],
-					offset: [ this.domElement.offsetLeft, this.domElement.offsetTop ]
-				};
+		}
 
-			} else {
+		this._updateMovementVector();
 
-				return {
-					size: [ window.innerWidth, window.innerHeight ],
-					offset: [ 0, 0 ]
-				};
+	}
 
-			}
+	this._updateRotationVector();
 
-		};
+}
 
-		this.dispose = function () {
+function onPointerCancel() {
 
-			this.domElement.removeEventListener( 'contextmenu', _contextmenu );
-			this.domElement.removeEventListener( 'pointerdown', _pointerdown );
-			this.domElement.removeEventListener( 'pointermove', _pointermove );
-			this.domElement.removeEventListener( 'pointerup', _pointerup );
-			this.domElement.removeEventListener( 'pointercancel', _pointercancel );
+	if ( this.enabled === false ) return;
 
-			window.removeEventListener( 'keydown', _keydown );
-			window.removeEventListener( 'keyup', _keyup );
+	if ( this.dragToLook ) {
 
-		};
+		this._status = 0;
 
-		const _contextmenu = this.contextMenu.bind( this );
-		const _pointermove = this.pointermove.bind( this );
-		const _pointerdown = this.pointerdown.bind( this );
-		const _pointerup = this.pointerup.bind( this );
-		const _pointercancel = this.pointercancel.bind( this );
-		const _keydown = this.keydown.bind( this );
-		const _keyup = this.keyup.bind( this );
+		this._moveState.yawLeft = this._moveState.pitchDown = 0;
 
-		this.domElement.addEventListener( 'contextmenu', _contextmenu );
-		this.domElement.addEventListener( 'pointerdown', _pointerdown );
-		this.domElement.addEventListener( 'pointermove', _pointermove );
-		this.domElement.addEventListener( 'pointerup', _pointerup );
-		this.domElement.addEventListener( 'pointercancel', _pointercancel );
+	} else {
 
-		window.addEventListener( 'keydown', _keydown );
-		window.addEventListener( 'keyup', _keyup );
+		this._moveState.forward = 0;
+		this._moveState.back = 0;
 
-		this.updateMovementVector();
-		this.updateRotationVector();
+		this._updateMovementVector();
 
 	}
 
+	this._updateRotationVector();
+
+}
+
+function onContextMenu( event ) {
+
+	if ( this.enabled === false ) return;
+
+	event.preventDefault();
+
 }
 
 export { FlyControls };