Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Updating r66.

Mr.doob 11 years ago
parent
ccfbe9947f
commit
a5e8f33563
33 changed files with 1590 additions and 2043 deletions
Unified View Show Diff Stats
  1. 481 403
      build/three.js
  2. 111 114
      build/three.min.js
  3. 42 44
      docs/api/extras/animation/Animation.html
  4. 3 1
      editor/js/Storage.js
  5. 1 1
      editor/js/Viewport.js
  6. 1 0
      examples/canvas_camera_orthographic.html
  7. 1 0
      examples/canvas_camera_orthographic2.html
  8. 1 0
      examples/canvas_geometry2_sandbox.html
  9. 1 1
      examples/canvas_geometry_birds.html
  10. 1 0
      examples/canvas_geometry_cube.html
  11. 1 0
      examples/canvas_geometry_earth.html
  12. 1 1
      examples/canvas_geometry_hierarchy.html
  13. 1 0
      examples/canvas_geometry_nurbs.html
  14. 2 2
      examples/canvas_geometry_shapes.html
  15. 1 0
      examples/canvas_geometry_terrain.html
  16. 1 0
      examples/canvas_geometry_text.html
  17. 1 0
      examples/canvas_interactive_cubes.html
  18. 1 0
      examples/canvas_interactive_cubes_tween.html
  19. 1 1
      examples/canvas_interactive_lines.html
  20. 1 1
      examples/canvas_interactive_particles.html
  21. 1 1
      examples/canvas_interactive_voxelpainter.html
  22. 2 2
      examples/canvas_materials.html
  23. 1 1
      examples/canvas_materials_video.html
  24. 0 1
      examples/canvas_morphtargets_horse.html
  25. 2 3
      examples/canvas_particles_shapes.html
  26. 1 0
      examples/canvas_performance.html
  27. 1 1
      examples/canvas_sandbox.html
  28. 675 808
      examples/js/controls/TransformControls.js
  29. 1 1
      examples/js/exporters/GeometryExporter.js
  30. 49 37
      examples/js/loaders/OBJLoader2.js
  31. 196 616
      examples/js/modifiers/SubdivisionModifier.js
  32. 6 2
      examples/js/renderers/SoftwareRenderer.js
  33. 1 1
      examples/webgl_geometry_subdivision.html

File diff suppressed because it is too large
+ 481 - 403
build/three.js


File diff suppressed because it is too large
+ 111 - 114
build/three.min.js


+ 42 - 44
docs/api/extras/animation/Animation.html
View File 

@@ -9,134 +9,132 @@
 
 	<body>
 
 	<body>
 
 		<h1>[name]</h1>
 
 		<h1>[name]</h1>
 
 
 
-		<div class="desc">todo</div>
 
+		<div class="desc">This class animates an object based on an hierarchy.This hierarchy can be Object3Ds or bones.</div>
 
 
 
 
 
 		<h2>Constructor</h2>
 
 		<h2>Constructor</h2>
 
 
 
 
 
-		<h3>[name]([page:todo root], [page:todo name], [page:todo interpolationType])</h3>
 
+		<h3>[name]([page:Object3d root], [page:String name])</h3>
 
 		<div>
 
 		<div>
 
-		root -- todo <br />
 
-		name -- todo <br />
 
-		interpolationType -- todo
 
+		root -- The mesh to animate. <br />
 
+		name -- The name of the animation
 
 		</div>
 
 		</div>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Creates an animation for root. The animation data is gathered from AnimationHandler based on its name.
 
 		</div>
 
 		</div>
 
 
 
 		<h2>Properties</h2>
 
 		<h2>Properties</h2>
 
 
 
-		<h3>.[page:todo root]</h3>
 
+		<h3>.[page:Object3d root]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The root object of the animation.
 
 		</div> 
 		</div> 
 
 
-		<h3>.[page:todo data]</h3>
 
+		<h3>.[page:Object data]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The data containing the animation
 
 		</div> 
 		</div> 
 		
 		
-		<h3>.[page:todo hierarchy]</h3>
 
+		<h3>.[page:Array hierarchy]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The objects that are influenced by the animation.
 
 		</div>
 
 		</div>
 
 
 
 		<h3>.[page:number currentTime]</h3>
 
 		<h3>.[page:number currentTime]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The time elapsed since the last start/restart of the animation.
 
 		</div>
 
 		</div>
 
 		
 		
 		<h3>.[page:number timeScale]</h3>
 
 		<h3>.[page:number timeScale]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The timez 
 		</div>
 
 		</div>
 
 
 
 		<h3>.[page:boolean isPlaying]</h3>
 
 		<h3>.[page:boolean isPlaying]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Indicates whether the animation is playing. This shouldn't be adapted by user code.
 
 		</div>
 
 		</div>
 
 		
 		
 		<h3>.[page:boolean isPaused]</h3>
 
 		<h3>.[page:boolean isPaused]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Indicates whether the animation is paused. This shouldn't be adapted by user code.
 
 		</div>
 
 		</div>
 
 		
 		
 		<h3>.[page:boolean loop]</h3>
 
 		<h3>.[page:boolean loop]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Set to make the animation restart when the animation ends.
 
 		</div> 
 		</div> 
 		
 		
 		<h3>.[page:number interpolationType]</h3>
 
 		<h3>.[page:number interpolationType]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		The type to indicate how to interpolate between 2 data points.
 
 		</div> 
 		</div> 
 
 
 		<h3>.[page:array points]</h3>
 
 		<h3>.[page:array points]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		This should be removed from the code.(TODO).
 
 		</div>
 
 		</div>
 
 		
 		
 		<h3>.[page:Vector3 target]</h3>
 
 		<h3>.[page:Vector3 target]</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		This should be removed from the code.(TODO).
 
 		</div>
 
 		</div>
 
 
 
 		<h2>Methods</h2>
 
 		<h2>Methods</h2>
 
 		
 		
-		<h3>.play() [page:todo]</h3>
 
+		<h3>.play([page:Number startTime])</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Starts the animation from a moment startTime in the animation.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.pause() [page:todo]</h3>
 
+		<h3>.pause() </h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Pauses the animation or restarts the animation after pausing it.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.stop() [page:todo]</h3>
 
+		<h3>.stop()</h3>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Stops the animation.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.update([page:todo deltaTimeMS]) [page:todo]</h3>
 
+		<h3>.update([page:Number deltaTimeMS]) [page:todo]</h3>
 
 		<div>
 
 		<div>
 
-		deltaTimeMS -- todo
 
+		deltaTimeMS -- The time of the between the previous frame and this frame in miliseconds. 
 		</div>
 
 		</div>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Updates the animation in time. This shouldn't be called by user code. The animationHandler calls this method.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.interpolateCatmullRom([page:todo points], [page:todo scale]) [page:todo]</h3>
 
+		<h3>.interpolateCatmullRom([page:Array points], [page:Number scale]) [page:array]</h3>
 
 		<div>
 
 		<div>
 
-		points -- todo <br />
 
-		scale -- todo
 
+		points -- The 4 control point to calculate CatMullRom <br />
 
+		scale -- The scale between the previous key and the nex key 
 		</div>
 
 		</div>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Interpolates the point based on the key. Is used in update.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.getNextKeyWith([page:todo type], [page:todo h], [page:todo key]) [page:todo]</h3>
 
+		<h3>.getNextKeyWith([page:String type], [page:Object h], [page:Number key]) [page:Object]</h3>
 
 		<div>
 
 		<div>
 
-		type -- todo <br />
 
-		h -- todo <br />
 
-		key -- todo
 
+		type -- The animationtype for the key. Can be "pos", "rot" and "scl".<br />
 
+		h -- The object of the hierarchy that catins the key <br />
 
+		key -- The index of the next possible key.
 
 		</div>
 
 		</div>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Gets the next key. Is used in Update.
 
 		</div>
 
 		</div>
 
 
 
-		<h3>.getPrevKeyWith([page:todo type], [page:todo h], [page:todo key]) [page:todo]</h3>
 
+		<h3>.getPrevKeyWith([page:String type], [page:Object h], [page:Number key]) [page:Object]</h3>
 
 		<div>
 
 		<div>
 
-		type -- todo <br />
 
-		h -- todo <br />
 
-		key -- todo
 
+		type -- The animationtype for the key. Can be "pos", "rot" and "scl".<br />
 
+		h -- The object of the hierarchy that contains the key. <br />
 
+		key -- The index of the prev possible key.
 
 		</div>
 
 		</div>
 
 		<div>
 
 		<div>
 
-		todo
 
+		Gets the previous key. Is used in Update.
 
 		</div>
 
 		</div>
 
 
 
-
 
 		<h2>Source</h2>
 
 		<h2>Source</h2>
 
 
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

+ 3 - 1
editor/js/Storage.js
View File 

@@ -54,12 +54,14 @@ var Storage = function () {
 
 
 
 		set: function ( data, callback ) {
 
 		set: function ( data, callback ) {
 
 
 
+			var start = performance.now();
 
+
 
 			var transaction = database.transaction( [ 'states' ], 'readwrite' );
 
 			var transaction = database.transaction( [ 'states' ], 'readwrite' );
 
 			var objectStore = transaction.objectStore( 'states' );
 
 			var objectStore = transaction.objectStore( 'states' );
 
 			var request = objectStore.put( data, 0 );
 
 			var request = objectStore.put( data, 0 );
 
 			request.onsuccess = function ( event ) {
 
 			request.onsuccess = function ( event ) {
 
 
 
-				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB.' );
 
+				console.log( '[' + /\d\d\:\d\d\:\d\d/.exec( new Date() )[ 0 ] + ']', 'Saved state to IndexedDB in ' + ( performance.now() - start ).toFixed( 2 ) + 'ms.' );
 
 
 
 			};
 
 			};

+ 1 - 1
editor/js/Viewport.js
View File 

@@ -43,7 +43,7 @@ var Viewport = function ( editor ) {
 
 
 
 		controls.enabled = true;
 
 		controls.enabled = true;
 
 
 
-		if ( transformControls.axis !== undefined ) {
 
+		if ( transformControls.axis !== null ) {
 
 
 
 			controls.enabled = false;
 
 			controls.enabled = false;

+ 1 - 0
examples/canvas_camera_orthographic.html
View File 

@@ -108,6 +108,7 @@
 
 				scene.add( directionalLight );
 
 				scene.add( directionalLight );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_camera_orthographic2.html
View File 

@@ -175,6 +175,7 @@
 
 				scene.add( directionalLight );
 
 				scene.add( directionalLight );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_geometry2_sandbox.html
View File 

@@ -93,6 +93,7 @@
 
 				scene.add( plane );
 
 				scene.add( plane );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 1
examples/canvas_geometry_birds.html
View File 

@@ -366,7 +366,7 @@
 
 				}
 
 				}
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				// renderer.autoClear = false;
 
+				renderer.setClearColor( 0xffffff );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

+ 1 - 0
examples/canvas_geometry_cube.html
View File 

@@ -87,6 +87,7 @@
 
 				scene.add( plane );
 
 				scene.add( plane );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_geometry_earth.html
View File 

@@ -108,6 +108,7 @@
 
 				group.add( mesh );
 
 				group.add( mesh );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xffffff );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 1
examples/canvas_geometry_hierarchy.html
View File 

@@ -70,8 +70,8 @@
 
 				scene.add( group );
 
 				scene.add( group );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xffffff );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.sortObjects = false;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 1 - 0
examples/canvas_geometry_nurbs.html
View File 

@@ -121,6 +121,7 @@
 
 				//
 
 				//
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 2 - 2
examples/canvas_geometry_shapes.html
View File 

@@ -286,9 +286,9 @@
 
 
 
 				//
 
 				//
 
 
 
-				renderer = new THREE.CanvasRenderer( { antialias: true } );
 
+				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.sortObjects = false;
 
 				renderer.sortElements = false;
 
 				renderer.sortElements = false;
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_geometry_terrain.html
View File 

@@ -88,6 +88,7 @@
 
 				scene.add( mesh );
 
 				scene.add( mesh );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xbfd1e5 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.innerHTML = "";
 
 				container.innerHTML = "";

+ 1 - 0
examples/canvas_geometry_text.html
View File 

@@ -103,6 +103,7 @@
 
 				scene.add( group );
 
 				scene.add( group );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_interactive_cubes.html
View File 

@@ -88,6 +88,7 @@
 
 				projector = new THREE.Projector();
 
 				projector = new THREE.Projector();
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 0
examples/canvas_interactive_cubes_tween.html
View File 

@@ -68,6 +68,7 @@
 
 				projector = new THREE.Projector();
 
 				projector = new THREE.Projector();
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild(renderer.domElement);
 
 				container.appendChild(renderer.domElement);

+ 1 - 1
examples/canvas_interactive_lines.html
View File 

@@ -127,7 +127,7 @@
 
 				raycaster.linePrecision = 3;
 
 				raycaster.linePrecision = 3;
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
-				renderer.sortObjects = false;
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 
 
 				container.appendChild(renderer.domElement);
 
 				container.appendChild(renderer.domElement);

+ 1 - 1
examples/canvas_interactive_particles.html
View File 

@@ -80,8 +80,8 @@
 
 				projector = new THREE.Projector();
 
 				projector = new THREE.Projector();
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 1 - 1
examples/canvas_interactive_voxelpainter.html
View File 

@@ -113,8 +113,8 @@
 
 				scene.add( directionalLight );
 
 				scene.add( directionalLight );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild(renderer.domElement);
 
 				container.appendChild(renderer.domElement);
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 2 - 2
examples/canvas_materials.html
View File 

@@ -68,8 +68,8 @@
 
 				var materials = [
 
 				var materials = [
 
 
 
 					new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),
 
 					new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),
 
-					new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending, side: THREE.DoubleSide } ),
 
-					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, side: THREE.DoubleSide, overdraw: true } ),
 
+					new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ),
 
+					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, overdraw: true } ),
 
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading, overdraw: true } ),
 
 					new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading, overdraw: true } ),
 
 					new THREE.MeshDepthMaterial( { overdraw: true } ),
 
 					new THREE.MeshDepthMaterial( { overdraw: true } ),
 
 					new THREE.MeshNormalMaterial( { overdraw: true } ),
 
 					new THREE.MeshNormalMaterial( { overdraw: true } ),

+ 1 - 1
examples/canvas_materials_video.html
View File 

@@ -151,8 +151,8 @@
 
 				}
 
 				}
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 0 - 1
examples/canvas_morphtargets_horse.html
View File 

@@ -76,7 +76,6 @@
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild(renderer.domElement);
 
 				container.appendChild(renderer.domElement);
 
 
 
 				//
 
 				//

+ 2 - 3
examples/canvas_particles_shapes.html
View File 

