TransformControls: Using EventDispatcher instead of callback.

More efficient, but currently a bit buggy.

editor/js/ui/Viewport.js

@@ -42,7 +42,12 @@ var Viewport = function ( signals ) {
 	selectionBox.visible = false;
 	sceneHelpers.add( selectionBox );
 
-	var transformControls = new THREE.TransformControls( camera, container.dom, render );
+	var transformControls = new THREE.TransformControls( camera, container.dom );
+	transformControls.addEventListener( 'change', function () {
+
+		signals.objectChanged.dispatch( selected );
+
+	} );
 	sceneHelpers.add( transformControls.gizmo );
 	transformControls.hide();
 
@@ -97,22 +102,21 @@ var Viewport = function ( signals ) {
 
 		onMouseDownPosition.set( event.layerX, event.layerY );
 
-		setTimeout( function(){ 
-			if ( transformControls.active ) controls.enabled = false;
-			else controls.enabled = true;
+		setTimeout( function (){
+
+			controls.enabled = transformControls.active === false;
+
 		}, 10 );
 
 		document.addEventListener( 'mousemove', onMouseMove, false );
 		document.addEventListener( 'mouseup', onMouseUp, false );
 		document.addEventListener( 'mouseout', onMouseUp, false );
 
-		render();
-
 	};
 
 	var onMouseMove = function ( event ) {
 
-		signals.objectChanged.dispatch( selected );
+		// signals.objectChanged.dispatch( selected );
 
 	};
 
@@ -322,7 +326,11 @@ var Viewport = function ( signals ) {
 
 			selected = object;
 
-			if ( !(selected instanceof THREE.PerspectiveCamera) ) transformControls.attatch(object);
+			if ( selected instanceof THREE.PerspectiveCamera === false ) {
+
+				transformControls.attatch(object);
+
+			}
 
 		}
 

examples/js/controls/TransformControls.js

@@ -4,7 +4,7 @@
 
  //"use strict";
 
-THREE.TransformControls = function ( camera, domElement, callback ) {
+THREE.TransformControls = function ( camera, domElement ) {
 
 	// TODO: Choose a better fitting intersection plane when looking at grazing angles
 	// TODO: Make non-uniform scale and rotate play nice in hierarchies
@@ -12,7 +12,6 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 	this.camera = camera;
 	this.domElement = ( domElement !== undefined ) ? domElement : document;
-	this.callback = callback ? callback : function() {}
 
 	this.active = false;
 	this.mode = 'translate';
@@ -25,6 +24,8 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 	var scope = this;
 
+	var changeEvent = { type: 'change' };
+
 	var showPickers = false; // debug
 
 	var ray = new THREE.Raycaster();
@@ -85,7 +86,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		this.gizmo.add( displayAxes["translate"] );
 		this.gizmo.add( displayAxes["rotate"] );
 		this.gizmo.add( displayAxes["scale"] );
-		
+
 		pickerAxes["translate"] = new THREE.Object3D();
 		pickerAxes["rotate"] = new THREE.Object3D();
 		pickerAxes["scale"] = new THREE.Object3D();
@@ -198,7 +199,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		mesh.name = 'TZ';
 		displayAxes['translate'].add( mesh );
 
-		geometry = new THREE.CylinderGeometry( 0.04, 0.04, 0.8, 4, 1, false );
+		geometry = new THREE.CylinderGeometry( 0.1, 0.1, 0.8, 4, 1, false );
 
 		mesh = new THREE.Mesh( geometry, HandleMaterial( red ) );
 		mesh.position.x = 0.6;
@@ -444,8 +445,6 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 		}
 
-		this.callback();
-
 	}
 
 	this.hide = function () {
@@ -745,9 +744,10 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 
 			}
 
-		}
+			scope.updateGizmo();
+			scope.dispatchEvent( changeEvent );
 
-		scope.updateGizmo();
+		}
 
 	}
 
@@ -799,6 +799,7 @@ THREE.TransformControls = function ( camera, domElement, callback ) {
 		}
 
 		scope.updateMode();
+		scope.dispatchEvent( changeEvent );
 
 	}
 

examples/misc_controls_transform.html

@@ -38,7 +38,7 @@
 			var grid, box;
 
 			init();
-			animate();
+			render();
 
 			function init() {
 
@@ -55,7 +55,7 @@
 
 				scene = new THREE.Scene();
 
-				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );
+				var texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif', new THREE.UVMapping(), render );
 				texture.anisotropy = renderer.getMaxAnisotropy();
 
 				grid = new THREE.Mesh(
@@ -89,6 +89,7 @@
 				for ( var i = 0; i < box.length; i++ ){
 
 					var translateLocal = new THREE.TransformControls( camera, renderer.domElement );
+					translateLocal.addEventListener( 'change', render );
 					scene.add( translateLocal.gizmo );
 					translateLocal.attatch( box[i] );
 
@@ -107,9 +108,9 @@
 
 			}
 
-			function animate() {
+			function render() {
 
-				requestAnimationFrame( animate );
+				// requestAnimationFrame( animate );
 				renderer.render( scene, camera );
 
 			}