Added EventTarget to TrackballControls. Fixes #1189.

Now we can do things like this:

controls = new THREE.TrackballControls( camera );
controls.addEventListener( 'update', render );

Sadly, some examples are slightly broken until we have better pipeline for assets load complete event dispatching.

examples/misc_camera_trackball.html

@@ -40,20 +40,19 @@
 		<script src="../build/Three.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/Stats.js"></script>
 
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var container;
 
 			var camera, controls, scene, renderer;
 
 			var cross;
 
 			init();
-			animate();
+			render();
 
 			function init() {
 
@@ -81,6 +80,8 @@
 
 				controls.keys = [ 65, 83, 68 ];
 
+				controls.addEventListener( 'update', render );
+
 				// world
 
 				var cube = new THREE.CubeGeometry( 20, 60, 20 );
@@ -129,28 +130,11 @@
 				container = document.getElementById( 'container' );
 				container.appendChild( renderer.domElement );
 
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				stats.domElement.style.zIndex = 100;
-				container.appendChild( stats.domElement );
-
-
-			}
-
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
 
 			}
 
 			function render() {
 
-				controls.update();
 				renderer.render( scene, camera );
 
 			}

examples/webgl_lights_pointlights2.html

@@ -79,35 +79,20 @@
 
 				// CONTROLS
 
-				if ( 1 ) {
+				controls = new THREE.TrackballControls( camera );
+				controls.target.set( 0, 0, 0 );
 
-					controls = new THREE.TrackballControls( camera );
-					controls.target.set( 0, 0, 0 );
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
 
-					controls.rotateSpeed = 1.0;
-					controls.zoomSpeed = 1.2;
-					controls.panSpeed = 0.8;
+				controls.noZoom = false;
+				controls.noPan = false;
 
-					controls.noZoom = false;
-					controls.noPan = false;
-
-					controls.staticMoving = false;
-					controls.dynamicDampingFactor = 0.15;
-
-					controls.keys = [ 65, 83, 68 ];
-
-				} else {
-
-					controls = new THREE.FirstPersonControls( camera );
-
-					controls.movementSpeed = 25;
-					controls.lookSpeed = 0.05;
-					controls.lookVertical = true;
-
-					controls.lon = -90;
-
-				}
+				controls.staticMoving = false;
+				controls.dynamicDampingFactor = 0.15;
 
+				controls.keys = [ 65, 83, 68 ];
 
 				// TEXTURES
 
@@ -255,8 +240,6 @@
 
 			function render() {
 
-				controls.update( clock.getDelta() );
-
 				var time = Date.now() * 0.00025;
 				var z = 20, d = 150;
 

examples/webgl_loader_ctm_materials.html

@@ -44,8 +44,7 @@
 		<script src="js/ctm/CTMLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
-		<script src="js/Stats.js"></script>
-
+		
 		<script>
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
@@ -54,7 +53,7 @@
 			var SCREEN_HEIGHT = window.innerHeight;
 			var FLOOR = -250;
 
-			var container, stats;
+			var container;
 
 			var camera, scene, controls;
 			var renderer;
@@ -72,7 +71,6 @@
 			var windowHalfY = window.innerHeight / 2;
 
 			init();
-			animate();
 
 			function init() {
 
@@ -91,7 +89,7 @@
 
 				controls = new THREE.TrackballControls( camera );
 				controls.dynamicDampingFactor = 0.25;
-
+				controls.addEventListener( 'update', render );
 
 				// SKYBOX
 
@@ -105,7 +103,7 @@
 							 r + "pz.png", r + "nz.png" ];
 
 
-				textureCube = THREE.ImageUtils.loadTextureCube( urls );
+				textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.UVMapping(), render );
 
 				var shader = THREE.ShaderUtils.lib[ "cube" ];
 				shader.uniforms[ "tCube" ].texture = textureCube;
@@ -157,18 +155,6 @@
 				renderer.gammaOutput = true;
 				renderer.physicallyBasedShading = true;
 
-				// STATS
-
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '5px';
-				stats.domElement.style.zIndex = 100;
-				container.appendChild( stats.domElement );
-
-				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#aaa";
-				stats.domElement.children[ 0 ].style.background = "transparent";
-				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
-
 				// EVENTS
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -304,6 +290,8 @@
 				mesh.scale.set( s, s, s );
 				mesh.doubleSided = true;
 				scene.add( mesh );
+	
+				render();
 
 			}
 
@@ -322,6 +310,8 @@
 				cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 				cameraCube.updateProjectionMatrix();
 
+				render();
+
 			}
 
 