@@ -156,8 +156,7 @@
 
 				var setTargetParticle = function() {
 
 				var setTargetParticle = function() {
 
 
 
 					var material = new THREE.SpriteCanvasMaterial( {
 
 					var material = new THREE.SpriteCanvasMaterial( {
 
-						program: hearts,
 
-						blending:THREE.AdditiveBlending
 
+						program: hearts
 
 					} );
 
 					} );
 
 
 
 					material.color.setHSL(hue, 1, 0.75);
 
 					material.color.setHSL(hue, 1, 0.75);
 
@@ -212,8 +211,8 @@
 
 
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				stats = new Stats();
 
 				stats = new Stats();

+ 1 - 0
examples/canvas_performance.html
View File 

@@ -93,6 +93,7 @@
 
 				scene.add( light );
 
 				scene.add( light );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );

+ 1 - 1
examples/canvas_sandbox.html
View File 

@@ -130,8 +130,8 @@
 
 				scene.add( pointLight );
 
 				scene.add( pointLight );
 
 
 
 				renderer = new THREE.CanvasRenderer();
 
 				renderer = new THREE.CanvasRenderer();
 
+				renderer.setClearColor( 0xf0f0f0 );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
 				container.appendChild( renderer.domElement );
 
 				container.appendChild( renderer.domElement );
 
 
 
 				var debugCanvas = document.createElement( 'canvas' );
 
 				var debugCanvas = document.createElement( 'canvas' );

+ 675 - 808
examples/js/controls/TransformControls.js
View File 

@@ -1,1107 +1,974 @@
 
 /**
 
 /**
 
  * @author arodic / https://github.com/arodic
 
  * @author arodic / https://github.com/arodic
 
  */
 
  */
 
+ /*jshint sub:true*/
 
 
 
- "use strict";
 
+(function () {
 
 
 
-THREE.TransformGizmoMaterial = function ( parameters ) {
 
+	'use strict';
 
 
 
-	THREE.MeshBasicMaterial.call( this );
 
+	var GizmoMaterial = function ( parameters ) {
 
 
 
-	this.depthTest = false;
 
-	this.depthWrite = false;
 
-	this.side = THREE.FrontSide;
 
-	this.transparent = true;
 
+		THREE.MeshBasicMaterial.call( this );
 
 
 
-	this.setValues( parameters );
 
+		this.depthTest = false;
 
+		this.depthWrite = false;
 
+		this.side = THREE.FrontSide;
 
+		this.transparent = true;
 
 
 
-}
 
+		this.setValues( parameters );
 
 
 
-THREE.TransformGizmoMaterial.prototype = Object.create( THREE.MeshBasicMaterial.prototype );
 
+		this.oldColor = this.color.clone();
 
+		this.oldOpacity = this.opacity;
 
 
 
-THREE.TransformGizmoLineMaterial = function ( parameters ) {
 
+		this.highlight = function( highlighted ) {
 
 
 
-	THREE.MeshBasicMaterial.call( this );
 
+			if ( highlighted ) {
 
 
 
-	this.depthTest = false;
 
-	this.depthWrite = false;
 
-	this.transparent = true;
 
-	this.linewidth = 1;
 
+				this.color.setRGB( 1, 1, 0 );
 
+				this.opacity = 1;
 
 
 
-	this.setValues( parameters );
 
-
 
-}
 
-
 
-THREE.TransformGizmoLineMaterial.prototype = Object.create( THREE.LineBasicMaterial.prototype );
 
-
 
-THREE.TransformGizmo = function () {
 
-
 
-	this.handleGizmos = {
 
-		X: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.005, 0.005, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0xff0000 } ) ),
 
-			new THREE.Vector3( 0.5, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.005, 0.005, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x00ff00 } ) ),
 
-			new THREE.Vector3( 0, 0.5, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.005, 0.005, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x0000ff } ) ),
 
-			new THREE.Vector3( 0, 0, 0.5 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		]
 
-	}
 
-
 
-	var showPickers = false; //debug
 
-	var showActivePlane = false; //debug
 
-	this.activePlane = undefined;
 
+			} else {
 
 
 
-	this.init = function () {
 
+					this.color.copy( this.oldColor );
 
+					this.opacity = this.oldOpacity;
 
 
 
-		THREE.Object3D.call( this );
 
+			}
 
 
 
-		this.handles = new THREE.Object3D();
 
-		this.lines = new THREE.Object3D();
 
-		this.pickers = new THREE.Object3D();
 
-		this.planes = new THREE.Object3D();
 
+		};
 
 
 
-		this.add(this.handles);
 
-		this.add(this.lines);
 
-		this.add(this.pickers);
 
-		this.add(this.planes);
 
+	};
 
 
 
-		//// PLANES
 
+	GizmoMaterial.prototype = Object.create( THREE.MeshBasicMaterial.prototype );
 
 
 
-		var planeGeometry = new THREE.PlaneGeometry( 50, 50, 2, 2 );
 
-		var planeMaterial = new THREE.MeshBasicMaterial( { wireframe: true } );
 
-		planeMaterial.side = THREE.DoubleSide;
 
+	var GizmoLineMaterial = function ( parameters ) {
 
 
 
-		var planes = {
 
-			"XY": new THREE.Mesh( planeGeometry, planeMaterial ),
 
-			"YZ": new THREE.Mesh( planeGeometry, planeMaterial ),
 
-			"XZ": new THREE.Mesh( planeGeometry, planeMaterial ),
 
-			"XYZE": new THREE.Mesh( planeGeometry, planeMaterial )
 
-		};
 
+		THREE.LineBasicMaterial.call( this );
 
 
 
-		planes["YZ"].rotation.set( 0, Math.PI/2, 0 );
 
-		planes["XZ"].rotation.set( -Math.PI/2, 0, 0 );
 
+		this.depthTest = false;
 
+		this.depthWrite = false;
 
+		this.transparent = true;
 
+		this.linewidth = 1;
 
 
 
-		for (var i in planes) {
 
-			planes[i].name = i;
 
-			this.planes.add(planes[i]);
 
-			this.planes[i] = planes[i];
 
-			planes[i].visible = false;
 
-		}
 
+		this.setValues( parameters );
 
 
 
-		//// HANDLES AND PICKERS
 
+		this.oldColor = this.color.clone();
 
+		this.oldOpacity = this.opacity;
 
 
 
-		for ( var i in this.handleGizmos ) {
 
+		this.highlight = function( highlighted ) {
 
 
 
-			var handle = this.handleGizmos[i][0];
 
-			handle.name = i;
 
-			if ( this.handleGizmos[i][1] ) handle.position.set( this.handleGizmos[i][1].x, this.handleGizmos[i][1].y, this.handleGizmos[i][1].z );
 
-			if ( this.handleGizmos[i][2] ) handle.rotation.set( this.handleGizmos[i][2].x, this.handleGizmos[i][2].y, this.handleGizmos[i][2].z );
 
-			
-			this.handles.add( handle );
 
+			if ( highlighted ) {
 
 
 
-			if ( this.pickerGizmos && this.pickerGizmos[i] ) {
 
+				this.color.setRGB( 1, 1, 0 );
 
+				this.opacity = 1;
 
 
 
-				var picker = this.pickerGizmos[i][0];
 
-				if ( this.pickerGizmos[i][1] ) picker.position.set( this.pickerGizmos[i][1].x, this.pickerGizmos[i][1].y, this.pickerGizmos[i][1].z );
 
-				if ( this.pickerGizmos[i][2] ) picker.rotation.set( this.pickerGizmos[i][2].x, this.pickerGizmos[i][2].y, this.pickerGizmos[i][2].z );
 
-			
 			} else {
 
 			} else {
 
 
 
-				var picker = handle.clone();
 
+					this.color.copy( this.oldColor );
 
+					this.opacity = this.oldOpacity;
 
 
 
 			}
 
 			}
 
 
 
-			picker.name = i;
 
-			this.pickers.add( picker );
 
-
 
-		}
 
-
 
-		if ( this.lineGizmos ) {
 
+		};
 
 
 
-			for ( var i in this.lineGizmos ) {
 
+	};
 
 
 
-				var line = this.lineGizmos[i][0];
 
-				line.name = i;
 
-				this.lines.add( line );
 
+	GizmoLineMaterial.prototype = Object.create( THREE.LineBasicMaterial.prototype );
 
 
 
-			}
 
-
 
-		}
 
+	THREE.TransformGizmo = function () {
 
 
 
-		// reset Transformations
 
+		var scope = this;
 
+		var showPickers = false; //debug
 
+		var showActivePlane = false; //debug
 
 
 
-		this.traverse(function (child) {
 
-			if (child instanceof THREE.Mesh) {			
-				var tempGeometry = new THREE.Geometry();
 
-				THREE.GeometryUtils.merge( tempGeometry, child );
 
-				child.geometry = tempGeometry;
 
-				child.position.set( 0, 0, 0 );
 
-				child.rotation.set( 0, 0, 0 );
 
-				child.scale.set( 1, 1, 1 );
 
+		this.init = function () {
 
 
 
-			}
 
-		});
 
+			THREE.Object3D.call( this );
 
 
 
-	}
 
+			this.handles = new THREE.Object3D();
 
+			this.pickers = new THREE.Object3D();
 
+			this.planes = new THREE.Object3D();
 
 
 
-	this.hide = function () {
 
+			this.add(this.handles);
 
+			this.add(this.pickers);
 
+			this.add(this.planes);
 
 
 
-		for ( var j in this.handles.children ) this.handles.children[j].visible = false;
 
+			//// PLANES
 
 
 
-		for ( var j in this.lines.children ) this.lines.children[j].visible = false;
 
+			var planeGeometry = new THREE.PlaneGeometry( 50, 50, 2, 2 );
 
+			var planeMaterial = new THREE.MeshBasicMaterial( { wireframe: true } );
 
+			planeMaterial.side = THREE.DoubleSide;
 
 
 
-		for ( var j in this.pickers.children ) this.pickers.children[j].visible = false;
 
+			var planes = {
 
+				"XY":   new THREE.Mesh( planeGeometry, planeMaterial ),
 
+				"YZ":   new THREE.Mesh( planeGeometry, planeMaterial ),
 
+				"XZ":   new THREE.Mesh( planeGeometry, planeMaterial ),
 
+				"XYZE": new THREE.Mesh( planeGeometry, planeMaterial )
 
+			};
 
 
 
-		for ( var j in this.planes.children ) this.planes.children[j].visible = false;
 
+			this.activePlane = planes["XYZE"];
 
 
 
-	}
 
+			planes["YZ"].rotation.set( 0, Math.PI/2, 0 );
 
+			planes["XZ"].rotation.set( -Math.PI/2, 0, 0 );
 
 
 
-	this.show = function () {
 
+			for (var i in planes) {
 
+				planes[i].name = i;
 
+				this.planes.add(planes[i]);
 
+				this.planes[i] = planes[i];
 
+				planes[i].visible = false;
 
+			}
 
 
 
-		for ( var i in this.handles.children ) this.handles.children[i].visible = true;
 
+			//// HANDLES AND PICKERS
 
 
 
-		for ( var i in this.lines.children ) this.lines.children[i].visible = true;
 
+			var setupGizmos = function( gizmoMap, parent ) {
 
 
 
-		for ( var i in this.pickers.children ) this.pickers.children[i].visible = showPickers;
 
+				for ( var name in gizmoMap ) {
 
 
 
-		if ( this.activePlane !== undefined ) this.activePlane.visible = showActivePlane;
 
+					for ( i = gizmoMap[name].length; i--;) {
 
+						
+						var object = gizmoMap[name][i][0];
 
+						var position = gizmoMap[name][i][1];
 
+						var rotation = gizmoMap[name][i][2];
 
 
 
-	}
 
+						object.name = name;
 
 
 
-	this.highlight = function ( axis ) {
 
+						if ( position ) object.position.set( position[0], position[1], position[2] );
 
+						if ( rotation ) object.rotation.set( rotation[0], rotation[1], rotation[2] );
 
+						
+						parent.add( object );
 
 
 
-		var handle;
 
-		var line;
 
+					}
 
 
 
-		for ( var i in this.handleGizmos ) {
 
+				}
 
 
 
-			handle = this.handleGizmos[ i ][0];
 
+			};
 
 
 
-			if ( handle.material.oldColor !== undefined ) {
 
+			setupGizmos(this.handleGizmos, this.handles);
 
+			setupGizmos(this.pickerGizmos, this.pickers);
 
 
 
-				handle.material.color.copy( handle.material.oldColor );
 
-				handle.material.opacity = handle.material.oldOpacity;
 
+			// reset Transformations
 
 
 
-			}
 
+			this.traverse(function ( child ) {
 
+				if (child instanceof THREE.Mesh) {			
+					var tempGeometry = new THREE.Geometry();
 
+					THREE.GeometryUtils.merge( tempGeometry, child );
 
+					child.geometry = tempGeometry;
 
+					child.position.set( 0, 0, 0 );
 
+					child.rotation.set( 0, 0, 0 );
 
+					child.scale.set( 1, 1, 1 );
 
+				}
 
+			});
 
 
 
-		}
 
+		};
 
 
 
-		if ( this.handleGizmos[ axis ] !== undefined ) {
 
-		
-			handle = this.handleGizmos[ axis ][0];
 
+		this.hide = function () {
 
+			this.traverse(function( child ) {
 
+				child.visible = false;
 
+			});
 
+		};
 
 
 
-			handle.material.oldColor = handle.material.color.clone();
 
-			handle.material.oldOpacity = handle.material.opacity;
 
-	 
-			handle.material.color.setRGB( 1, 1, 0 );
 
-			handle.material.opacity = 1;
 
+		this.show = function () {
 
+			this.traverse(function( child ) {
 
+				child.visible = true;
 
+				if (child.parent == scope.pickers ) child.visible = showPickers;
 
+				if (child.parent == scope.planes ) child.visible = false;
 
+			});
 
+			this.activePlane.visible = showActivePlane;
 
+		};
 
 
 
-		}
 
+		this.highlight = function ( axis ) {
 
+			this.traverse(function( child ) {
 
+				if ( child.material && child.material.highlight ){
 
+					if ( child.name == axis ) {
 
+						child.material.highlight( true );
 
+					} else {
 
+						child.material.highlight( false );
 
+					}
 
+				}
 
+			});
 
+		};
 
 
 
-		for ( var i in this.lineGizmos ) {
 
+	};
 
 
 
-			line = this.lineGizmos[ i ][0];
 
+	THREE.TransformGizmo.prototype = Object.create( THREE.Object3D.prototype );
 
 
 
-			if ( line.material.oldColor !== undefined ) {
 
+	THREE.TransformGizmo.prototype.update = function ( rotation, eye ) {
 
 
 
-				line.material.color.copy( line.material.oldColor );
 
-				line.material.opacity = line.material.oldOpacity;
 
+		var vec1 = new THREE.Vector3( 0, 0, 0 );
 
+		var vec2 = new THREE.Vector3( 0, 1, 0 );
 
+		var lookAtMatrix = new THREE.Matrix4();
 
 
 
+		this.traverse(function(child) {
 
+			if ( child.name.search("E") != -1 ) {
 
+				child.quaternion.setFromRotationMatrix( lookAtMatrix.lookAt( eye, vec1, vec2 ) );
 
+			} else if ( child.name.search("X") != -1 || child.name.search("Y") != -1 || child.name.search("Z") != -1 ) {
 
+				child.quaternion.setFromEuler( rotation );
 
 			}
 
 			}
 
+		});
 
 
 
-		}
 
-
 
-		if ( this.lineGizmos[ axis ] !== undefined ) {
 
-		
-			line = this.lineGizmos[ axis ][0];
 
-
 
-			line.material.oldColor = line.material.color.clone();
 
-			line.material.oldOpacity = line.material.opacity;
 
-	 
-			line.material.color.setRGB( 1, 1, 0 );
 
-			line.material.opacity = 1;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	this.init();
 
-
 
-}
 
-
 
-THREE.TransformGizmo.prototype = Object.create( THREE.Object3D.prototype );
 
-
 
-THREE.TransformGizmo.prototype.update = function ( rotation, eye ) {
 
-
 
-	var vec1 = new THREE.Vector3( 0, 0, 0 );
 
-	var vec2 = new THREE.Vector3( 0, 1, 0 );
 
-	var lookAtMatrix = new THREE.Matrix4();
 
-
 
-	for ( var i in this.children ) {
 
+	};
 
 
 
-		for ( var j in this.children[i].children ) {
 
+	THREE.TransformGizmoTranslate = function () {
 
 
 
-			var object = this.children[i].children[j];
 
+		THREE.TransformGizmo.call( this );
 
 
 
-			if ( object.name.search("E") != -1 ) {
 
+		var arrowGeometry = new THREE.Geometry();
 
+		var mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 12, 1, false ) );
 
+		mesh.position.y = 0.5;
 
+		THREE.GeometryUtils.merge( arrowGeometry, mesh );
 
+		
+		var lineXGeometry = new THREE.Geometry();
 
+		lineXGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 0, 0 ) );
 
+
 
+		var lineYGeometry = new THREE.Geometry();
 
+		lineYGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ) );
 
