Merge remote-tracking branch 'upstream/dev' into dev

build/three.js

@@ -7,12 +7,25 @@
 var THREE = { REVISION: '69dev' };
 
 // browserify support
+
 if ( typeof module === 'object' ) {
 
 	module.exports = THREE;
 
 }
 
+// polyfills
+
+if ( Math.sign === undefined ) {
+
+	Math.sign = function ( x ) {
+
+		return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : 0;
+
+	};
+	
+}
+
 // GL STATE CONSTANTS
 
 THREE.CullFaceNone = 0;
@@ -6436,12 +6449,6 @@ THREE.Math = {
 
 	},
 
-	sign: function ( x ) {
-
-		return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : 0;
-
-	},
-
 	degToRad: function () {
 
 		var degreeToRadiansFactor = Math.PI / 180;
@@ -30978,7 +30985,6 @@ THREE.ExtrudeGeometry.prototype.addShape = function ( shape, options ) {
 	function getBevelVec( inPt, inPrev, inNext ) {
 
 		var EPSILON = 0.0000000001;
-		var sign = THREE.Math.sign;
 		
 		// computes for inPt the corresponding point inPt' on a new contour
 		//   shiftet by 1 unit (length of normalized vector) to the left
@@ -31044,7 +31050,7 @@ THREE.ExtrudeGeometry.prototype.addShape = function ( shape, options ) {
 				if ( v_prev_x < - EPSILON ) {
 					if ( v_next_x < - EPSILON ) { direction_eq = true; }
 				} else {
-					if ( sign(v_prev_y) == sign(v_next_y) ) { direction_eq = true; }
+					if ( Math.sign(v_prev_y) == Math.sign(v_next_y) ) { direction_eq = true; }
 				}
 			}
 

editor/css/main.css

@@ -3,7 +3,7 @@
 }
 
 body {
-	font-family: Arial, sans-serif;
+	font-family: Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	margin: 0;
 	overflow: hidden;
@@ -44,27 +44,31 @@ textarea, input { outline: none; } /* osx */
 	user-select: none;
 }
 
-.CollapsiblePanel .CollapsiblePanelButton {
-	float: left;
-	margin-right: 6px;
-	width: 0px;
-	height: 0px;
-	border: 6px solid transparent;
-}
+	.Panel.Collapsible .Static {
+		margin: 0px;
+	}
 
-.CollapsiblePanel.collapsed .CollapsiblePanelButton {
-	margin-top: 2px;
-	border-left-color: #bbb;
-}
+	.Panel.Collapsible .Static .Button {
+		float: left;
+		margin-right: 6px;
+		width: 0px;
+		height: 0px;
+		border: 6px solid transparent;
+	}
 
-.CollapsiblePanel:not(.collapsed) .CollapsiblePanelButton {
-	margin-top: 6px;
-	border-top-color: #bbb;
-}
+	.Panel.Collapsible.collapsed .Static .Button {
+		margin-top: 2px;
+		border-left-color: #bbb;
+	}
 
-.CollapsiblePanel.collapsed .CollapsibleContent {
-	display: none;
-}
+	.Panel.Collapsible:not(.collapsed) .Static .Button {
+		margin-top: 6px;
+		border-top-color: #bbb;
+	}
+
+	.Panel.Collapsible.collapsed .Content {
+		display: none;
+	}
 
 /* scene types */
 

editor/index.html

@@ -82,12 +82,19 @@
 		<script src="js/Sidebar.Script.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
+		<script src="js/Viewport.Info.js"></script>
 
 		<script>
 
 			window.URL = window.URL || window.webkitURL;
 			window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;
 
+			Number.prototype.format = function (){
+				return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
+			};
+
+			//
+
 			var editor = new Editor();
 
 			var viewport = new Viewport( editor ).setId( 'viewport' );
@@ -153,6 +160,7 @@
 
 				var signals = editor.signals;
 
+				signals.geometryChanged.add( saveState );
 				signals.objectAdded.add( saveState );
 				signals.objectChanged.add( saveState );
 				signals.objectRemoved.add( saveState );

editor/js/Editor.js

@@ -29,6 +29,8 @@ var Editor = function () {
 
 		cameraChanged: new SIGNALS.Signal(),
 
+		geometryChanged: new SIGNALS.Signal(),
+
 		objectSelected: new SIGNALS.Signal(),
 		objectAdded: new SIGNALS.Signal(),
 		objectChanged: new SIGNALS.Signal(),

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -82,7 +82,7 @@ Sidebar.Geometry.BoxGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -34,15 +34,15 @@ Sidebar.Geometry.BufferGeometry = function ( signals ) {
 
 			container.setDisplay( 'block' );
 
-			vertices.setValue( geometry.attributes.position.array.length / 3 );
+			vertices.setValue( ( geometry.attributes.position.array.length / 3 ).format() );
 
 			if ( geometry.attributes.index !== undefined ) {
 
-				faces.setValue( geometry.attributes.index.array.length / 3 );
+				faces.setValue( ( geometry.attributes.index.array.length / 3 ).format() );
 
 			} else {
 
-				faces.setValue( geometry.attributes.position.array.length / 9 );
+				faces.setValue( ( geometry.attributes.position.array.length / 9 ).format() );
 
 			}
 
@@ -55,7 +55,7 @@ Sidebar.Geometry.BufferGeometry = function ( signals ) {
 	};
 
 	signals.objectSelected.add( update );
-	signals.objectChanged.add( update );
+	signals.geometryChanged.add( update );
 
 	return container;
 

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -37,7 +37,7 @@ Sidebar.Geometry.CircleGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -82,7 +82,7 @@ Sidebar.Geometry.CylinderGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.Geometry.js

@@ -34,8 +34,8 @@ Sidebar.Geometry.Geometry = function ( signals ) {
 
 			container.setDisplay( 'block' );
 
-			vertices.setValue( geometry.vertices.length );
-			faces.setValue( geometry.faces.length );
+			vertices.setValue( ( geometry.vertices.length ).format() );
+			faces.setValue( ( geometry.faces.length ).format() );
 
 		} else {
 
@@ -46,7 +46,7 @@ Sidebar.Geometry.Geometry = function ( signals ) {
 	};
 
 	signals.objectSelected.add( update );
-	signals.objectChanged.add( update );
+	signals.geometryChanged.add( update );
 
 	return container;
 

editor/js/Sidebar.Geometry.Modifiers.js

@@ -21,7 +21,7 @@ Sidebar.Geometry.Modifiers = function ( signals, object ) {
 
 		}
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	} );
 
@@ -40,7 +40,7 @@ Sidebar.Geometry.Modifiers = function ( signals, object ) {
 
 			object.geometry = new THREE.Geometry().fromBufferGeometry( object.geometry );
 
-			signals.objectChanged.dispatch( object );
+			signals.geometryChanged.dispatch( object );
 
 		} );
 		container.add( button );
@@ -54,7 +54,7 @@ Sidebar.Geometry.Modifiers = function ( signals, object ) {
 
 			object.geometry = new THREE.BufferGeometry().fromGeometry( object.geometry );
 
-			signals.objectChanged.dispatch( object );
+			signals.geometryChanged.dispatch( object );
 
 		} );
 		container.add( button );

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -61,7 +61,7 @@ Sidebar.Geometry.PlaneGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -94,7 +94,7 @@ Sidebar.Geometry.SphereGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -72,7 +72,7 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -94,7 +94,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( signals, object ) {
 		object.geometry.buffersNeedUpdate = true;
 		object.geometry.computeBoundingSphere();
 
-		signals.objectChanged.dispatch( object );
+		signals.geometryChanged.dispatch( object );
 
 	}
 

editor/js/Sidebar.Geometry.js

@@ -142,7 +142,6 @@ Sidebar.Geometry = function ( editor ) {
 	}
 
 	signals.objectSelected.add( build );
-	signals.objectChanged.add( build );
 
 	return container;
 

editor/js/Viewport.Info.js

@@ -0,0 +1,79 @@
+Viewport.Info = function ( editor ) {
+
+	var signals = editor.signals;
+
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
+	container.setLeft( '10px' );
+	container.setBottom( '10px' );
+	container.setFontSize( '12px' );
+	container.setColor( '#fff' );
+
+	var objectsText = new UI.Text( '0' ).setMarginLeft( '6px' );
+	var verticesText = new UI.Text( '0' ).setMarginLeft( '6px' );
+	var trianglesText = new UI.Text( '0' ).setMarginLeft( '6px' );
+
+	container.add( new UI.Text( 'objects' ), objectsText, new UI.Break() );
+	container.add( new UI.Text( 'vertices' ), verticesText, new UI.Break() );
+	container.add( new UI.Text( 'triangles' ), trianglesText, new UI.Break() );
+
+	signals.objectAdded.add( update );
+	signals.objectRemoved.add( update );
+	signals.geometryChanged.add( update );
+
+	//
+
+	function update() {
+
+		var scene = editor.scene;
+
+		var objects = 0, vertices = 0, triangles = 0;
+
+		for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
+
+			var object = scene.children[ i ];
+
+			object.traverseVisible( function ( object ) {
+
+				objects ++;
+
+				if ( object instanceof THREE.Mesh ) {
+
+					var geometry = object.geometry;
+
+					if ( geometry instanceof THREE.Geometry ) {
+
+						vertices += geometry.vertices.length;
+						triangles += geometry.faces.length;
+
+					} else if ( geometry instanceof THREE.BufferGeometry ) {
+
+						vertices += geometry.attributes.position.array.length / 3;
+
+						if ( geometry.attributes.index !== undefined ) {
+
+							triangles += geometry.attributes.index.array.length / 3;
+
+						} else {
+
+							triangles += geometry.attributes.position.array.length / 9;
+
+						}
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		objectsText.setValue( objects.format() );
+		verticesText.setValue( vertices.format() );
+		trianglesText.setValue( triangles.format() );
+
+	}
+
+	return container;
+
+}

editor/js/Viewport.js

@@ -5,14 +5,7 @@ var Viewport = function ( editor ) {
 	var container = new UI.Panel();
 	container.setPosition( 'absolute' );
 
-	var info = new UI.Text();
-	info.setPosition( 'absolute' );
-	info.setRight( '5px' );
-	info.setBottom( '5px' );
-	info.setFontSize( '12px' );
-	info.setColor( '#ffffff' );
-	info.setValue( 'objects: 0, vertices: 0, faces: 0' );
-	container.add( info );
+	container.add( new Viewport.Info( editor ) );
 
 	var scene = editor.scene;
 	var sceneHelpers = editor.sceneHelpers;
@@ -239,7 +232,6 @@ var Viewport = function ( editor ) {
 	signals.sceneGraphChanged.add( function () {
 
 		render();
-		updateInfo();
 
 	} );
 
@@ -291,6 +283,8 @@ var Viewport = function ( editor ) {
 
 	} );
 
+	signals.geometryChanged.add( render );
+
 	signals.objectAdded.add( function ( object ) {
 
 		var materialsNeedUpdate = false;
@@ -325,8 +319,6 @@ var Viewport = function ( editor ) {
 
 			}
 
-			updateInfo();
-
 		}
 
 		render();
@@ -485,49 +477,6 @@ var Viewport = function ( editor ) {
 
 	//
 
-	function updateInfo() {
-
-		var objects = 0;
-		var vertices = 0;
-		var faces = 0;
-
-		scene.traverse( function ( object ) {
-
-			if ( object instanceof THREE.Mesh ) {
-
-				objects ++;
-
-				var geometry = object.geometry;
-
-				if ( geometry instanceof THREE.Geometry ) {
-
-					vertices += geometry.vertices.length;
-					faces += geometry.faces.length;
-
-				} else if ( geometry instanceof THREE.BufferGeometry ) {
-
-					vertices += geometry.attributes.position.array.length / 3;
-
-					if ( geometry.attributes.index !== undefined ) {
-
-						faces += geometry.attributes.index.array.length / 3;
-
-					} else {
-
-						faces += geometry.attributes.position.array.length / 9;
-
-					}
-
-				}
-
-			}
-
-		} );
-
-		info.setValue( 'objects: ' + objects + ', vertices: ' + vertices + ', faces: ' + faces );
-
-	}
-
 	function updateMaterials() {
 
 		editor.scene.traverse( function ( node ) {

editor/js/libs/ui.js

@@ -164,22 +164,24 @@ UI.CollapsiblePanel = function () {
 
 	UI.Panel.call( this );
 
-	this.dom.className = 'Panel CollapsiblePanel';
-
-	this.button = document.createElement( 'div' );
-	this.button.className = 'CollapsiblePanelButton';
-	this.dom.appendChild( this.button );
+	this.setClass( 'Panel Collapsible' );
 
 	var scope = this;
-	this.button.addEventListener( 'click', function ( event ) {
 
+	this.static = new UI.Panel();
+	this.static.setClass( 'Static' );
+	this.static.onClick( function () {
 		scope.toggle();
+	} );
+	this.dom.appendChild( this.static.dom );
 
-	}, false );
+	this.contents = new UI.Panel();
+	this.contents.setClass( 'Content' );
+	this.dom.appendChild( this.contents.dom );
 
-	this.content = document.createElement( 'div' );
-	this.content.className = 'CollapsibleContent';
-	this.dom.appendChild( this.content );
+	var button = new UI.Panel();
+	button.setClass( 'Button' );
+	this.static.add( button );
 
 	this.isCollapsed = false;
 
@@ -191,63 +193,43 @@ UI.CollapsiblePanel.prototype = Object.create( UI.Panel.prototype );
 
 UI.CollapsiblePanel.prototype.addStatic = function () {
 
-	for ( var i = 0; i < arguments.length; i ++ ) {
+	this.static.add.apply( this.static, arguments );
+	return this;
 
-		this.dom.insertBefore( arguments[ i ].dom, this.content );
+};
 
-	}
+UI.CollapsiblePanel.prototype.removeStatic = function () {
 
+	this.static.remove.apply( this.static, arguments );
 	return this;
 
 };
 
-UI.CollapsiblePanel.prototype.removeStatic = UI.Panel.prototype.remove;
-
 UI.CollapsiblePanel.prototype.clearStatic = function () {
 
-	this.dom.childNodes.forEach( function ( child ) {
-
-		if ( child !== this.content ) {
-
-			this.dom.removeChild( child );
-
-		}
-
-	});
+	this.static.clear();
+	return this;
 
 };
 
 UI.CollapsiblePanel.prototype.add = function () {
 
-	for ( var i = 0; i < arguments.length; i ++ ) {
-
-		this.content.appendChild( arguments[ i ].dom );
-
-	}
-
+	this.contents.add.apply( this.contents, arguments );
 	return this;
 
 };
 
 UI.CollapsiblePanel.prototype.remove = function () {
 
-	for ( var i = 0; i < arguments.length; i ++ ) {
-
-		this.content.removeChild( arguments[ i ].dom );
-
-	}
-
+	this.contents.remove.apply( this.contents, arguments );
 	return this;
 
 };
 
 UI.CollapsiblePanel.prototype.clear = function () {
 
-	while ( this.content.children.length ) {
-
-		this.content.removeChild( this.content.lastChild );
-
-	}
+	this.contents.clear();
+	return this;
 
 };
 

examples/js/Mirror.js

@@ -171,8 +171,6 @@ THREE.Mirror.prototype.renderWithMirror = function ( otherMirror ) {
 
 THREE.Mirror.prototype.updateTextureMatrix = function () {
 
-	var sign = THREE.Math.sign;
-
 	this.updateMatrixWorld();
 	this.camera.updateMatrixWorld();
 
@@ -228,8 +226,8 @@ THREE.Mirror.prototype.updateTextureMatrix = function () {
 	var q = new THREE.Vector4();
 	var projectionMatrix = this.mirrorCamera.projectionMatrix;
 
-	q.x = ( sign(this.clipPlane.x) + projectionMatrix.elements[8] ) / projectionMatrix.elements[0];
-	q.y = ( sign(this.clipPlane.y) + projectionMatrix.elements[9] ) / projectionMatrix.elements[5];
+	q.x = ( Math.sign(this.clipPlane.x) + projectionMatrix.elements[8] ) / projectionMatrix.elements[0];
+	q.y = ( Math.sign(this.clipPlane.y) + projectionMatrix.elements[9] ) / projectionMatrix.elements[5];
 	q.z = - 1.0;
 	q.w = ( 1.0 + projectionMatrix.elements[10] ) / projectionMatrix.elements[14];
 

examples/js/renderers/SVGRenderer.js

@@ -38,6 +38,8 @@ THREE.SVGRenderer = function () {
 	_w, // z-buffer to w-buffer
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 	_centroid = new THREE.Vector3(),
+	_normal = new THREE.Vector3(),
+	_normalViewMatrix = new THREE.Matrix3(),
 
 	_viewMatrix = new THREE.Matrix4(),
 	_viewProjectionMatrix = new THREE.Matrix4(),
@@ -137,6 +139,8 @@ THREE.SVGRenderer = function () {
 		_elements = _renderData.elements;
 		_lights = _renderData.lights;
 
+		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
+
 		calculateLights( _lights );
 
 		for ( var e = 0, el = _elements.length; e < el; e ++ ) {
@@ -383,9 +387,9 @@ THREE.SVGRenderer = function () {
 
 		} else if ( material instanceof THREE.MeshNormalMaterial ) {
 
-			var normal = element.normalModelView;
+			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
 
-			_color.setRGB( normal.x, normal.y, normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
+			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
 
 		}
 

src/Three.js

@@ -5,12 +5,25 @@
 var THREE = { REVISION: '69dev' };
 
 // browserify support
+
 if ( typeof module === 'object' ) {
 
 	module.exports = THREE;
 
 }
 
+// polyfills
+
+if ( Math.sign === undefined ) {
+
+	Math.sign = function ( x ) {
+
+		return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : 0;
+
+	};
+	
+}
+
 // GL STATE CONSTANTS
 
 THREE.CullFaceNone = 0;

src/extras/geometries/ExtrudeGeometry.js

@@ -193,7 +193,6 @@ THREE.ExtrudeGeometry.prototype.addShape = function ( shape, options ) {
 	function getBevelVec( inPt, inPrev, inNext ) {
 
 		var EPSILON = 0.0000000001;
-		var sign = THREE.Math.sign;
 		
 		// computes for inPt the corresponding point inPt' on a new contour
 		//   shiftet by 1 unit (length of normalized vector) to the left
@@ -259,7 +258,7 @@ THREE.ExtrudeGeometry.prototype.addShape = function ( shape, options ) {
 				if ( v_prev_x < - EPSILON ) {
 					if ( v_next_x < - EPSILON ) { direction_eq = true; }
 				} else {
-					if ( sign(v_prev_y) == sign(v_next_y) ) { direction_eq = true; }
+					if ( Math.sign(v_prev_y) == Math.sign(v_next_y) ) { direction_eq = true; }
 				}
 			}
 

src/math/Math.js

@@ -122,12 +122,6 @@ THREE.Math = {
 
 	},
 
-	sign: function ( x ) {
-
-		return ( x < 0 ) ? - 1 : ( x > 0 ) ? 1 : 0;
-
-	},
-
 	degToRad: function () {
 
 		var degreeToRadiansFactor = Math.PI / 180;