@@ -334,19 +324,8 @@
 
 			//
 
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
 			function render() {
 
-				controls.update();
-
 				cameraCube.rotation.copy( camera.rotation );
 
 				renderer.clear();

examples/webgl_morphtargets_md2.html

@@ -383,7 +383,6 @@
 
 				var delta = clock.getDelta();
 
-				controls.update( delta );
 				character.update( delta );
 
 				renderer.render( scene, camera );

examples/webgl_shading_physical.html

@@ -550,7 +550,6 @@
 				var delta = 1000 * clock.getDelta();
 
 				TWEEN.update();
-				controls.update();
 
 				if ( morph ) morph.updateAnimation( delta );
 

examples/webgl_terrain_dynamic.html

@@ -683,8 +683,6 @@
 
 				if ( terrain.visible ) {
 
-					controls.update();
-
 					var time = Date.now() * 0.001;
 
 					var fLow = 0.4, fHigh = 0.825;

examples/webgl_trackballcamera_earth.html

@@ -287,8 +287,6 @@
 				);
 				meshMoon.rotation.y -= angle;
 
-				controls.update();
-
 				renderer.clear();
 				renderer.render( scene, camera );
 

src/extras/controls/TrackballControls.js

@@ -4,6 +4,8 @@
 
 THREE.TrackballControls = function ( object, domElement ) {
 
+	THREE.EventTarget.call( this );
+
 	var _this = this,
 	STATE = { NONE : -1, ROTATE : 0, ZOOM : 1, PAN : 2 };
 
@@ -206,37 +208,6 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	};
 
-	this.update = function() {
-
-		_eye.copy( _this.object.position ).subSelf( this.target );
-
-		if ( !_this.noRotate ) {
-
-			_this.rotateCamera();
-
-		}
-		
-		if ( !_this.noZoom ) {
-
-			_this.zoomCamera();
-
-		}
-
-		if ( !_this.noPan ) {
-
-			_this.panCamera();
-
-		}
-
-		_this.object.position.add( _this.target, _eye );
-
-		_this.checkDistances();
-
-		_this.object.lookAt( _this.target );
-
-	};
-
-
 	// listeners
 
 	function keydown( event ) {
@@ -342,6 +313,8 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 		}
 
+		update();
+
 	};
 
 	function mouseup( event ) {
@@ -355,6 +328,40 @@ THREE.TrackballControls = function ( object, domElement ) {
 
 	};
 
+	//
+
+	function update() {
+
+		_eye.copy( _this.object.position ).subSelf( _this.target );
+
+		if ( !_this.noRotate ) {
+
+			_this.rotateCamera();
+
+		}
+		
+		if ( !_this.noZoom ) {
+
+			_this.zoomCamera();
+
+		}
+
+		if ( !_this.noPan ) {
+
+			_this.panCamera();
+
+		}
+
+		_this.object.position.add( _this.target, _eye );
+
+		_this.checkDistances();
+
+		_this.object.lookAt( _this.target );
+
+		_this.dispatchEvent( { type: 'update' } );
+
+	};
+
 	this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );
 
 	this.domElement.addEventListener( 'mousemove', mousemove, false );
@@ -364,4 +371,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 	window.addEventListener( 'keydown', keydown, false );
 	window.addEventListener( 'keyup', keyup, false );
 
+	// TODO: Clean up the code so this isn't needed.
+	update();
+
 };

src/extras/core/EventTarget.js

+/**
+ * https://github.com/mrdoob/eventtarget.js/
+ */
+
+THREE.EventTarget = function () {
+
+	var listeners = {};
+
+	this.addEventListener = function ( type, listener ) {
+
+		if ( listeners[ type ] == undefined ) {
+
+			listeners[ type ] = [];
+
+		}
+
+		if ( listeners[ type ].indexOf( listener ) === - 1 ) {
+
+			listeners[ type ].push( listener );
+
+		}
+
+	};
+
+	this.dispatchEvent = function ( event ) {
+
+		for ( var listener in listeners[ event.type ] ) {
+
+			listeners[ event.type ][ listener ]( event );
+
+		}
+
+	};
+
+	this.removeEventListener = function ( type, listener ) {
+
+		var index = listeners[ type ].indexOf( listener );
+
+		if ( index !== - 1 ) {
+
+			listeners[ type ].splice( index, 1 );
+
+		}
+
+	};
+
+};

utils/build.py

@@ -94,6 +94,7 @@ EXTRAS_FILES = [
 'extras/core/BufferGeometry.js',
 'extras/core/Curve.js',
 'extras/core/CurvePath.js',
+'extras/core/EventTarget.js',
 'extras/core/Gyroscope.js',
 'extras/core/Path.js',
 'extras/core/Shape.js',