+
 
+		var lineZGeometry = new THREE.Geometry();
 
+		lineZGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 1 ) );
 
+
 
+		this.handleGizmos = {
 
+			X: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI/2 ] ],
 
+				[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ],
 
+				[	new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI/2, 0, 0 ] ],
 
+				[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 
+			],
 
+			XYZ: [
 
+				[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, 0, 0 ] ]
 
+			],
 
+			XY: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ), [ 0.15, 0.15, 0 ] ]
 
+			],
 
+			YZ: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ), [ 0, 0.15, 0.15 ], [ 0, Math.PI/2, 0 ] ]
 
+			],
 
+			XZ: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ), [ 0.15, 0, 0.15 ], [ -Math.PI/2, 0, 0 ] ]
 
+			]
 
+		};
 
 
 
-				object.quaternion.setFromRotationMatrix( lookAtMatrix.lookAt( eye, vec1, vec2 ) );
 
+		this.pickerGizmos = {
 
+			X: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI/2 ] ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0.6, 0 ] ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0.6 ], [ Math.PI/2, 0, 0 ] ]
 
+			],
 
+			XYZ: [
 
+				[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
 
+			],
 
+			XY: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ), [ 0.2, 0.2, 0 ] ]
 
+			],
 
+			YZ: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ), [ 0, 0.2, 0.2 ], [ 0, Math.PI/2, 0 ] ]
 
+			],
 
+			XZ: [
 
+				[ new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new GizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ), [ 0.2, 0, 0.2 ], [ -Math.PI/2, 0, 0 ] ]
 
+			]
 
+		};
 
 
 
-			} else {
 
+		this.setActivePlane = function ( axis, eye ) {
 
 
 
-				object.quaternion.setFromEuler( rotation );
 
+			var tempMatrix = new THREE.Matrix4();
 
+			eye.applyProjection( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
 
 
+			if ( axis == "X" ) {
 
+				this.activePlane = this.planes[ "XY" ];
 
+				if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
 
 			}
 
 			}
 
 
 
-		}
 
-
 
-	}
 
-
 
-}
 
-
 
-THREE.TransformGizmoTranslate = function () {
 
-
 
-	THREE.TransformGizmo.call( this );
 
-
 
-	var arrowGeometry = new THREE.Geometry();
 
-	var mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 12, 1, false ) );
 
-	mesh.position.y = 0.5;
 
-	THREE.GeometryUtils.merge( arrowGeometry, mesh );
 
-	
-	var lineXGeometry = new THREE.Geometry();
 
-	lineXGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 0, 0 ) );
 
-
 
-	var lineYGeometry = new THREE.Geometry();
 
-	lineYGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ) );
 
-
 
-	var lineZGeometry = new THREE.Geometry();
 
-	lineZGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 1 ) );
 
-
 
-	this.handleGizmos = {
 
-
 
-		X: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0xff0000 } ) ),
 
-			new THREE.Vector3( 0.5, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0x00ff00 } ) ),
 
-			new THREE.Vector3( 0, 0.5, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0x0000ff } ) ),
 
-			new THREE.Vector3( 0, 0, 0.5 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		],
 
-		XYZ: [
 
-			new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), new THREE.TransformGizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, 0 )
 
-		],
 
-		XY: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new THREE.TransformGizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.15, 0.15, 0 )
 
-		],
 
-		YZ: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new THREE.TransformGizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0.15, 0.15 ),
 
-			new THREE.Vector3( 0, Math.PI/2, 0 )
 
-		],
 
-		XZ: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.29, 0.29 ), new THREE.TransformGizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.15, 0, 0.15 ),
 
-			new THREE.Vector3( -Math.PI/2, 0, 0 )
 
-		]
 
-
 
-	}
 
-
 
-	this.lineGizmos = {
 
-
 
-		X: [
 
-			new THREE.Line( lineXGeometry, new THREE.TransformGizmoLineMaterial( { color: 0xff0000 } ) ),
 
-		],
 
-		Y: [
 
-			new THREE.Line( lineYGeometry, new THREE.TransformGizmoLineMaterial( { color: 0x00ff00 } ) ),
 
-		],
 
-		Z: [
 
-			new THREE.Line( lineZGeometry, new THREE.TransformGizmoLineMaterial( { color: 0x0000ff } ) ),
 
-		]
 
-
 
-	}
 
-
 
-	this.pickerGizmos = {
 
-
 
-		X: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.6, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0.6, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0.6 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		],
 
-		XYZ: [
 
-			new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), new THREE.TransformGizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) )
 
-		],
 
-		XY: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new THREE.TransformGizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.2, 0.2, 0 )
 
-		],
 
-		YZ: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new THREE.TransformGizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0.2, 0.2 ),
 
-			new THREE.Vector3( 0, Math.PI/2, 0 )
 
-		],
 
-		XZ: [
 
-			new THREE.Mesh( new THREE.PlaneGeometry( 0.4, 0.4 ), new THREE.TransformGizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.2, 0, 0.2 ),
 
-			new THREE.Vector3( -Math.PI/2, 0, 0 )
 
-		]
 
-
 
-	}
 
-
 
-	this.setActivePlane = function ( axis, eye ) {
 
-
 
-		var tempMatrix = new THREE.Matrix4();
 
-		eye.applyProjection( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
-
 
-		if ( axis == "X" ) {
 
-			this.activePlane = this.planes[ "XY" ];
 
-			if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
 
-		}
 
-
 
-		if ( axis == "Y" ){
 
-			this.activePlane = this.planes[ "XY" ];
 
-			if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
 
-		}
 
-
 
-		if ( axis == "Z" ){
 
-			this.activePlane = this.planes[ "XZ" ];
 
-			if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
 
-		}
 
-
 
-		if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
+			if ( axis == "Y" ){
 
+				this.activePlane = this.planes[ "XY" ];
 
+				if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
 
+			}
 
 
 
-		if ( axis == "XY" ) this.activePlane = this.planes[ "XY" ];
 
+			if ( axis == "Z" ){
 
+				this.activePlane = this.planes[ "XZ" ];
 
+				if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
 
+			}
 
 
 
-		if ( axis == "YZ" ) this.activePlane = this.planes[ "YZ" ];
 
+			if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
 
 
-		if ( axis == "XZ" ) this.activePlane = this.planes[ "XZ" ];
 
+			if ( axis == "XY" ) this.activePlane = this.planes[ "XY" ];
 
 
 
-		this.hide();
 
-		this.show();
 
+			if ( axis == "YZ" ) this.activePlane = this.planes[ "YZ" ];
 
 
 
-	}
 
+			if ( axis == "XZ" ) this.activePlane = this.planes[ "XZ" ];
 
 
 
-	this.init();
 
+			this.hide();
 
+			this.show();
 
 
 
-}
 
+		};
 
 
 
-THREE.TransformGizmoTranslate.prototype = Object.create( THREE.TransformGizmo.prototype );
 
+		this.init();
 
 
 
-THREE.TransformGizmoRotate = function () {
 
+	};
 
 
 
-	THREE.TransformGizmo.call( this );
 
+	THREE.TransformGizmoTranslate.prototype = Object.create( THREE.TransformGizmo.prototype );
 
 
 
-	var CircleGeometry = function ( radius, facing, arc ) {
 
+	THREE.TransformGizmoRotate = function () {
 
 
 
-			var geometry = new THREE.Geometry();
 
-			arc = arc ? arc : 1;
 
-			for ( var i = 0; i <= 64 * arc; ++i ) {
 
-				if ( facing == 'x' ) geometry.vertices.push( new THREE.Vector3( 0, Math.cos( i / 32 * Math.PI ), Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
 
-				if ( facing == 'y' ) geometry.vertices.push( new THREE.Vector3( Math.cos( i / 32 * Math.PI ), 0, Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
 
-				if ( facing == 'z' ) geometry.vertices.push( new THREE.Vector3( Math.sin( i / 32 * Math.PI ), Math.cos( i / 32 * Math.PI ), 0 ).multiplyScalar(radius) );
 
-			}
 
+		THREE.TransformGizmo.call( this );
 
 
 
-			return geometry;
 
-	}
 
+		var CircleGeometry = function ( radius, facing, arc ) {
 
 
 
-	this.handleGizmos = {
 
-
 
-		X: [
 
-			new THREE.Line( CircleGeometry(1,'x',0.5), new THREE.TransformGizmoLineMaterial( { color: 0xff0000 } ) ),
 
-		],
 
-		Y: [
 
-			new THREE.Line( CircleGeometry(1,'y',0.5), new THREE.TransformGizmoLineMaterial( { color: 0x00ff00 } ) ),
 
-		],
 
-		Z: [
 
-			new THREE.Line( CircleGeometry(1,'z',0.5), new THREE.TransformGizmoLineMaterial( { color: 0x0000ff } ) ),
 
-		],
 
-		E: [
 
-			new THREE.Line( CircleGeometry(1.25,'z',1), new THREE.TransformGizmoLineMaterial( { color: 0xcccc00 } ) ),
 
-		],
 
-		XYZE: [
 
-			new THREE.Line( CircleGeometry(1,'z',1), new THREE.TransformGizmoLineMaterial( { color: 0x787878 } ) ),
 
-		]
 
+				var geometry = new THREE.Geometry();
 
+				arc = arc ? arc : 1;
 
+				for ( var i = 0; i <= 64 * arc; ++i ) {
 
+					if ( facing == 'x' ) geometry.vertices.push( new THREE.Vector3( 0, Math.cos( i / 32 * Math.PI ), Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
 
+					if ( facing == 'y' ) geometry.vertices.push( new THREE.Vector3( Math.cos( i / 32 * Math.PI ), 0, Math.sin( i / 32 * Math.PI ) ).multiplyScalar(radius) );
 
+					if ( facing == 'z' ) geometry.vertices.push( new THREE.Vector3( Math.sin( i / 32 * Math.PI ), Math.cos( i / 32 * Math.PI ), 0 ).multiplyScalar(radius) );
 
+				}
 
 
 
-	}
 
+				return geometry;
 
+		};
 
 
 
-	this.lineGizmos = {}
 
+		this.handleGizmos = {
 
+			X: [
 
+				[ new THREE.Line( new CircleGeometry(1,'x',0.5), new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Line( new CircleGeometry(1,'y',0.5), new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Line( new CircleGeometry(1,'z',0.5), new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 
+			],
 
+			E: [
 
+				[ new THREE.Line( new CircleGeometry(1.25,'z',1), new GizmoLineMaterial( { color: 0xcccc00 } ) ) ]
 
+			],
 
+			XYZE: [
 
+				[ new THREE.Line( new CircleGeometry(1,'z',1), new GizmoLineMaterial( { color: 0x787878 } ) ) ]
 
+			]
 
+		};
 
 
 
-	this.pickerGizmos = {
 
+		this.pickerGizmos = {
 
+			X: [
 
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, -Math.PI/2, -Math.PI/2 ] ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ Math.PI/2, 0, 0 ] ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, 0, -Math.PI/2 ] ]
 
+			],
 
+			E: [
 
+				[ new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.12, 2, 24 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ) ]
 
+			],
 
+			XYZE: [
 
+				[ new THREE.Mesh( new THREE.Geometry() ) ]// TODO
 
+			]
 
+		};
 
 
 
-		X: [
 
-			new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new THREE.TransformGizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0 ),
 
-			new THREE.Vector3( 0, -Math.PI/2, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new THREE.TransformGizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), new THREE.TransformGizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		E: [
 
-			new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.12, 2, 24 ), new THREE.TransformGizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) )
 
-		],
 
-		XYZE: [
 
-			new THREE.Mesh( new THREE.Geometry() ) // TODO
 
-		]
 
+		this.setActivePlane = function ( axis ) {
 
 
 
-	}
 
+			if ( axis == "E" ) this.activePlane = this.planes[ "XYZE" ];
 
 
 
-	this.setActivePlane = function ( axis ) {
 
+			if ( axis == "X" ) this.activePlane = this.planes[ "YZ" ];
 
 
 
-		if ( axis == "E" ) this.activePlane = this.planes[ "XYZE" ];
 
+			if ( axis == "Y" ) this.activePlane = this.planes[ "XZ" ];
 
 
 
-	 	if ( axis == "X" ) this.activePlane = this.planes[ "YZ" ];
 
+			if ( axis == "Z" ) this.activePlane = this.planes[ "XY" ];
 
 
 
-		if ( axis == "Y" ) this.activePlane = this.planes[ "XZ" ];
 
+			this.hide();
 
+			this.show();
 
 
 
-		if ( axis == "Z" ) this.activePlane = this.planes[ "XY" ];
 
+		};
 
 
 
-		this.hide();
 
-		this.show();
 
+		this.update = function ( rotation, eye2 ) {
 
 
 
-	}
 
+			THREE.TransformGizmo.prototype.update.apply( this, arguments );
 
 
 
-	this.update = function ( rotation, eye2 ) {
 
+			var group = {
 
+				handles: this["handles"],
 
+				pickers: this["pickers"],
 
+			};
 
 
 
-		THREE.TransformGizmo.prototype.update.apply( this, arguments );
 
+			var tempMatrix = new THREE.Matrix4();
 
+			var worldRotation = new THREE.Euler( 0, 0, 1 );
 
+			var tempQuaternion = new THREE.Quaternion();
 
+			var unitX = new THREE.Vector3( 1, 0, 0 );
 
+			var unitY = new THREE.Vector3( 0, 1, 0 );
 
+			var unitZ = new THREE.Vector3( 0, 0, 1 );
 
+			var quaternionX = new THREE.Quaternion();
 
+			var quaternionY = new THREE.Quaternion();
 
+			var quaternionZ = new THREE.Quaternion();
 
+			var eye = eye2.clone();
 
 
 
-		var group = {
 
-			handles: this["handles"],
 
-			pickers: this["pickers"],
 
-		}
 
+			worldRotation.copy( this.planes["XY"].rotation );
 
+			tempQuaternion.setFromEuler( worldRotation );
 
 
 
-		var tempMatrix = new THREE.Matrix4();
 
-		var worldRotation = new THREE.Euler( 0, 0, 1 );
 
-		var tempQuaternion = new THREE.Quaternion();
 
-		var unitX = new THREE.Vector3( 1, 0, 0 );
 
-		var unitY = new THREE.Vector3( 0, 1, 0 );
 
-		var unitZ = new THREE.Vector3( 0, 0, 1 );
 
-		var quaternionX = new THREE.Quaternion();
 
-		var quaternionY = new THREE.Quaternion();
 
-		var quaternionZ = new THREE.Quaternion();
 
-		var eye = eye2.clone();
 
+			tempMatrix.makeRotationFromQuaternion( tempQuaternion ).getInverse( tempMatrix );
 
+			eye.applyProjection( tempMatrix );
 
 
 
-		worldRotation.copy( this.planes["XY"].rotation );
 
-		tempQuaternion.setFromEuler( worldRotation );
 
-
 
-		tempMatrix.makeRotationFromQuaternion( tempQuaternion ).getInverse( tempMatrix );
 
-		eye.applyProjection( tempMatrix );
 
-
 
-		for ( var i in group ) {
 
-
 
-			for ( var j in group[i].children ) {
 
-
 
-				var object = group[i].children[j];
 
+			this.traverse(function(child) {
 
 
 
 				tempQuaternion.setFromEuler( worldRotation );
 
 				tempQuaternion.setFromEuler( worldRotation );
 
 
 
-				if ( object.name == "X" ) {
 
+				if ( child.name == "X" ) {
 
 					quaternionX.setFromAxisAngle( unitX, Math.atan2( -eye.y, eye.z ) );
 
 					quaternionX.setFromAxisAngle( unitX, Math.atan2( -eye.y, eye.z ) );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
-					object.quaternion.copy( tempQuaternion );
 
+					child.quaternion.copy( tempQuaternion );
 
 				}
 
 				}
 
 
 
-				if ( object.name == "Y" ) {
 
+				if ( child.name == "Y" ) {
 
 					quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) );
 
 					quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 
-					object.quaternion.copy( tempQuaternion );
 
+					child.quaternion.copy( tempQuaternion );
 
 				}
 
 				}
 
 
 
-				if ( object.name == "Z" ) {
 
+				if ( child.name == "Z" ) {
 
 					quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) );
 
 					quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
 					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
-					object.quaternion.copy( tempQuaternion );
 
+					child.quaternion.copy( tempQuaternion );
 
 				}
 
 				}
 
 
 
-			}
 
-		}
 
+			});
 
 
 
-	}
 
