Merge pull request #19924 from gsimone/controls-event-dispatcher

Adds EventDispatcher and change event to DeviceOrientationControls and FlyControls

docs/examples/en/controls/DeviceOrientationControls.html

@@ -31,6 +31,13 @@
 			</p>
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
 		<h2>Properties</h2>
 
 		<h3>[property:Number alphaOffset]</h3>

docs/examples/en/controls/FlyControls.html

@@ -35,6 +35,13 @@
 			</p>
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
 		<h2>Properties</h2>
 
 		<h3>[property:Boolean autoForward]</h3>

docs/examples/zh/controls/DeviceOrientationControls.html

@@ -31,6 +31,13 @@
 			</p>
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
 		<h2>属性</h2>
 
 		<h3>[property:Number alphaOffset]</h3>

docs/examples/zh/controls/FlyControls.html

@@ -35,6 +35,13 @@
 			</p>
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
 		<h2>属性</h2>
 
 		<h3>[property:Boolean autoForward]</h3>

examples/js/controls/DeviceOrientationControls.js

@@ -7,6 +7,8 @@ console.warn( "THREE.DeviceOrientationControls: As part of the transition to ES6
 THREE.DeviceOrientationControls = function ( object ) {
 
 	var scope = this;
+	var changeEvent = { type: "change" };
+	var EPS = 0.000001;
 
 	this.object = object;
 	this.object.rotation.reorder( 'YXZ' );
@@ -99,28 +101,41 @@ THREE.DeviceOrientationControls = function ( object ) {
 
 	};
 
-	this.update = function () {
+	this.update = ( function () {
 
-		if ( scope.enabled === false ) return;
+		var lastQuaternion = new THREE.Quaternion();
 
-		var device = scope.deviceOrientation;
+		return function () {
 
-		if ( device ) {
+			if ( scope.enabled === false ) return;
 
-			var alpha = device.alpha ? THREE.MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
+			var device = scope.deviceOrientation;
 
-			var beta = device.beta ? THREE.MathUtils.degToRad( device.beta ) : 0; // X'
+			if ( device ) {
 
-			var gamma = device.gamma ? THREE.MathUtils.degToRad( device.gamma ) : 0; // Y''
+				var alpha = device.alpha ? THREE.MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
 
-			var orient = scope.screenOrientation ? THREE.MathUtils.degToRad( scope.screenOrientation ) : 0; // O
+				var beta = device.beta ? THREE.MathUtils.degToRad( device.beta ) : 0; // X'
 
-			setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
+				var gamma = device.gamma ? THREE.MathUtils.degToRad( device.gamma ) : 0; // Y''
 
-		}
+				var orient = scope.screenOrientation ? THREE.MathUtils.degToRad( scope.screenOrientation ) : 0; // O
 
+				setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
 
-	};
+				if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
+
+					lastQuaternion.copy( scope.object.quaternion );
+					scope.dispatchEvent( changeEvent );
+
+				}
+
+			}
+
+		};
+
+
+	} )();
 
 	this.dispose = function () {
 
@@ -131,3 +146,6 @@ THREE.DeviceOrientationControls = function ( object ) {
 	this.connect();
 
 };
+
+THREE.DeviceOrientationControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.DeviceOrientationControls.prototype.constructor = THREE.DeviceOrientationControls;

examples/js/controls/FlyControls.js

@@ -26,6 +26,10 @@ THREE.FlyControls = function ( object, domElement ) {
 
 	// internals
 
+	var scope = this;
+	var changeEvent = { type: "change" };
+	var EPS = 0.000001;
+
 	this.tmpQuaternion = new THREE.Quaternion();
 
 	this.mouseStatus = 0;
@@ -179,23 +183,40 @@ THREE.FlyControls = function ( object, domElement ) {
 
 	};
 
-	this.update = function ( delta ) {
+	this.update = function () {
 
-		var moveMult = delta * this.movementSpeed;
-		var rotMult = delta * this.rollSpeed;
+		var lastQuaternion = new THREE.Quaternion();
+		var lastPosition = new THREE.Vector3();
 
-		this.object.translateX( this.moveVector.x * moveMult );
-		this.object.translateY( this.moveVector.y * moveMult );
-		this.object.translateZ( this.moveVector.z * moveMult );
+		return function ( delta ) {
 
-		this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
-		this.object.quaternion.multiply( this.tmpQuaternion );
+			var moveMult = delta * scope.movementSpeed;
+			var rotMult = delta * scope.rollSpeed;
 
-		// expose the rotation vector for convenience
-		this.object.rotation.setFromQuaternion( this.object.quaternion, this.object.rotation.order );
+			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 );
 
-	};
+			// expose the rotation vector for convenience
+			scope.object.rotation.setFromQuaternion( scope.object.quaternion, scope.object.rotation.order );
+
+			if (
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
+			) {
+
+				scope.dispatchEvent( changeEvent );
+				lastQuaternion.copy( scope.object.quaternion );
+				lastPosition.copy( scope.object.position );
+
+			}
+
+		};
+
+	}();
 
 	this.updateMovementVector = function () {
 
@@ -286,3 +307,6 @@ THREE.FlyControls = function ( object, domElement ) {
 	this.updateRotationVector();
 
 };
+
+THREE.FlyControls.prototype = Object.create( THREE.EventDispatcher.prototype );
+THREE.FlyControls.prototype.constructor = THREE.FlyControls;

examples/jsm/controls/DeviceOrientationControls.d.ts

@@ -1,8 +1,6 @@
-import {
-	Camera
-} from '../../../src/Three';
+import { Camera, EventDispatcher } from "../../../src/Three";
 
-export class DeviceOrientationControls {
+export class DeviceOrientationControls extends EventDispatcher {
 
 	constructor( object: Camera );
 

examples/jsm/controls/DeviceOrientationControls.js

@@ -1,5 +1,6 @@
 import {
 	Euler,
+	EventDispatcher,
 	MathUtils,
 	Quaternion,
 	Vector3
@@ -12,6 +13,8 @@ import {
 var DeviceOrientationControls = function ( object ) {
 
 	var scope = this;
+	var changeEvent = { type: "change" };
+	var EPS = 0.000001;
 
 	this.object = object;
 	this.object.rotation.reorder( 'YXZ' );
@@ -104,28 +107,41 @@ var DeviceOrientationControls = function ( object ) {
 
 	};
 
-	this.update = function () {
+	this.update = ( function () {
 
-		if ( scope.enabled === false ) return;
+		var lastQuaternion = new Quaternion();
 
-		var device = scope.deviceOrientation;
+		return function () {
 
-		if ( device ) {
+			if ( scope.enabled === false ) return;
 
-			var alpha = device.alpha ? MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
+			var device = scope.deviceOrientation;
 
-			var beta = device.beta ? MathUtils.degToRad( device.beta ) : 0; // X'
+			if ( device ) {
 
-			var gamma = device.gamma ? MathUtils.degToRad( device.gamma ) : 0; // Y''
+				var alpha = device.alpha ? MathUtils.degToRad( device.alpha ) + scope.alphaOffset : 0; // Z
 
-			var orient = scope.screenOrientation ? MathUtils.degToRad( scope.screenOrientation ) : 0; // O
+				var beta = device.beta ? MathUtils.degToRad( device.beta ) : 0; // X'
 
-			setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
+				var gamma = device.gamma ? MathUtils.degToRad( device.gamma ) : 0; // Y''
 
-		}
+				var orient = scope.screenOrientation ? MathUtils.degToRad( scope.screenOrientation ) : 0; // O
 
+				setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
 
-	};
+				if ( 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
+
+					lastQuaternion.copy( scope.object.quaternion );
+					scope.dispatchEvent( changeEvent );
+
+				}
+
+			}
+
+		};
+
+
+	} )();
 
 	this.dispose = function () {
 
@@ -137,4 +153,7 @@ var DeviceOrientationControls = function ( object ) {
 
 };
 
+DeviceOrientationControls.prototype = Object.create( EventDispatcher.prototype );
+DeviceOrientationControls.prototype.constructor = DeviceOrientationControls;
+
 export { DeviceOrientationControls };

examples/jsm/controls/FlyControls.d.ts

@@ -1,8 +1,8 @@
 import {
-	Camera
+	Camera, EventDispatcher
 } from '../../../src/Three';
 
-export class FlyControls {
+export class FlyControls extends EventDispatcher {
 
 	constructor( object: Camera, domElement?: HTMLElement );
 

examples/jsm/controls/FlyControls.js

@@ -1,4 +1,5 @@
 import {
+	EventDispatcher,
 	Quaternion,
 	Vector3
 } from "../../../build/three.module.js";
@@ -29,6 +30,10 @@ var FlyControls = function ( object, domElement ) {
 
 	// internals
 
+	var scope = this;
+	var changeEvent = { type: "change" };
+	var EPS = 0.000001;
+
 	this.tmpQuaternion = new Quaternion();
 
 	this.mouseStatus = 0;
@@ -182,23 +187,40 @@ var FlyControls = function ( object, domElement ) {
 
 	};
 
-	this.update = function ( delta ) {
+	this.update = function () {
 
-		var moveMult = delta * this.movementSpeed;
-		var rotMult = delta * this.rollSpeed;
+		var lastQuaternion = new Quaternion();
+		var lastPosition = new Vector3();
 
-		this.object.translateX( this.moveVector.x * moveMult );
-		this.object.translateY( this.moveVector.y * moveMult );
-		this.object.translateZ( this.moveVector.z * moveMult );
+		return function ( delta ) {
 
-		this.tmpQuaternion.set( this.rotationVector.x * rotMult, this.rotationVector.y * rotMult, this.rotationVector.z * rotMult, 1 ).normalize();
-		this.object.quaternion.multiply( this.tmpQuaternion );
+			var moveMult = delta * scope.movementSpeed;
+			var rotMult = delta * scope.rollSpeed;
 
-		// expose the rotation vector for convenience
-		this.object.rotation.setFromQuaternion( this.object.quaternion, this.object.rotation.order );
+			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 );
 
-	};
+			// expose the rotation vector for convenience
+			scope.object.rotation.setFromQuaternion( scope.object.quaternion, scope.object.rotation.order );
+
+			if (
+				lastPosition.distanceToSquared( scope.object.position ) > EPS ||
+				8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS
+			) {
+
+				scope.dispatchEvent( changeEvent );
+				lastQuaternion.copy( scope.object.quaternion );
+				lastPosition.copy( scope.object.position );
+
+			}
+
+		};
+
+	}();
 
 	this.updateMovementVector = function () {
 
@@ -290,4 +312,7 @@ var FlyControls = function ( object, domElement ) {
 
 };
 
+FlyControls.prototype = Object.create( EventDispatcher.prototype );
+FlyControls.prototype.constructor = FlyControls;
+
 export { FlyControls };