-
 
-	this.init();
 
-
 
-}
 
-
 
-THREE.TransformGizmoRotate.prototype = Object.create( THREE.TransformGizmo.prototype );
 
-
 
-THREE.TransformGizmoScale = function () {
 
-
 
-	THREE.TransformGizmo.call( this );
 
-
 
-	var arrowGeometry = new THREE.Geometry();
 
-	var mesh = new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ) );
 
-	mesh.position.y = 0.5;
 
-	THREE.GeometryUtils.merge( arrowGeometry, mesh );
 
-
 
-	var lineXGeometry = new THREE.Geometry();
 
-	lineXGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 0, 0 ) );
 
-
 
-	var lineYGeometry = new THREE.Geometry();
 
-	lineYGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ) );
 
-
 
-	var lineZGeometry = new THREE.Geometry();
 
-	lineZGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 1 ) );
 
-
 
-	this.handleGizmos = {
 
-
 
-		X: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0xff0000 } ) ),
 
-			new THREE.Vector3( 0.5, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0x00ff00 } ) ),
 
-			new THREE.Vector3( 0, 0.5, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( arrowGeometry, new THREE.TransformGizmoMaterial( { color: 0x0000ff } ) ),
 
-			new THREE.Vector3( 0, 0, 0.5 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		],
 
-		XYZ: [
 
-			new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), new THREE.TransformGizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) )
 
-		]
 
-
 
-	}
 
-
 
-	this.lineGizmos = {
 
-
 
-		X: [
 
-			new THREE.Line( lineXGeometry, new THREE.TransformGizmoLineMaterial( { color: 0xff0000 } ) ),
 
-		],
 
-		Y: [
 
-			new THREE.Line( lineYGeometry, new THREE.TransformGizmoLineMaterial( { color: 0x00ff00 } ) ),
 
-		],
 
-		Z: [
 
-			new THREE.Line( lineZGeometry, new THREE.TransformGizmoLineMaterial( { color: 0x0000ff } ) ),
 
-		]
 
-
 
-	}
 
-
 
-	this.pickerGizmos = {
 
-
 
-		X: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0.6, 0, 0 ),
 
-			new THREE.Vector3( 0, 0, -Math.PI/2 )
 
-		],
 
-		Y: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0.6, 0 )
 
-		],
 
-		Z: [
 
-			new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new THREE.TransformGizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ),
 
-			new THREE.Vector3( 0, 0, 0.6 ),
 
-			new THREE.Vector3( Math.PI/2, 0, 0 )
 
-		],
 
-		XYZ: [
 
-			new THREE.Mesh( new THREE.BoxGeometry( 0.4, 0.4, 0.4 ), new THREE.TransformGizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) )
 
-		]
 
-	}
 
-
 
-	this.setActivePlane = function ( axis, eye ) {
 
+		};
 
 
 
-		var tempMatrix = new THREE.Matrix4();
 
-		eye.applyProjection( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
+		this.init();
 
 
 
-		if ( axis == "X" ) {
 
-			this.activePlane = this.planes[ "XY" ];
 
-			if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
 
-		}
 
+	};
 
 
 
-		if ( axis == "Y" ){
 
-			this.activePlane = this.planes[ "XY" ];
 
-			if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
 
-		}
 
+	THREE.TransformGizmoRotate.prototype = Object.create( THREE.TransformGizmo.prototype );
 
+
 
+	THREE.TransformGizmoScale = function () {
 
+
 
+		THREE.TransformGizmo.call( this );
 
+
 
+		var arrowGeometry = new THREE.Geometry();
 
+		var mesh = new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ) );
 
+		mesh.position.y = 0.5;
 
+		THREE.GeometryUtils.merge( arrowGeometry, mesh );
 
+
 
+		var lineXGeometry = new THREE.Geometry();
 
+		lineXGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 0, 0 ) );
 
+
 
+		var lineYGeometry = new THREE.Geometry();
 
+		lineYGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 1, 0 ) );
 
+
 
+		var lineZGeometry = new THREE.Geometry();
 
+		lineZGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, 1 ) );
 
+
 
+		this.handleGizmos = {
 
+			X: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, -Math.PI/2 ] ],
 
+				[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ],
 
+				[ new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI/2, 0, 0 ] ],
 
+				[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ]
 
+			],
 
+			XYZ: [
 
+				[ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
 
+			]
 
+		};
 
 
 
-		if ( axis == "Z" ){
 
-			this.activePlane = this.planes[ "XZ" ];
 
-			if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
 
-		}
 
+		this.pickerGizmos = {
 
+			X: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0xff0000, opacity: 0.25 } ) ), [ 0.6, 0, 0 ], [ 0, 0, -Math.PI/2 ] ]
 
+			],
 
+			Y: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x00ff00, opacity: 0.25 } ) ), [ 0, 0.6, 0 ] ]
 
+			],
 
+			Z: [
 
+				[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), new GizmoMaterial( { color: 0x0000ff, opacity: 0.25 } ) ), [ 0, 0, 0.6 ], [ Math.PI/2, 0, 0 ] ]
 
+			],
 
+			XYZ: [
 
+				[ new THREE.Mesh( new THREE.BoxGeometry( 0.4, 0.4, 0.4 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ]
 
+			]
 
+		};
 
 
 
-		if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
+		this.setActivePlane = function ( axis, eye ) {
 
 
 
-		this.hide();
 
-		this.show();
 
+			var tempMatrix = new THREE.Matrix4();
 
+			eye.applyProjection( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) );
 
 
 
-	}
 
+			if ( axis == "X" ) {
 
+				this.activePlane = this.planes[ "XY" ];
 
+				if ( Math.abs(eye.y) > Math.abs(eye.z) ) this.activePlane = this.planes[ "XZ" ];
 
+			}
 
 
 
-	this.init();
 
+			if ( axis == "Y" ){
 
+				this.activePlane = this.planes[ "XY" ];
 
+				if ( Math.abs(eye.x) > Math.abs(eye.z) ) this.activePlane = this.planes[ "YZ" ];
 
+			}
 
 
 
-}
 
+			if ( axis == "Z" ){
 
+				this.activePlane = this.planes[ "XZ" ];
 
+				if ( Math.abs(eye.x) > Math.abs(eye.y) ) this.activePlane = this.planes[ "YZ" ];
 
+			}
 
 
 
-THREE.TransformGizmoScale.prototype = Object.create( THREE.TransformGizmo.prototype );
 
+			if ( axis == "XYZ" ) this.activePlane = this.planes[ "XYZE" ];
 
 
 
-THREE.TransformControls = function ( camera, domElement ) {
 
+			this.hide();
 
+			this.show();
 
 
 
-	// TODO: Make non-uniform scale and rotate play nice in hierarchies
 
-	// TODO: ADD RXYZ contol
 
+		};
 
 
 
-	THREE.Object3D.call( this );
 
+		this.init();
 
 
 
-	domElement = ( domElement !== undefined ) ? domElement : document;
 
+	};
 
 
 
-	this.gizmo = {}
 
-	this.gizmo["translate"] = new THREE.TransformGizmoTranslate();
 
-	this.gizmo["rotate"] = new THREE.TransformGizmoRotate();
 
-	this.gizmo["scale"] = new THREE.TransformGizmoScale();
 
+	THREE.TransformGizmoScale.prototype = Object.create( THREE.TransformGizmo.prototype );
 
 
 
-	this.add(this.gizmo["translate"]);
 
-	this.add(this.gizmo["rotate"]);
 
-	this.add(this.gizmo["scale"]);
 
+	THREE.TransformControls = function ( camera, domElement ) {
 
 
 
-	this.gizmo["translate"].hide();
 
-	this.gizmo["rotate"].hide();
 
-	this.gizmo["scale"].hide();
 
+		// TODO: Make non-uniform scale and rotate play nice in hierarchies
 
+		// TODO: ADD RXYZ contol
 
 
 
-	this.object = undefined;
 
-	this.snap = undefined;
 
-	this.space = "world";
 
-	this.size = 1;
 
-	this.axis = undefined;
 
+		THREE.Object3D.call( this );
 
 
 
-	var scope = this;
 
-	
-	var _dragging = false;
 
-	var _mode = "translate";
 
-	var _plane = "XY";
 
+		domElement = ( domElement !== undefined ) ? domElement : document;
 
 
 
-	var changeEvent = { type: "change" };
 
+		this.gizmo = {};
 
+		this.gizmo["translate"] = new THREE.TransformGizmoTranslate();
 
+		this.gizmo["rotate"] = new THREE.TransformGizmoRotate();
 
+		this.gizmo["scale"] = new THREE.TransformGizmoScale();
 
 
 
-	var ray = new THREE.Raycaster();
 
-	var projector = new THREE.Projector();
 
-	var pointerVector = new THREE.Vector3();
 
+		this.add(this.gizmo["translate"]);
 
+		this.add(this.gizmo["rotate"]);
 
+		this.add(this.gizmo["scale"]);
 
 
 
-	var point = new THREE.Vector3();
 
-	var offset = new THREE.Vector3();
 
+		this.gizmo["translate"].hide();
 
+		this.gizmo["rotate"].hide();
 
+		this.gizmo["scale"].hide();
 
 
 
-	var rotation = new THREE.Vector3();
 
-	var offsetRotation = new THREE.Vector3();
 
-	var scale = 1;
 
+		this.object = undefined;
 
+		this.snap = null;
 
+		this.space = "world";
 
+		this.size = 1;
 
+		this.axis = null;
 
 
 
-	var lookAtMatrix = new THREE.Matrix4();
 
-	var eye = new THREE.Vector3()
 
+		var scope = this;
 
+		
+		var _dragging = false;
 
+		var _mode = "translate";
 
+		var _plane = "XY";
 
 
 
-	var tempMatrix = new THREE.Matrix4();
 
-	var tempVector = new THREE.Vector3();
 
-	var tempQuaternion = new THREE.Quaternion();
 
-	var unitX = new THREE.Vector3( 1, 0, 0 );
 
-	var unitY = new THREE.Vector3( 0, 1, 0 );
 
-	var unitZ = new THREE.Vector3( 0, 0, 1 );
 
+		var changeEvent = { type: "change" };
 
 
 
-	var quaternionXYZ = new THREE.Quaternion();
 
-	var quaternionX = new THREE.Quaternion();
 
-	var quaternionY = new THREE.Quaternion();
 
-	var quaternionZ = new THREE.Quaternion();
 
-	var quaternionE = new THREE.Quaternion();
 
+		var ray = new THREE.Raycaster();
 
+		var projector = new THREE.Projector();
 
+		var pointerVector = new THREE.Vector3();
 
 
 
-	var oldPosition = new THREE.Vector3();
 
-	var oldScale = new THREE.Vector3();
 
-	var oldRotationMatrix = new THREE.Matrix4();
 
+		var point = new THREE.Vector3();
 
+		var offset = new THREE.Vector3();
 
 
 
-	var parentRotationMatrix  = new THREE.Matrix4();
 
-	var parentScale = new THREE.Vector3();
 
+		var rotation = new THREE.Vector3();
 
+		var offsetRotation = new THREE.Vector3();
 
+		var scale = 1;
 
 
 
-	var worldPosition = new THREE.Vector3();
 
-	var worldRotation = new THREE.Euler();
 
-	var worldRotationMatrix  = new THREE.Matrix4();
 
-	var camPosition = new THREE.Vector3();
 
-	var camRotation = new THREE.Euler();
 
+		var lookAtMatrix = new THREE.Matrix4();
 
+		var eye = new THREE.Vector3();
 
 
 
-	domElement.addEventListener( "mousedown", onPointerDown, false );
 
-	domElement.addEventListener( "touchstart", onPointerDown, false );
 
+		var tempMatrix = new THREE.Matrix4();
 
+		var tempVector = new THREE.Vector3();
 
+		var tempQuaternion = new THREE.Quaternion();
 
+		var unitX = new THREE.Vector3( 1, 0, 0 );
 
+		var unitY = new THREE.Vector3( 0, 1, 0 );
 
+		var unitZ = new THREE.Vector3( 0, 0, 1 );
 
 
 
-	domElement.addEventListener( "mousemove", onPointerHover, false );
 
-	domElement.addEventListener( "touchmove", onPointerHover, false );
 
+		var quaternionXYZ = new THREE.Quaternion();
 
+		var quaternionX = new THREE.Quaternion();
 
+		var quaternionY = new THREE.Quaternion();
 
+		var quaternionZ = new THREE.Quaternion();
 
+		var quaternionE = new THREE.Quaternion();
 
 
 
-	domElement.addEventListener( "mousemove", onPointerMove, false );
 
-	domElement.addEventListener( "touchmove", onPointerMove, false );
 
+		var oldPosition = new THREE.Vector3();
 
+		var oldScale = new THREE.Vector3();
 
+		var oldRotationMatrix = new THREE.Matrix4();
 
 
 
-	domElement.addEventListener( "mouseup", onPointerUp, false );
 
-	domElement.addEventListener( "mouseout", onPointerUp, false );
 
-	domElement.addEventListener( "touchend", onPointerUp, false );
 
-	domElement.addEventListener( "touchcancel", onPointerUp, false );
 
-	domElement.addEventListener( "touchleave", onPointerUp, false );
 
+		var parentRotationMatrix  = new THREE.Matrix4();
 
+		var parentScale = new THREE.Vector3();
 
 
 
-	this.attach = function ( object ) {
 
+		var worldPosition = new THREE.Vector3();
 
+		var worldRotation = new THREE.Euler();
 
+		var worldRotationMatrix  = new THREE.Matrix4();
 
+		var camPosition = new THREE.Vector3();
 
+		var camRotation = new THREE.Euler();
 
 
 
-		scope.object = object;
 
+		domElement.addEventListener( "mousedown", onPointerDown, false );
 
+		domElement.addEventListener( "touchstart", onPointerDown, false );
 
 
 
-	 	this.gizmo["translate"].hide();
 
-	 	this.gizmo["rotate"].hide();
 
-	 	this.gizmo["scale"].hide();
 
-	 	this.gizmo[_mode].show();
 
+		domElement.addEventListener( "mousemove", onPointerHover, false );
 
+		domElement.addEventListener( "touchmove", onPointerHover, false );
 
 
 
-	 	scope.update();
 
+		domElement.addEventListener( "mousemove", onPointerMove, false );
 
+		domElement.addEventListener( "touchmove", onPointerMove, false );
 
 
 
-	}
 
+		domElement.addEventListener( "mouseup", onPointerUp, false );
 
+		domElement.addEventListener( "mouseout", onPointerUp, false );
 
+		domElement.addEventListener( "touchend", onPointerUp, false );
 
+		domElement.addEventListener( "touchcancel", onPointerUp, false );
 
+		domElement.addEventListener( "touchleave", onPointerUp, false );
 
 
 
-	this.detach = function ( object ) {
 
+		this.attach = function ( object ) {
 
 
 
-		scope.object = undefined;
 
-		this.axis = undefined;
 
+			scope.object = object;
 
 
 
-	 	this.gizmo["translate"].hide();
 
-	 	this.gizmo["rotate"].hide();
 
-	 	this.gizmo["scale"].hide();
 
+			this.gizmo["translate"].hide();
 
+			this.gizmo["rotate"].hide();
 
+			this.gizmo["scale"].hide();
 
+			this.gizmo[_mode].show();
 
 
 
-	}
 
+			scope.update();
 
 
 
-	this.setMode = function ( mode ) {
 
+		};
 
 
 
-		_mode = mode ? mode : _mode;
 
+		this.detach = function ( object ) {
 
 
 
-		if ( _mode == "scale" ) scope.space = "local";
 
+			scope.object = undefined;
 
+			this.axis = undefined;
 
 
 
-	 	this.gizmo["translate"].hide();
 
-	 	this.gizmo["rotate"].hide();
 
-	 	this.gizmo["scale"].hide();	
-	 	this.gizmo[_mode].show();
 
+			this.gizmo["translate"].hide();
 
+			this.gizmo["rotate"].hide();
 
+			this.gizmo["scale"].hide();
 
 
 
-		this.update();
 
-		scope.dispatchEvent( changeEvent );
 
+		};
 
 
 
-	}
 
+		this.setMode = function ( mode ) {
 
 
 
-	this.setSnap = function ( snap ) {
 
+			_mode = mode ? mode : _mode;
 
 
 
-		scope.snap = snap;
 
+			if ( _mode == "scale" ) scope.space = "local";
 
 
 
-	}
 
+			this.gizmo["translate"].hide();
 
+			this.gizmo["rotate"].hide();
 
+			this.gizmo["scale"].hide();	
+			this.gizmo[_mode].show();
 
 
 
-	this.setSize = function ( size ) {
 
+			this.update();
 
+			scope.dispatchEvent( changeEvent );
 
 
 
-		scope.size = size;
 
-		this.update();
 
-		scope.dispatchEvent( changeEvent );
 
-	 	
-	}
 
+		};
 
 
 
-	this.setSpace = function ( space ) {
 
+		this.setSnap = function ( snap ) {
 
 
 
-		scope.space = space;
 
-		this.update();
 
-		scope.dispatchEvent( changeEvent );
 
+			scope.snap = snap;
 
 
 
-	}
 
+		};
 
 
 
-	this.update = function () {
 
+		this.setSize = function ( size ) {
 
 
 
-		if ( scope.object === undefined ) return;
 
+			scope.size = size;
 
+			this.update();
 
+			scope.dispatchEvent( changeEvent );
 
+			
+		};
 
 
 
-		scope.object.updateMatrixWorld();
 
-		worldPosition.setFromMatrixPosition( scope.object.matrixWorld );
 
-		worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.object.matrixWorld ) );
 
+		this.setSpace = function ( space ) {
 
 
 
-		camera.updateMatrixWorld();
 
-		camPosition.setFromMatrixPosition( camera.matrixWorld );
 
-		camRotation.setFromRotationMatrix( tempMatrix.extractRotation( camera.matrixWorld ) );
 
+			scope.space = space;
 
+			this.update();
 
+			scope.dispatchEvent( changeEvent );
 
 
 
-		scale = worldPosition.distanceTo( camPosition ) / 6 * scope.size;
 
-		this.position.copy( worldPosition )
 
-		this.scale.set( scale, scale, scale );
 
+		};
 
 
 
-		eye.copy( camPosition ).sub( worldPosition ).normalize();
 
+		this.update = function () {
 
 
 
-		if ( scope.space == "local" )
 
-			this.gizmo[_mode].update( worldRotation, eye );
 
+			if ( scope.object === undefined ) return;
 
 
 
-		else if ( scope.space == "world" )
 
-			this.gizmo[_mode].update( new THREE.Euler(), eye );
 
+			scope.object.updateMatrixWorld();
 
+			worldPosition.setFromMatrixPosition( scope.object.matrixWorld );
 
+			worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.object.matrixWorld ) );
 
 
 
-		this.gizmo[_mode].highlight( scope.axis );
 
+			camera.updateMatrixWorld();
 
+			camPosition.setFromMatrixPosition( camera.matrixWorld );
 
+			camRotation.setFromRotationMatrix( tempMatrix.extractRotation( camera.matrixWorld ) );
 
 
 
-	}
 
+			scale = worldPosition.distanceTo( camPosition ) / 6 * scope.size;
 
+			this.position.copy( worldPosition );
 
+			this.scale.set( scale, scale, scale );
 
 
 
-	function onPointerHover( event ) {
 
+			eye.copy( camPosition ).sub( worldPosition ).normalize();
 
 
 
-		if ( scope.object === undefined || _dragging == true ) return;
 
+			if ( scope.space == "local" )
 
+				this.gizmo[_mode].update( worldRotation, eye );
 
 
 
-		event.preventDefault();
 
+			else if ( scope.space == "world" )
 
+				this.gizmo[_mode].update( new THREE.Euler(), eye );
 
 
 
-		var pointer = event.touches ? event.touches[ 0 ] : event;
 
+			this.gizmo[_mode].highlight( scope.axis );
 
 
 
-		var intersect = intersectObjects( pointer, scope.gizmo[_mode].pickers.children );
 
+		};
 
 
 
-		if ( intersect ) {
 
+		function onPointerHover( event ) {
 
 
 
-			scope.axis = intersect.object.name;
 
-			scope.update();
 
-			scope.dispatchEvent( changeEvent );
 
+			if ( scope.object === undefined || _dragging === true ) return;
 
 
 
-		} else if ( scope.axis !== undefined ) {
 
+			event.preventDefault();
 
 
 
-			scope.axis = undefined;
 
-			scope.update();
 
-			scope.dispatchEvent( changeEvent );
 
+			var pointer = event.touches ? event.touches[ 0 ] : event;
 
+
 
+			var intersect = intersectObjects( pointer, scope.gizmo[_mode].pickers.children );
 
+
 
+			if ( intersect ) {
 
+
 
+				scope.axis = intersect.object.name;
 
+				scope.update();
 
+				scope.dispatchEvent( changeEvent );
 
+
 
+			} else if ( scope.axis !== null ) {
 
+
 
+				scope.axis = null;
 
+				scope.update();
 
+				scope.dispatchEvent( changeEvent );
 
+
 
+			}
 
 
 
 		}
 
 		}
 
 
 
-	};
 
+		function onPointerDown( event ) {
 
 
 
-	function onPointerDown( event ) {
 
+			if ( scope.object === undefined || _dragging === true ) return;
 
 
 
-		if ( scope.object === undefined || _dragging == true ) return;
 
+			event.preventDefault();
 
+			event.stopPropagation();
 
 
 
-		event.preventDefault();
 
-		event.stopPropagation();
 
+			var pointer = event.touches ? event.touches[ 0 ] : event;
 
 
 
-		var pointer = event.touches ? event.touches[ 0 ] : event;
 
+			if ( pointer.button === 0 || pointer.button === undefined ) {
 
 
 
-		if ( pointer.button === 0 || pointer.button === undefined ) {
 
+				var intersect = intersectObjects( pointer, scope.gizmo[_mode].pickers.children );
 
 
 
-			var intersect = intersectObjects( pointer, scope.gizmo[_mode].pickers.children );
 
+				if ( intersect ) {
 
 
 
-			if ( intersect ) {
 
+					scope.axis = intersect.object.name;
 
 
 
-				scope.axis = intersect.object.name;
 
+					scope.update();
 
 
 
-				scope.update();
 
+					eye.copy( camPosition ).sub( worldPosition ).normalize();
 
 
 
-				eye.copy( camPosition ).sub( worldPosition ).normalize();
 
+					scope.gizmo[_mode].setActivePlane( scope.axis, eye );
 
 
 
-				scope.gizmo[_mode].setActivePlane( scope.axis, eye );
 
+					var planeIntersect = intersectObjects( pointer, [scope.gizmo[_mode].activePlane] );
 
 
 
-				var planeIntersect = intersectObjects( pointer, [scope.gizmo[_mode].activePlane] );
 
+					oldPosition.copy( scope.object.position );
 
+					oldScale.copy( scope.object.scale );
 
 
 
-				oldPosition.copy( scope.object.position );
 
-				oldScale.copy( scope.object.scale );
 
+					oldRotationMatrix.extractRotation( scope.object.matrix );
 
+					worldRotationMatrix.extractRotation( scope.object.matrixWorld );
 
 
 
-				oldRotationMatrix.extractRotation( scope.object.matrix );
 
-				worldRotationMatrix.extractRotation( scope.object.matrixWorld );
 
+					parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld );
 
+					parentScale.setFromMatrixScale( tempMatrix.getInverse( scope.object.parent.matrixWorld ) );
 
 
 
-				parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld );
 
-				parentScale.setFromMatrixScale( tempMatrix.getInverse( scope.object.parent.matrixWorld ) );
 
+					offset.copy( planeIntersect.point );
 
 
 
-				offset.copy( planeIntersect.point );
 
+				}
 
 
 
 			}
 
 			}
 
 
 
+			_dragging = true;
 
+
 
 		}
 
 		}
 
 
 
-		_dragging = true;
 
+		function onPointerMove( event ) {
 
 
 
-	};
 
+			if ( scope.object === undefined || scope.axis === null || _dragging === false ) return;
 
 
 
-	function onPointerMove( event ) {
 
+			event.preventDefault();
 
+			event.stopPropagation();
 
 
 
-		if ( scope.object === undefined || scope.axis === undefined || _dragging == false ) return;
 
+			var pointer = event.touches? event.touches[0] : event;
 
 
 
-		event.preventDefault();
 
-		event.stopPropagation();
 
+			var planeIntersect = intersectObjects( pointer, [scope.gizmo[_mode].activePlane] );
 
 
 
-		var pointer = event.touches? event.touches[0] : event;
 
+			point.copy( planeIntersect.point );
 
 
 
-		var planeIntersect = intersectObjects( pointer, [scope.gizmo[_mode].activePlane] );
 
+			if ( _mode == "translate" ) {
 
 
 
-		point.copy( planeIntersect.point );
 
+				point.sub( offset );
 
+				point.multiply(parentScale);
 
 
 
-		if ( _mode == "translate" ) {
 
+				if ( scope.space == "local" ) {
 
 
 
-			point.sub( offset );
 
-			point.multiply(parentScale);
 
+					point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
 
 
-			if ( scope.space == "local" ) {
 
+					if ( scope.axis.search("X") == -1 ) point.x = 0;
 
+					if ( scope.axis.search("Y") == -1 ) point.y = 0;
 
+					if ( scope.axis.search("Z") == -1 ) point.z = 0;
 
 
 
-				point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
+					point.applyMatrix4( oldRotationMatrix );
 
 
 
-				if ( scope.axis.search("X") == -1 ) point.x = 0;
 
-				if ( scope.axis.search("Y") == -1 ) point.y = 0;
 
-				if ( scope.axis.search("Z") == -1 ) point.z = 0;
 
+					scope.object.position.copy( oldPosition );
 
+					scope.object.position.add( point );
 
 
 
-				point.applyMatrix4( oldRotationMatrix );
 
+				} 
 
 
-				scope.object.position.copy( oldPosition );
 
-				scope.object.position.add( point );
 
+				if ( scope.space == "world" || scope.axis.search("XYZ") != -1 ) {
 
 
 
-			} 
+					if ( scope.axis.search("X") == -1 ) point.x = 0;
 
+					if ( scope.axis.search("Y") == -1 ) point.y = 0;
 
+					if ( scope.axis.search("Z") == -1 ) point.z = 0;
 
 
 
-			if ( scope.space == "world" || scope.axis.search("XYZ") != -1 ) {
 
+					point.applyMatrix4( tempMatrix.getInverse( parentRotationMatrix ) );
 
 
 
-				if ( scope.axis.search("X") == -1 ) point.x = 0;
 
-				if ( scope.axis.search("Y") == -1 ) point.y = 0;
 
-				if ( scope.axis.search("Z") == -1 ) point.z = 0;
 
+					scope.object.position.copy( oldPosition );
 
+					scope.object.position.add( point );
 
 
 
-				point.applyMatrix4( tempMatrix.getInverse( parentRotationMatrix ) );
 
+				}
 
+				
+				if ( scope.snap !== null ) {
 
+				
+					if ( scope.axis.search("X") != -1 ) scope.object.position.x = Math.round( scope.object.position.x / scope.snap ) * scope.snap;
 
+					if ( scope.axis.search("Y") != -1 ) scope.object.position.y = Math.round( scope.object.position.y / scope.snap ) * scope.snap;
 
+					if ( scope.axis.search("Z") != -1 ) scope.object.position.z = Math.round( scope.object.position.z / scope.snap ) * scope.snap;
 
+				
+				}
 
 
 
-				scope.object.position.copy( oldPosition );
 
-				scope.object.position.add( point );
 
+			} else if ( _mode == "scale" ) {
 
 
 
-			}
 
-			
-			if ( scope.snap != undefined ) {
 
-			
-				if ( scope.axis.search("X") != -1 ) scope.object.position.x = Math.round( scope.object.position.x / scope.snap ) * scope.snap;
 
-				if ( scope.axis.search("Y") != -1 ) scope.object.position.y = Math.round( scope.object.position.y / scope.snap ) * scope.snap;
 
-				if ( scope.axis.search("Z") != -1 ) scope.object.position.z = Math.round( scope.object.position.z / scope.snap ) * scope.snap;
 
-			
-			}
 
+				point.sub( offset );
 
+				point.multiply(parentScale);
 
 
 
-		} else if ( _mode == "scale" ) {
 
+				if ( scope.space == "local" ) {
 
 
 
-			point.sub( offset );
 
-			point.multiply(parentScale);
 
+					if ( scope.axis == "XYZ") {
 
 
 
-			if ( scope.space == "local" ) {
 
+						scale = 1 + ( ( point.y ) / 50 );
 
 
 
-				if ( scope.axis == "XYZ") {
 
+						scope.object.scale.x = oldScale.x * scale;
 
+						scope.object.scale.y = oldScale.y * scale;
 
+						scope.object.scale.z = oldScale.z * scale;
 
 
 
-					scale = 1 + ( ( point.y ) / 50 );
 
+					} else {
 
 
 
-					scope.object.scale.x = oldScale.x * scale;
 
-					scope.object.scale.y = oldScale.y * scale;
 
-					scope.object.scale.z = oldScale.z * scale;
 
+						point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
 
 
-				} else {
 
+						if ( scope.axis == "X" ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 );
 
+						if ( scope.axis == "Y" ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 );
 
+						if ( scope.axis == "Z" ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 );
 
 
 
-					point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
-
 
-					if ( scope.axis == "X" ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 );
 
-					if ( scope.axis == "Y" ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 );
 
-					if ( scope.axis == "Z" ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 );
 
+					}
 
 
 
 				}
 
 				}
 
 
 
-			}
 
+			} else if ( _mode == "rotate" ) {
 
 
 
-		} else if ( _mode == "rotate" ) {
 
+				point.sub( worldPosition );
 
+				point.multiply(parentScale);
 
+				tempVector.copy(offset).sub( worldPosition );
 
+				tempVector.multiply(parentScale);
 
 
 
-			point.sub( worldPosition );
 
-			point.multiply(parentScale);
 
-			tempVector.copy(offset).sub( worldPosition );
 
-			tempVector.multiply(parentScale);
 
+				if ( scope.axis == "E" ) {
 
 
 
-			if ( scope.axis == "E" ) {
 
+					point.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
 
+					tempVector.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
 
 
 
-				point.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
 
-				tempVector.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) );
 
+					rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
+					offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
 
 
-				rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
-				offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
+					tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
 
 
-				tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
+					quaternionE.setFromAxisAngle( eye, rotation.z - offsetRotation.z );
 
+					quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
 
 
-				quaternionE.setFromAxisAngle( eye, rotation.z - offsetRotation.z );
 
-				quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
+					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionE );
 
+					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
 
 
-				tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionE );
 
-				tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
+					scope.object.quaternion.copy( tempQuaternion );
 
 
 
-				scope.object.quaternion.copy( tempQuaternion );
 
+				} else if ( scope.axis == "XYZE" ) {
 
 
 
-			} else if ( scope.axis == "XYZE" ) {
 
+					quaternionE.setFromEuler( point.clone().cross(tempVector).normalize() ); // rotation axis
 
 
 
-				quaternionE.setFromEuler( point.clone().cross(tempVector).normalize() ); // rotation axis
 
+					tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
+					quaternionX.setFromAxisAngle( quaternionE, - point.clone().angleTo(tempVector) );
 
+					quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
 
 
-				tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
-				quaternionX.setFromAxisAngle( quaternionE, - point.clone().angleTo(tempVector) );
 
-				quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
+					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
+					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
 
 
-				tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
-				tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
+					scope.object.quaternion.copy( tempQuaternion );
 
 
 
-				scope.object.quaternion.copy( tempQuaternion );
 
+				} else if ( scope.space == "local" ) {
 
 
 
-			} else if ( scope.space == "local" ) {
 
+					point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
 
 
-				point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
+					tempVector.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
 
 
-				tempVector.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) );
 
+					rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
+					offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
 
 
-				rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
-				offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
+					quaternionXYZ.setFromRotationMatrix( oldRotationMatrix );
 
+					quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
 
+					quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
 
+					quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 
 
 
-				quaternionXYZ.setFromRotationMatrix( oldRotationMatrix );
 
-				quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
 
-				quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
 
-				quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 
+					if ( scope.axis == "X" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
 
+					if ( scope.axis == "Y" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
 
+					if ( scope.axis == "Z" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
 
 
 
-				if ( scope.axis == "X" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX );
 
-				if ( scope.axis == "Y" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY );
 
-				if ( scope.axis == "Z" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ );
 
+					scope.object.quaternion.copy( quaternionXYZ );
 
 
 
-				scope.object.quaternion.copy( quaternionXYZ );
 
+				} else if ( scope.space == "world" ) {
 
 
 
-			} else if ( scope.space == "world" ) {
 
+					rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
+					offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
 
 
-				rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) );
 
-				offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) );
 
+					tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
 
 
-				tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) );
 
+					quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
 
+					quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
 
+					quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 
+					quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
 
 
-				quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x );
 
-				quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y );
 
-				quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z );
 
-				quaternionXYZ.setFromRotationMatrix( worldRotationMatrix );
 
+					if ( scope.axis == "X" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
+					if ( scope.axis == "Y" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 
+					if ( scope.axis == "Z" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
 
 
-				if ( scope.axis == "X" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX );
 
-				if ( scope.axis == "Y" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY );
 
-				if ( scope.axis == "Z" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ );
 
+					tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
 
 
-				tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ );
 
+					scope.object.quaternion.copy( tempQuaternion );
 
 
 
-				scope.object.quaternion.copy( tempQuaternion );
 
+				}
 
 
 
 			}
 
 			}
 
 
 
-		}
 
+			scope.update();
 
+			scope.dispatchEvent( changeEvent );
 
 
 
-		scope.update();
 
-		scope.dispatchEvent( changeEvent );
 
+		}
 
 
 
-	}
 
+		function onPointerUp( event ) {
 
 
 
-	function onPointerUp( event ) {
 
+			_dragging = false;
 
+			onPointerHover( event );
 
 
 
-		_dragging = false;
 
-		onPointerHover( event );
 
+		}
 
 
 
-	}
 
+		function intersectObjects( pointer, objects ) {
 
 
 
-	function intersectObjects( pointer, objects ) {
 
+			var rect = domElement.getBoundingClientRect();
 
+			var x = (pointer.clientX - rect.left) / rect.width;
 
+			var y = (pointer.clientY - rect.top) / rect.height;
 
+			pointerVector.set( ( x ) * 2 - 1, - ( y ) * 2 + 1, 0.5 );
 
 
 
-		var rect = domElement.getBoundingClientRect();
 
-		var x = (pointer.clientX - rect.left) / rect.width;
 
-		var y = (pointer.clientY - rect.top) / rect.height;
 
-		pointerVector.set( ( x ) * 2 - 1, - ( y ) * 2 + 1, 0.5 );
 
+			projector.unprojectVector( pointerVector, camera );
 
+			ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
 
 
 
-		projector.unprojectVector( pointerVector, camera );
 
-		ray.set( camPosition, pointerVector.sub( camPosition ).normalize() );
 
+			var intersections = ray.intersectObjects( objects, true );
 
+			return intersections[0] ? intersections[0] : false;
 
 
 
-		var intersections = ray.intersectObjects( objects, true );
 
-		return intersections[0] ? intersections[0] : false;
 
+		}
 
 
 
-	}
 
+	};
 
 
 
-};
 
+	THREE.TransformControls.prototype = Object.create( THREE.Object3D.prototype );
 
 
 
-THREE.TransformControls.prototype = Object.create( THREE.Object3D.prototype );
 
+}());

+ 1 - 1
examples/js/exporters/GeometryExporter.js
View File 

@@ -41,7 +41,7 @@ THREE.GeometryExporter.prototype = {
 
 
 
 			var hasMaterial = false; // face.materialIndex !== undefined;
 
 			var hasMaterial = false; // face.materialIndex !== undefined;
 
 			var hasFaceUv = false; // deprecated
 
 			var hasFaceUv = false; // deprecated
 
-			var hasFaceVertexUv = geometry.faceVertexUvs[ 0 ].length > 0;
 
+			var hasFaceVertexUv = geometry.faceVertexUvs[ 0 ][ i ] !== undefined;
 
 			var hasFaceNormal = face.normal.length() > 0;
 
 			var hasFaceNormal = face.normal.length() > 0;
 
 			var hasFaceVertexNormal = face.vertexNormals.length > 0;
 
 			var hasFaceVertexNormal = face.vertexNormals.length > 0;
 
 			var hasFaceColor = face.color.r !== 1 || face.color.g !== 1 || face.color.b !== 1;
 
 			var hasFaceColor = face.color.r !== 1 || face.color.g !== 1 || face.color.b !== 1;

+ 49 - 37
examples/js/loaders/OBJLoader2.js
View File 

@@ -28,27 +28,7 @@ THREE.OBJLoader.prototype = {
 
 
 
 	parse: function ( text ) {
 
 	parse: function ( text ) {
 
 
 
-		/*
 
-		function vector( x, y, z ) {
 
-
 
-			return new THREE.Vector3( parseFloat( x ), parseFloat( y ), parseFloat( z ) );
 
-
 
-		}
 
-
 
-		function uv( u, v ) {
 
-
 
-			return new THREE.Vector2( parseFloat( u ), parseFloat( v ) );
 
-
 
-		}
 
-
 
-		function face3( a, b, c, normals ) {
 
-
 
-			return new THREE.Face3( a, b, c, normals );
 
-
 
-		}
 
-		*/
 
-		
-		var object = new THREE.Object3D();
 
+		var object, objects = [];
 
 		var geometry, material, mesh;
 
 		var geometry, material, mesh;
 
 
 
 		function parseVertexIndex( value ) {
 
 		function parseVertexIndex( value ) {
 
@@ -172,10 +152,23 @@ THREE.OBJLoader.prototype = {
 
 
 
 		if ( /^o /gm.test( text ) === false ) {
 
 		if ( /^o /gm.test( text ) === false ) {
 
 
 
-			geometry = new THREE.Geometry2();
 
-			material = new THREE.MeshLambertMaterial();
 
-			mesh = new THREE.Mesh( geometry, material );
 
-			object.add( mesh );
 
+			geometry = {
 
+				vertices: [],
 
+				normals: [],
 
+				uvs: []
 
+			};
 
+
 
+			material = {
 
+				name: ''
 
+			};
 
+
 
+			object = {
 
+				name: '',
 
+				geometry: geometry,
 
+				material: material
 
+			};
 
+
 
+			objects.push( object );
 
 
 
 		}
 
 		}
 
 
 
@@ -285,12 +278,22 @@ THREE.OBJLoader.prototype = {
 
 
 
 			} else if ( /^o /.test( line ) ) {
 
 			} else if ( /^o /.test( line ) ) {
 
 
 
-				geometry = new THREE.Geometry2();
 
-				material = new THREE.MeshLambertMaterial();
 
+				geometry = {
 
+					vertices: [],
 
+					normals: [],
 
+					uvs: []
 
+				};
 
+
 
+				material = {
 
+					name: ''
 
+				};
 
 
 
-				mesh = new THREE.Mesh( geometry, material );
 
-				mesh.name = line.substring( 2 ).trim();
 
-				object.add( mesh );
 
+				object = {
 
+					name: line.substring( 2 ).trim(),
 
+					geometry: geometry
 
+				};
 
+
 
+				objects.push( object )
 
 
 
 			} else if ( /^g /.test( line ) ) {
 
 			} else if ( /^g /.test( line ) ) {
 
 
 
@@ -318,19 +321,28 @@ THREE.OBJLoader.prototype = {
 
 
 
 		}
 
 		}
 
 
 
-		var children = object.children;
 
+		var container = new THREE.Object3D();
 
+
 
+		for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
+
 
+			var object = objects[ i ];
 
+
 
+			var geometry = new THREE.Geometry2( object.geometry.vertices.length / 3 );
 
+			geometry.vertices.set( object.geometry.vertices );
 
+			geometry.normals.set( object.geometry.normals );
 
+			geometry.uvs.set( object.geometry.uvs );
 
 
 
-		for ( var i = 0, l = children.length; i < l; i ++ ) {
 
+			var material = new THREE.MeshLambertMaterial();
 
+			material.name = object.material.name;
 
 
 
-			var geometry = children[ i ].geometry;
 
+			var mesh = new THREE.Mesh( geometry, material );
 
+			mesh.name = object.name;
 
 
 
-			geometry.vertices = new Float32Array( geometry.vertices );
 
-			geometry.normals = new Float32Array( geometry.normals );
 
-			geometry.uvs = new Float32Array( geometry.uvs );
 
+			container.add( mesh );
 
 
 
 		}
 
 		}
 
 
 
-		return object;
 
+		return container;
 
 
 
 	}
 
 	}

+ 196 - 616
examples/js/modifiers/SubdivisionModifier.js
View File 

@@ -2,102 +2,23 @@
 
  *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog 

  *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog 

  *

  *

  *	Subdivision Geometry Modifier 

  *	Subdivision Geometry Modifier 

- *		using Catmull-Clark Subdivision Surfaces

- *		for creating smooth geometry meshes

+ *		using Loop Subdivision Scheme

  *

  *

- *	Note: a modifier modifies vertices and faces of geometry,

- *		so use geometry.clone() if original geometry needs to be retained

- * 

- *	Readings: 

- *		http://en.wikipedia.org/wiki/Catmull%E2%80%93Clark_subdivision_surface

- *		http://www.rorydriscoll.com/2008/08/01/catmull-clark-subdivision-the-basics/

- *		http://xrt.wikidot.com/blog:31

- *		"Subdivision Surfaces in Character Animation"

+ *	References:

+ *		http://graphics.stanford.edu/~mdfisher/subdivision.html

+ *		http://www.holmes3d.net/graphics/subdivision/

+ *		http://www.cs.rutgers.edu/~decarlo/readings/subdiv-sg00c.pdf

  *

  *

- *		(on boundary edges)

- *		http://rosettacode.org/wiki/Catmull%E2%80%93Clark_subdivision_surface

- *		https://graphics.stanford.edu/wikis/cs148-09-summer/Assignment3Description

+ *	Known Issues:

+ *		- currently doesn't handle UVs

+ *		- currently doesn't handle "Sharp Edges"

  *

  *

- *	Supports:

- *		Closed and Open geometries.

- *

- *	TODO:

- *		crease vertex and "semi-sharp" features

- *		selective subdivision

  */

  */

 

 

-THREE.Face4Stub = function ( a, b, c, d, normal, color, materialIndex ) {

-

-	this.a = a;

-	this.b = b;

-	this.c = c;

-	this.d = d;

-

-	this.normal = normal instanceof THREE.Vector3 ? normal : new THREE.Vector3();

-	this.vertexNormals = normal instanceof Array ? normal : [ ];

-

-	this.color = color instanceof THREE.Color ? color : new THREE.Color();

-	this.vertexColors = color instanceof Array ? color : [];

-

-	this.vertexTangents = [];

-

-	this.materialIndex = materialIndex !== undefined ? materialIndex : 0;

-

-	this.centroid = new THREE.Vector3();

-

-};

-

-

-THREE.GeometryUtils.convertFace4s = function(geometry) {

-

-	// return geometry;

-

-	var faces = geometry.faces;

-	var faceVertexUvs = geometry.faceVertexUvs[0];

-

-	var newfaces = [];

-	var newfaceVertexUvs = [];

-

-	var f, fl, face, uv;

-

-	for (f=0, fl=faces.length; f < fl; f++) {

-

-		face = faces[f];

-		uv = faceVertexUvs[f];

-

-		if ( face instanceof THREE.Face3 ) {

-			

-			newfaces.push(face);

-			if (uv) newfaceVertexUvs.push(uv);

-

-		} else {

-

-			newfaces.push( new THREE.Face3( face.a, face.b, face.c, null, face.color, face.materialIndex) );

-			newfaces.push( new THREE.Face3( face.d, face.a, face.c, null, face.color, face.materialIndex) );

-

-

-			if (uv) newfaceVertexUvs.push([uv[0], uv[1], uv[2]]);

-			if (uv) newfaceVertexUvs.push([uv[3], uv[0], uv[2]]);

-

-		}

-

-	}

-

-	geometry.faces = newfaces;

-	geometry.faceVertexUvs = [newfaceVertexUvs];

-

-}

-

-

 THREE.SubdivisionModifier = function ( subdivisions ) {

 THREE.SubdivisionModifier = function ( subdivisions ) {

 

 

 	this.subdivisions = (subdivisions === undefined ) ? 1 : subdivisions;

 	this.subdivisions = (subdivisions === undefined ) ? 1 : subdivisions;

 

 

-	// Settings

-	this.useOldVertexColors = false;

-	this.supportUVs = true;

-	this.debug = false;

-

 };

 };

 

 

 // Applies the "modify" pattern

 // Applies the "modify" pattern

@@ -109,655 +30,314 @@ THREE.SubdivisionModifier.prototype.modify = function ( geometry ) {
 
 		this.smooth( geometry );

 		this.smooth( geometry );

 	}

 	}

 

 

-	THREE.GeometryUtils.convertFace4s( geometry );

 	delete geometry.__tmpVertices;

 	delete geometry.__tmpVertices;

 	geometry.computeCentroids();

 	geometry.computeCentroids();

 	geometry.computeFaceNormals();

 	geometry.computeFaceNormals();

 	geometry.computeVertexNormals();

 	geometry.computeVertexNormals();

 

 

-

-};

-

-/// REFACTORING THIS OUT

-

-THREE.GeometryUtils.orderedKey = function ( a, b ) {

-

-	return Math.min( a, b ) + "_" + Math.max( a, b );

-

 };

 };

 

 

+(function() {

 

 

-// Returns a hashmap - of { edge_key: face_index }

-THREE.GeometryUtils.computeEdgeFaces = function ( geometry ) {

-

-	var i, il, v1, v2, j, k,

-		face, faceIndices, faceIndex,

-		edge,

-		hash,

-		edgeFaceMap = {};

-

-	var orderedKey = THREE.GeometryUtils.orderedKey;

-

-	function mapEdgeHash( hash, i ) {

-

-		if ( edgeFaceMap[ hash ] === undefined ) {

-

-			edgeFaceMap[ hash ] = [];

-

-		}

-

-		edgeFaceMap[ hash ].push( i );

-	}

-

-

-	// construct vertex -> face map

-

-	for( i = 0, il = geometry.faces.length; i < il; i ++ ) {

-

-		face = geometry.faces[ i ];

-

-		if ( face instanceof THREE.Face3 ) {

-

-			hash = orderedKey( face.a, face.b );

-			mapEdgeHash( hash, i );

-

-			hash = orderedKey( face.b, face.c );

-			mapEdgeHash( hash, i );

-

-			hash = orderedKey( face.c, face.a );

-			mapEdgeHash( hash, i );

-

-		} else if ( face instanceof THREE.Face4Stub ) {

-

-			hash = orderedKey( face.a, face.b );

-			mapEdgeHash( hash, i );

-

-			hash = orderedKey( face.b, face.c );

-			mapEdgeHash( hash, i );

-

-			hash = orderedKey( face.c, face.d );

-			mapEdgeHash( hash, i );

-

-			hash = orderedKey( face.d, face.a );

-			mapEdgeHash( hash, i );

-

-		}

-

-	}

-

-	// extract faces

-

-	// var edges = [];

-	// 

-	// var numOfEdges = 0;

-	// for (i in edgeFaceMap) {

-	// 	numOfEdges++;

-	//

-	// 	edge = edgeFaceMap[i];

-	// 	edges.push(edge);

-	//

-	// }

-

-	//debug('edgeFaceMap', edgeFaceMap, 'geometry.edges',geometry.edges, 'numOfEdges', numOfEdges);

-

-	return edgeFaceMap;

-

-}

-

-/////////////////////////////

-

-// Performs an iteration of Catmull-Clark Subdivision

-THREE.SubdivisionModifier.prototype.smooth = function ( oldGeometry ) {

-

-	//debug( 'running smooth' );

-

-	// New set of vertices, faces and uvs

-	var newVertices = [], newFaces = [], newUVs = [];

-

-	function v( x, y, z ) {

-		newVertices.push( new THREE.Vector3( x, y, z ) );

-	}

-

-	var scope = this;

-	var orderedKey = THREE.GeometryUtils.orderedKey;

-	var computeEdgeFaces = THREE.GeometryUtils.computeEdgeFaces;

-

-	function assert() {

-

-		if (scope.debug && console && console.assert) console.assert.apply(console, arguments);

-

-	}

-

-	function debug() {

-

-		if (scope.debug) console.log.apply(console, arguments);

-

-	}

-

-	function warn() {

-

-		if (console)

-		console.log.apply(console, arguments);

-

-	}

-

-	function f4( a, b, c, d, oldFace, orders, facei ) {

-

-		// TODO move vertex selection over here!

-

-		var newFace = new THREE.Face4Stub( a, b, c, d, null, oldFace.color, oldFace.materialIndex );

-

-		if (scope.useOldVertexColors) {

-

-			newFace.vertexColors = []; 

-

-			var color, tmpColor, order;

-

-			for (var i=0;i<4;i++) {

-

-				order = orders[i];

-

-				color = new THREE.Color(),

-				color.setRGB(0,0,0);

-

-				for (var j=0, jl=0; j<order.length;j++) {

-					tmpColor = oldFace.vertexColors[order[j]-1];

-					color.r += tmpColor.r;

-					color.g += tmpColor.g;

-					color.b += tmpColor.b;

-				}

-

-				color.r /= order.length;

-				color.g /= order.length;

-				color.b /= order.length;

-

-				newFace.vertexColors[i] = color;

-

-			}

-

-		}

-

-		newFaces.push( newFace );

-

-		if (scope.supportUVs) {

-

-			var aUv = [

-				getUV(a, ''),

-				getUV(b, facei),

-				getUV(c, facei),

-				getUV(d, facei)

-			];

-

-			if (!aUv[0]) debug('a :( ', a+':'+facei);

-			else if (!aUv[1]) debug('b :( ', b+':'+facei);

-			else if (!aUv[2]) debug('c :( ', c+':'+facei);

-			else if (!aUv[3]) debug('d :( ', d+':'+facei);

-			else 

-				newUVs.push( aUv );

-

-		}

-	}

-

-	var originalPoints = oldGeometry.vertices;

-	var originalFaces = oldGeometry.faces;

-	var originalVerticesLength = originalPoints.length;

-

-	var newPoints = originalPoints.concat(); // New set of vertices to work on

-

-	var facePoints = [], // these are new points on exisiting faces

-		edgePoints = {}; // these are new points on exisiting edges

+	// Some constants

+	var WARNINGS = !true; // Set to true for development

+	var ABC = [ 'a', 'b', 'c' ];

+	

 

 

-	var sharpEdges = {}, sharpVertices = []; // Mark edges and vertices to prevent smoothening on them

-	// TODO: handle this correctly.

+	function getEdge( a, b, map ) {

 

 

-	var uvForVertices = {}; // Stored in {vertex}:{old face} format

+		var vertexIndexA = Math.min( a, b );

+		var vertexIndexB = Math.max( a, b );

 

 

+		var key = vertexIndexA + "_" + vertexIndexB;

 

 

-	function debugCoreStuff() {

-

-		console.log('facePoints', facePoints, 'edgePoints', edgePoints);

-		console.log('edgeFaceMap', edgeFaceMap, 'vertexEdgeMap', vertexEdgeMap);

+		return map[ key ];

 

 

 	}

 	}

 

 

-	function getUV(vertexNo, oldFaceNo) {

-		var j,jl;

 

 

-		var key = vertexNo+':'+oldFaceNo;

-		var theUV = uvForVertices[key];

+	function processEdge( a, b, vertices, map, face, metaVertices ) {

 

 

-		if (!theUV) {

-			if (vertexNo>=originalVerticesLength && vertexNo < (originalVerticesLength + originalFaces.length)) {

-				debug('face pt');

-			} else {

-				debug('edge pt');

-			}

+		var vertexIndexA = Math.min( a, b );

+		var vertexIndexB = Math.max( a, b );

 

 

-			warn('warning, UV not found for', key);

+		var key = vertexIndexA + "_" + vertexIndexB;

 

 

-			return null;

-		}

+		var edge;

 

 

-		return theUV;

- 

-		// Original faces -> Vertex Nos. 

-		// new Facepoint -> Vertex Nos.

-		// edge Points

+		if ( key in map ) {

 

 

-	}

+			edge = map[ key ];

 

 

-	function addUV(vertexNo, oldFaceNo, value) {

-

-		var key = vertexNo+':'+oldFaceNo;

-		if (!(key in uvForVertices)) {

-			uvForVertices[key] = value;

 		} else {

 		} else {

-			warn('dup vertexNo', vertexNo, 'oldFaceNo', oldFaceNo, 'value', value, 'key', key, uvForVertices[key]);

-		}

-	}

-

-	// Step 1

-	//	For each face, add a face point

-	//	Set each face point to be the centroid of all original points for the respective face.

-	// debug(oldGeometry);

-	var i, il, j, jl, face;

-

-	// For Uvs

-	var uvs = oldGeometry.faceVertexUvs[0];

-	var abcd = 'abcd', vertice;

-

-	debug('originalFaces, uvs, originalVerticesLength', originalFaces.length, uvs.length, originalVerticesLength);

+			

+			var vertexA = vertices[ vertexIndexA ];

+			var vertexB = vertices[ vertexIndexB ];

 

 

-	if (scope.supportUVs)

+			edge = {

 

 

-	for (i=0, il = uvs.length; i<il; i++ ) {

+				a: vertexA, // pointer reference

+				b: vertexB,

+				newEdge: null,

+				// aIndex: a, // numbered reference

+				// bIndex: b,

+				faces: [] // pointers to face

 

 

-		for (j=0,jl=uvs[i].length;j<jl;j++) {

+			};

 

 

-			vertice = originalFaces[i][abcd.charAt(j)];

-			addUV(vertice, i, uvs[i][j]);

+			map[ key ] = edge;

 

 

 		}

 		}

 

 

-	}

+		edge.faces.push( face );

 

 

-	if (uvs.length == 0) scope.supportUVs = false;

+		metaVertices[ a ].edges.push( edge );

+		metaVertices[ b ].edges.push( edge );

+		

 

 

-	// Additional UVs check, if we index original 

-	var uvCount = 0;

-	for (var u in uvForVertices) {

-		uvCount++;

-	}

-	if (!uvCount) {

-		scope.supportUVs = false;

-		debug('no uvs');

 	}

 	}

 

 

-	var avgUv ;

+	function generateLookups( vertices, faces, metaVertices, edges ) {

 

 

-	for (i=0, il = originalFaces.length; i<il ;i++) {

-

-		face = originalFaces[ i ];

-		facePoints.push( face.centroid );

-		newPoints.push( face.centroid );

-

-		if (!scope.supportUVs) continue;

-

-		// Prepare subdivided uv

-

-		avgUv = new THREE.Vector2();

-

-		if ( face instanceof THREE.Face3 ) {

-

-			avgUv.x = getUV( face.a, i ).x + getUV( face.b, i ).x + getUV( face.c, i ).x;

-			avgUv.y = getUV( face.a, i ).y + getUV( face.b, i ).y + getUV( face.c, i ).y;

-			avgUv.x /= 3;

-			avgUv.y /= 3;

-

-		} else if ( face instanceof THREE.Face4Stub ) {

-

-			avgUv.x = getUV( face.a, i ).x + getUV( face.b, i ).x + getUV( face.c, i ).x + getUV( face.d, i ).x;

-			avgUv.y = getUV( face.a, i ).y + getUV( face.b, i ).y + getUV( face.c, i ).y + getUV( face.d, i ).y;

-			avgUv.x /= 4;

-			avgUv.y /= 4;

+		var i, il, face, edge;

 

 

+		for ( i = 0, il = vertices.length; i < il; i++ ) {

+			metaVertices[ i ] = { edges: [] };

 		}

 		}

+		

+		for ( i = 0, il = faces.length; i < il; i++ ) {

+			face = faces[ i ];

 

 

-		addUV(originalVerticesLength + i, '', avgUv);

-

-	}

-

-	// Step 2

-	//	For each edge, add an edge point.

-	//	Set each edge point to be the average of the two neighbouring face points and its two original endpoints.

-

-	var edgeFaceMap = computeEdgeFaces ( oldGeometry ); // Edge Hash -> Faces Index  eg { edge_key: [face_index, face_index2 ]}

-	var edge, faceIndexA, faceIndexB, avg;

-

-	// debug('edgeFaceMap', edgeFaceMap);

-

-	var edgeCount = 0;

-

-	var edgeVertex, edgeVertexA, edgeVertexB;

-

-	////

-

-	var vertexEdgeMap = {}; // Gives edges connecting from each vertex

-	var vertexFaceMap = {}; // Gives faces connecting from each vertex

-

-	function addVertexEdgeMap(vertex, edge) {

-

-		if (vertexEdgeMap[vertex]===undefined) {

-

-			vertexEdgeMap[vertex] = [];

+			processEdge( face.a, face.b, vertices, edges, face, metaVertices );

+			processEdge( face.b, face.c, vertices, edges, face, metaVertices );

+			processEdge( face.c, face.a, vertices, edges, face, metaVertices );

 

 

 		}

 		}

-

-		vertexEdgeMap[vertex].push(edge);

 	}

 	}

 

 

-	function addVertexFaceMap(vertex, face, edge) {

-

-		if (vertexFaceMap[vertex]===undefined) {

-

-			vertexFaceMap[vertex] = {};

+	function newFace( newFaces, a, b, c ) {

 

 

-		}

+		newFaces.push( new THREE.Face3( a, b, c ) );

 

 

-		vertexFaceMap[vertex][face] = edge;

-		// vertexFaceMap[vertex][face] = null;

 	}

 	}

 

 

-	// Prepares vertexEdgeMap and vertexFaceMap

-	for (i in edgeFaceMap) { // This is for every edge

-		edge = edgeFaceMap[i];

 

 

-		edgeVertex = i.split('_');

-		edgeVertexA = edgeVertex[0];

-		edgeVertexB = edgeVertex[1];

+	/////////////////////////////

 

 

-		// Maps an edgeVertex to connecting edges

-		addVertexEdgeMap(edgeVertexA, [edgeVertexA, edgeVertexB] );

-		addVertexEdgeMap(edgeVertexB, [edgeVertexA, edgeVertexB] );

+	// Performs one iteration of Subdivision

+	THREE.SubdivisionModifier.prototype.smooth = function ( geometry ) {

 

 

-		for (j=0,jl=edge.length;j<jl;j++) {

+		var tmp = new THREE.Vector3();

 

 

-			face = edge[j];

-			addVertexFaceMap(edgeVertexA, face, i);

-			addVertexFaceMap(edgeVertexB, face, i);

+		var oldVertices, oldFaces;

+		var newVertices, newFaces; // newUVs = [];

 

 

-		}

+		var n, l, i, il, j, k;

+		var metaVertices, sourceEdges;

 

 

-		// {edge vertex: { face1: edge_key, face2: edge_key.. } }

+		// new stuff.

+		var sourceEdges, newEdgeVertices, newSourceVertices

 

 

-		// this thing is fishy right now.

-		if (edge.length < 2) {

+		oldVertices = geometry.vertices; // { x, y, z}

+		oldFaces = geometry.faces; // { a: oldVertex1, b: oldVertex2, c: oldVertex3 }

 

 

-			// edge is "sharp";

-			sharpEdges[i] = true;

-			sharpVertices[edgeVertexA] = true;

-			sharpVertices[edgeVertexB] = true;

+		/******************************************************

+		 *

+		 * Step 0: Preprocess Geometry to Generate edges Lookup

+		 *

+		 *******************************************************/

 

 

-		}

+		metaVertices = new Array( oldVertices.length );

+		sourceEdges = {}; // Edge => { oldVertex1, oldVertex2, faces[]  }

 

 

-	}

-

-	for (i in edgeFaceMap) {

+		generateLookups(oldVertices, oldFaces, metaVertices, sourceEdges);

 

 

-		edge = edgeFaceMap[i];

 

 

-		faceIndexA = edge[0]; // face index a

-		faceIndexB = edge[1]; // face index b

+		/******************************************************

+		 *

+		 *	Step 1. 

+		 *	For each edge, create a new Edge Vertex,

+		 *	then position it.

+		 *

+		 *******************************************************/

 

 

-		edgeVertex = i.split('_');

-		edgeVertexA = edgeVertex[0];

-		edgeVertexB = edgeVertex[1];

+		newEdgeVertices = [];

+		var other, currentEdge, newEdge, face;

+		var edgeVertexWeight, adjacentVertexWeight, connectedFaces;

 

 

-		avg = new THREE.Vector3();

+		for ( i in sourceEdges ) {

 

 

-		//debug(i, faceIndexB,facePoints[faceIndexB]);

+			currentEdge = sourceEdges[ i ];

+			newEdge = new THREE.Vector3();

 

 

-		assert(edge.length > 0, 'an edge without faces?!');

+			edgeVertexWeight = 3 / 8;

+			adjacentVertexWeight = 1 / 8;

 

 

-		if (edge.length==1) {

+			connectedFaces = currentEdge.faces.length;

 

 

-			avg.add( originalPoints[ edgeVertexA ] );

-			avg.add( originalPoints[ edgeVertexB ] );

-			avg.multiplyScalar( 0.5 );

+			// check how many linked faces. 2 should be correct.

+			if ( connectedFaces != 2 ) {

 

 

-			sharpVertices[newPoints.length] = true;

-

-		} else {

+				// if length is not 2, handle condition

+				edgeVertexWeight = 0.5;

+				adjacentVertexWeight = 0;

 

 

-			avg.add( facePoints[ faceIndexA ] );

-			avg.add( facePoints[ faceIndexB ] );

-

-			avg.add( originalPoints[ edgeVertexA ] );

-			avg.add( originalPoints[ edgeVertexB ] );

-

-			avg.multiplyScalar( 0.25 );

+				if ( connectedFaces != 1 ) {

+					

+					if (WARNINGS) console.warn('Subdivision Modifier: Number of connected faces != 2, is: ', connectedFaces, currentEdge);

+			

+				}

 

 

-		}

+			}

 

 

-		edgePoints[i] = originalVerticesLength + originalFaces.length + edgeCount;

+			newEdge.addVectors( currentEdge.a, currentEdge.b ).multiplyScalar( edgeVertexWeight );

 

 

-		newPoints.push( avg );

+			tmp.set( 0, 0, 0 );

 

 

-		edgeCount ++;

+			for ( j = 0; j < connectedFaces; j++ ) {

 

 

-		if (!scope.supportUVs) {

-			continue;

-		}

+				face = currentEdge.faces[ j ];

+				

+				for ( k = 0; k < 3; k++ ) {

 

 

-		// Prepare subdivided uv

+					other = oldVertices[ face[ ABC[k] ] ];

+					if (other !== currentEdge.a && other !== currentEdge.b ) break;

 

 

-		avgUv = new THREE.Vector2();

+				}

 

 

-		avgUv.x = getUV(edgeVertexA, faceIndexA).x + getUV(edgeVertexB, faceIndexA).x;

-		avgUv.y = getUV(edgeVertexA, faceIndexA).y + getUV(edgeVertexB, faceIndexA).y;

-		avgUv.x /= 2;

-		avgUv.y /= 2;

+				tmp.add( other );

 

 

-		addUV(edgePoints[i], faceIndexA, avgUv);

+			}

 

 

-		if (edge.length>=2) {

-			assert(edge.length == 2, 'did we plan for more than 2 edges?');

-			avgUv = new THREE.Vector2();

+			tmp.multiplyScalar( adjacentVertexWeight );

+			newEdge.add( tmp );

 

 

-			avgUv.x = getUV(edgeVertexA, faceIndexB).x + getUV(edgeVertexB, faceIndexB).x;

-			avgUv.y = getUV(edgeVertexA, faceIndexB).y + getUV(edgeVertexB, faceIndexB).y;

-			avgUv.x /= 2;

-			avgUv.y /= 2;

+			currentEdge.newEdge = newEdgeVertices.length;

+			newEdgeVertices.push(newEdge);

 

 

-			addUV(edgePoints[i], faceIndexB, avgUv);

+			// console.log(currentEdge, newEdge);

 		}

 		}

 

 

-	}

-

-	debug('-- Step 2 done');

-

-	// Step 3

-	//	For each face point, add an edge for every edge of the face, 

-	//	connecting the face point to each edge point for the face.

-

-	var facePt, currentVerticeIndex;

-

-	var hashAB, hashBC, hashCD, hashDA, hashCA;

-

-	var abc123 = ['123', '12', '2', '23'];

-	var bca123 = ['123', '23', '3', '31'];

-	var cab123 = ['123', '31', '1', '12'];

-	var abc1234 = ['1234', '12', '2', '23'];

-	var bcd1234 = ['1234', '23', '3', '34'];

-	var cda1234 = ['1234', '34', '4', '41'];

-	var dab1234 = ['1234', '41', '1', '12'];

-

-	for (i=0, il = facePoints.length; i<il ;i++) { // for every face

-		facePt = facePoints[i];

-		face = originalFaces[i];

-		currentVerticeIndex = originalVerticesLength+ i;

+		/******************************************************

+		 *

+		 *	Step 2. 

+		 *	Reposition each source vertices.

+		 *

+		 *******************************************************/

 

 

-		if ( face instanceof THREE.Face3 ) {

+		var beta, sourceVertexWeight, connectingVertexWeight;

+		var connectingEdge, connectingEdges, oldVertex, newSourceVertex;

+		newSourceVertices = [];

 

 

-			// create 3 face4s

+		for ( i = 0, il = oldVertices.length; i < il; i++ ) {

 

 

-			hashAB = orderedKey( face.a, face.b );

-			hashBC = orderedKey( face.b, face.c );

-			hashCA = orderedKey( face.c, face.a );

+			oldVertex = oldVertices[ i ];

 

 

-			f4( currentVerticeIndex, edgePoints[hashAB], face.b, edgePoints[hashBC], face, abc123, i );

-			f4( currentVerticeIndex, edgePoints[hashBC], face.c, edgePoints[hashCA], face, bca123, i );

-			f4( currentVerticeIndex, edgePoints[hashCA], face.a, edgePoints[hashAB], face, cab123, i );

+			// find all connecting edges (using lookupTable)

+			connectingEdges = metaVertices[ i ].edges;

+			n = connectingEdges.length;

+			beta;

 

 

-		} else if ( face instanceof THREE.Face4Stub ) {

+			if ( n == 3 ) {

 

 

-			// create 4 face4s

+				beta = 3 / 16;

 

 

-			hashAB = orderedKey( face.a, face.b );

-			hashBC = orderedKey( face.b, face.c );

-			hashCD = orderedKey( face.c, face.d );

-			hashDA = orderedKey( face.d, face.a );

+			} else if ( n > 3 ) {

 

 

-			f4( currentVerticeIndex, edgePoints[hashAB], face.b, edgePoints[hashBC], face, abc1234, i );

-			f4( currentVerticeIndex, edgePoints[hashBC], face.c, edgePoints[hashCD], face, bcd1234, i );

-			f4( currentVerticeIndex, edgePoints[hashCD], face.d, edgePoints[hashDA], face, cda1234, i );

-			f4( currentVerticeIndex, edgePoints[hashDA], face.a, edgePoints[hashAB], face, dab1234, i );

-

-

-		} else {

-

-			debug('face should be a face!', face);

-

-		}

-

-	}

-

-	newVertices = newPoints;

-

-	// Step 4

-

-	//	For each original point P, 

-	//		take the average F of all n face points for faces touching P, 

-	//		and take the average R of all n edge midpoints for edges touching P, 

-	//		where each edge midpoint is the average of its two endpoint vertices. 

-	//	Move each original point to the point

+				beta = 3 / ( 8 * n ); // Warren's modified formula

 

 

+			}

 

 

-	var F = new THREE.Vector3();

-	var R = new THREE.Vector3();

+			// Loop's original beta formula

+			// beta = 1 / n * ( 5/8 - Math.pow( 3/8 + 1/4 * Math.cos( 2 * Math. PI / n ), 2) );

 

 

-	var n;

-	for (i=0, il = originalPoints.length; i<il; i++) {

-		// (F + 2R + (n-3)P) / n

+			sourceVertexWeight = 1 - n * beta;

+			connectingVertexWeight = beta;

 

 

-		if (vertexEdgeMap[i]===undefined) continue;

+			if ( n <= 2 ) {

+				

+				// crease and boundary rules

+				// console.warn('crease and boundary rules');

 

 

-		F.set(0,0,0);

-		R.set(0,0,0);

-		var newPos =  new THREE.Vector3(0,0,0);

+				if ( n == 2 ) {

 

 

-		var f = 0; // this counts number of faces, original vertex is connected to (also known as valance?)

-		for (j in vertexFaceMap[i]) {

-			F.add(facePoints[j]);

-			f++;

-		}

+					if (WARNINGS) console.warn('2 connecting edges', connectingEdges);

+					sourceVertexWeight = 3 / 4;

+					connectingVertexWeight = 1 / 8;

 

 

-		var sharpEdgeCount = 0;

+					// sourceVertexWeight = 1;

+					// connectingVertexWeight = 0;

 

 

-		n = vertexEdgeMap[i].length; // given a vertex, return its connecting edges

+				} else if ( n == 1 ) {

 

 

-		// Are we on the border?

-		var boundary_case = f != n;

+					if (WARNINGS) console.warn('only 1 connecting edge');

 

 

-		// if (boundary_case) {

-		// 	console.error('moo', 'o', i, 'faces touched', f, 'edges',  n, n == 2);

-		// }

+				} else if ( n == 0 ) {

 

 

-		for (j=0;j<n;j++) {

-			if (

-				sharpEdges[

-					orderedKey(vertexEdgeMap[i][j][0],vertexEdgeMap[i][j][1])

-				]) {

-					sharpEdgeCount++;

+					if (WARNINGS) console.warn('0 connecting edges');

+			

 				}

 				}

-		}

-

-		// if ( sharpEdgeCount==2 ) {

-		// 	continue;

-		// 	// Do not move vertex if there's 2 connecting sharp edges.

-		// }

-

-		/*

-		if (sharpEdgeCount>2) {

-			// TODO

-		}

-		*/

+			

+			}

 

 

-		F.divideScalar(f);

+			newSourceVertex = oldVertex.clone().multiplyScalar( sourceVertexWeight );

 

 

+			tmp.set( 0, 0, 0 );

 

 

-		var boundary_edges = 0;

+			for ( j=0; j < n; j++ ) {

 

 

-		if (boundary_case) {

+				connectingEdge = connectingEdges[ j ];

+				other = connectingEdge.a !== oldVertex ? connectingEdge.a : connectingEdge.b;

+				tmp.add( other );

 

 

-			var bb_edge;

-			for (j=0; j<n;j++) {

-				edge = vertexEdgeMap[i][j];

-				bb_edge = edgeFaceMap[orderedKey(edge[0], edge[1])].length == 1

-				if (bb_edge) {

-					var midPt = originalPoints[edge[0]].clone().add(originalPoints[edge[1]]).divideScalar(2);

-					R.add(midPt);

-					boundary_edges++;

-				}

 			}

 			}

 

 

-			R.divideScalar(4);

-			// console.log(j + ' --- ' + n + ' --- ' + boundary_edges);

-			assert(boundary_edges == 2, 'should have only 2 boundary edges');

-

-		} else {

-			for (j=0; j<n;j++) {

-				edge = vertexEdgeMap[i][j];

-				var midPt = originalPoints[edge[0]].clone().add(originalPoints[edge[1]]).divideScalar(2);

-				R.add(midPt);

-			}

+			tmp.multiplyScalar( connectingVertexWeight );

+			newSourceVertex.add( tmp );

+			

+			newSourceVertices.push( newSourceVertex );

 

 

-			R.divideScalar(n);

 		}

 		}

 

 

-		// Sum the formula

-		newPos.add(originalPoints[i]);

+							   

+		/******************************************************

+		 *

+		 *	Step 3. 

+		 *	Generate Faces between source vertecies

+		 *	and edge vertices.

+		 *

+		 *******************************************************/

 

 

+		newVertices = newSourceVertices.concat( newEdgeVertices );

+		var sl = newSourceVertices.length, edge1, edge2, edge3;

+		newFaces = [];

 

 

-		if (boundary_case) {

+		for ( i = 0, il = oldFaces.length; i < il; i++ ) {

 

 

-			newPos.divideScalar(2);

-			newPos.add(R);

+			face = oldFaces[ i ];

 

 

-		} else {

-

-			newPos.multiplyScalar(n - 3);

+			// find the 3 new edges vertex of each old face

 

 

-			newPos.add(F);

-			newPos.add(R.multiplyScalar(2));

-			newPos.divideScalar(n);

+			edge1 = getEdge( face.a, face.b, sourceEdges ).newEdge + sl;

+			edge2 = getEdge( face.b, face.c, sourceEdges ).newEdge + sl;

+			edge3 = getEdge( face.c, face.a, sourceEdges ).newEdge + sl;

 

 

-		}

+			// create 4 faces.

 

 

-		newVertices[i] = newPos;

+			newFace( newFaces, edge1, edge2, edge3 );

+			newFace( newFaces, face.a, edge1, edge3 );

+			newFace( newFaces, face.b, edge2, edge1 );

+			newFace( newFaces, face.c, edge3, edge2 );

 

 

-	}

+		}

 

 

-	var newGeometry = oldGeometry; // Let's pretend the old geometry is now new :P

+		// Overwrite old arrays

+		geometry.vertices = newVertices;

+		geometry.faces = newFaces;

 

 

-	newGeometry.vertices = newVertices;

-	newGeometry.faces = newFaces;

-	newGeometry.faceVertexUvs[ 0 ] = newUVs;

+		// console.log('done');

 

 

-	delete newGeometry.__tmpVertices; // makes __tmpVertices undefined :P

+	};

 

 

-	newGeometry.computeCentroids();

-	newGeometry.computeFaceNormals();

-	newGeometry.computeVertexNormals();

 

 

-};

+})();

+ 6 - 2
examples/js/renderers/SoftwareRenderer.js
View File 

@@ -4,12 +4,16 @@
 
  * @author mraleph / http://mrale.ph/
 
  * @author mraleph / http://mrale.ph/
 
  */
 
  */
 
 
 
-THREE.SoftwareRenderer = function () {
 
+THREE.SoftwareRenderer = function ( parameters ) {
 
 
 
 	console.log( 'THREE.SoftwareRenderer', THREE.REVISION );
 
 	console.log( 'THREE.SoftwareRenderer', THREE.REVISION );
 
 
 
+	parameters = parameters || {};
 
+
 
 	var canvas = document.createElement( 'canvas' );
 
 	var canvas = document.createElement( 'canvas' );
 
-	var context = canvas.getContext( '2d' );
 
+	var context = canvas.getContext( '2d', {
 
+		alpha: parameters.alpha === true
 
+	} );
 
 
 
 	var shaders = {};
 
 	var shaders = {};

+ 1 - 1
examples/webgl_geometry_subdivision.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js webgl - geometry - Subdivisions with Catmull-Clark</title>
 
+		<title>three.js webgl - geometry - Subdivisions using Loop Subdivision Scheme</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>

Some files were not shown because too many files changed in this diff