Merge branch 'dev' into GLTF2Morph

docs/api/core/BufferAttribute.html

@@ -78,6 +78,10 @@
 		<h3>[property:Integer itemSize]</h3>
 		<div>The length of vectors that are being stored in the [page:BufferAttribute.array array].</div>
 
+		<h3>[property:String name]</h3>
+		<div>
+		Optional name for this attribute instance. Default is an empty string.
+		</div>
 
 		<h3>[property:Boolean needsUpdate]</h3>
 		<div>

examples/canvas_camera_orthographic.html

@@ -52,24 +52,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				// Cubes
 

examples/canvas_camera_orthographic2.html

@@ -121,24 +121,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				// Cubes
 

examples/canvas_interactive_voxelpainter.html

@@ -57,24 +57,8 @@
 
 				// Grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				//
 

examples/canvas_materials.html

@@ -44,24 +44,9 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, - 120, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, - 120, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, - 120, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, - 120,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				gridHelper.position.y = - 120;
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/canvas_performance.html

@@ -47,24 +47,8 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/canvas_sandbox.html

@@ -69,24 +69,8 @@
 
 				// Grid
 
-				var size = 500, step = 100;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 10 );
+				scene.add( gridHelper );
 
 				// Spheres
 

examples/js/loaders/BinaryLoader.js

@@ -250,7 +250,7 @@ THREE.BinaryLoader.prototype = {
 
 				for ( var i = 0; i < length; i ++ ) {
 
-					text += String.fromCharCode( charArray[ offset + i ] );
+					text += String.fromCharCode( charArray[ i ] );
 
 				}
 

examples/js/loaders/FBXLoader.js

@@ -510,11 +510,19 @@
 					parameters.map = textureMap.get( relationship.ID );
 					break;
 
-				case " \"AmbientColor":
+				case "Bump":
 				case " \"Bump":
+					parameters.bumpMap = textureMap.get( relationship.ID );
+					break;
+
+				case "NormalMap":
+				case " \"NormalMap":
+					parameters.normalMap = textureMap.get( relationship.ID );
+					break;
+
+				case " \"AmbientColor":
 				case " \"EmissiveColor":
 				case "AmbientColor":
-				case "Bump":
 				case "EmissiveColor":
 				default:
 					console.warn( 'Unknown texture application of type ' + type + ', skipping texture' );
@@ -1362,7 +1370,7 @@
 						}
 						if ( materials.length > 1 ) {
 
-							material = new THREE.MultiMaterial( materials );
+							material = materials;
 
 						} else if ( materials.length > 0 ) {
 
@@ -4952,6 +4960,12 @@
 
 		var array = new Uint8Array( buffer, from, to );
 
+		if ( window.TextDecoder !== undefined ) {
+
+			return new TextDecoder().decode( array );
+
+		}
+
 		var s = '';
 
 		for ( var i = 0, il = array.length; i < il; i ++ ) {

examples/js/loaders/GLTF2Loader.js

@@ -82,6 +82,12 @@ THREE.GLTF2Loader = ( function () {
 
 				}
 
+				if ( json.extensionsUsed.indexOf( EXTENSIONS.KHR_TECHNIQUE_WEBGL ) >= 0 ) {
+
+					extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] = new GLTFTechniqueWebglExtension( json );
+
+				}
+
 			}
 
 			console.time( 'GLTF2Loader' );
@@ -273,6 +279,7 @@ THREE.GLTF2Loader = ( function () {
 
 	var EXTENSIONS = {
 		KHR_BINARY_GLTF: 'KHR_binary_glTF',
+		KHR_TECHNIQUE_WEBGL: 'KHR_technique_webgl',
 		KHR_MATERIALS_COMMON: 'KHR_materials_common',
 		KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS: 'KHR_materials_pbrSpecularGlossiness'
 	};
@@ -396,6 +403,20 @@ THREE.GLTF2Loader = ( function () {
 
 	}
 
+	/* Technique WebGL Extension */
+
+	function GLTFTechniqueWebglExtension( json ) {
+
+		this.name = EXTENSIONS.KHR_TECHNIQUE_WEBGL;
+
+		var extension = ( json.extensions && json.extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] ) || {};
+
+		this.techniques = extension.techniques || {};
+		this.programs = extension.programs || {};
+		this.shaders = extension.shaders || {};
+
+	}
+
 	/* Specular-Glossiness Extension */
 
 	function GLTFMaterialsPbrSpecularGlossinessExtension() {
@@ -958,13 +979,20 @@ THREE.GLTF2Loader = ( function () {
 
 	}
 
-	// Avoid the String.fromCharCode.apply(null, array) shortcut, which
-	// throws a "maximum call stack size exceeded" error for large arrays.
 	function convertUint8ArrayToString( array ) {
 
+		if ( window.TextDecoder !== undefined ) {
+
+			return new TextDecoder().decode( array );
+
+		}
+
+		// Avoid the String.fromCharCode.apply(null, array) shortcut, which
+		// throws a "maximum call stack size exceeded" error for large arrays.
+
 		var s = '';
 
-		for ( var i = 0; i < array.length; i ++ ) {
+		for ( var i = 0, il = array.length; i < il; i ++ ) {
 
 			s += String.fromCharCode( array[ i ] );
 
@@ -1222,6 +1250,7 @@ THREE.GLTF2Loader = ( function () {
 
 		var json = this.json;
 		var options = this.options;
+		var extensions = this.extensions;
 
 		return this._withDependencies( [
 
@@ -1229,7 +1258,11 @@ THREE.GLTF2Loader = ( function () {
 
 		] ).then( function ( dependencies ) {
 
-			return _each( json.shaders, function ( shader ) {
+			var shaders = extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ] !== undefined ? extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ].shaders : json.shaders;
+
+			if ( shaders === undefined ) shaders = {};
+
+			return _each( shaders, function ( shader ) {
 
 				if ( shader.bufferView !== undefined ) {
 
@@ -1643,11 +1676,22 @@ THREE.GLTF2Loader = ( function () {
 
 					materialType = DeferredShaderMaterial;
 
-					var technique = json.techniques[ material.technique ];
+					// I've left the existing json.techniques code as is so far though
+					// techniques is moved to extension in glTF 2.0 because
+					// it seems there still be many models which have techniques under json.
+					// I'm gonna move the techniques code into GLTFTechniqueWebglExtension
+					// when glTF 2.0 release is officially announced.
+
+					var extension = extensions[ EXTENSIONS.KHR_TECHNIQUE_WEBGL ];
+
+					var techniques = extension !== undefined ? extension.techniques : json.techniques;
+					var programs = extension !== undefined ? extension.programs : json.programs;
+
+					var technique = techniques[ material.technique ];
 
 					materialParams.uniforms = {};
 
-					var program = json.programs[ technique.program ];
+					var program = programs[ technique.program ];
 
 					if ( program ) {
 
@@ -2360,7 +2404,7 @@ THREE.GLTF2Loader = ( function () {
 					if ( sampler ) {
 
 						var target = channel.target;
-						var name = target.node || target.id; // NOTE: target.id is deprecated.
+						var name = target.node !== undefined ? target.node : target.id; // NOTE: target.id is deprecated.
 						var input = animation.parameters !== undefined ? animation.parameters[ sampler.input ] : sampler.input;
 						var output = animation.parameters !== undefined ? animation.parameters[ sampler.output ] : sampler.output;
 

examples/js/loaders/GLTFLoader.js

@@ -662,13 +662,20 @@ THREE.GLTFLoader = ( function () {
 
 	}
 
-	// Avoid the String.fromCharCode.apply(null, array) shortcut, which
-	// throws a "maximum call stack size exceeded" error for large arrays.
 	function convertUint8ArrayToString( array ) {
 
+		if ( window.TextDecoder !== undefined ) {
+
+			//return new TextDecoder().decode( array );
+
+		}
+
+		// Avoid the String.fromCharCode.apply(null, array) shortcut, which
+		// throws a "maximum call stack size exceeded" error for large arrays.
+
 		var s = '';
 
-		for ( var i = 0; i < array.length; i ++ ) {
+		for ( var i = 0, il = array.length; i < il; i ++ ) {
 
 			s += String.fromCharCode( array[ i ] );
 

examples/js/loaders/MMDLoader.js

@@ -786,6 +786,7 @@ THREE.MMDLoader.prototype.createMesh = function ( model, texturePath, onProgress
 			var params = { name: m.name };
 
 			var attribute = new THREE.Float32BufferAttribute( model.metadata.vertexCount * 3, 3 );
+			attribute.name = m.name;
 
 			for ( var j = 0; j < model.metadata.vertexCount * 3; j++ ) {
 

examples/js/loaders/PCDLoader.js

@@ -35,9 +35,16 @@ THREE.PCDLoader.prototype = {
 
 	binarryToStr: function ( data ) {
 
-		var text = "";
 		var charArray = new Uint8Array( data );
-		for ( var i = 0; i < data.byteLength; i ++ ) {
+
+		if ( window.TextDecoder !== undefined ) {
+
+			return new TextDecoder().decode( charArray );
+
+		}
+
+		var text = "";
+		for ( var i = 0, il = data.byteLength; i < il; i ++ ) {
 
 			text += String.fromCharCode( charArray[ i ] );
 

examples/js/loaders/PLYLoader.js

@@ -61,19 +61,19 @@ THREE.PLYLoader.prototype = {
 
 	parse: function ( data ) {
 
-		function isASCII( data ) {
+		function bin2str( buf ) {
 
-			var header = parseHeader( bin2str( data ) );
-			return header.format === 'ascii';
+			var array_buffer = new Uint8Array( buf );
 
-		}
+			if ( window.TextDecoder !== undefined ) {
 
-		function bin2str( buf ) {
+				return new TextDecoder().decode( array_buffer );
+
+			}
 
-			var array_buffer = new Uint8Array( buf );
 			var str = '';
 
-			for ( var i = 0; i < buf.byteLength; i ++ ) {
+			for ( var i = 0, il = buf.byteLength; i < il; i ++ ) {
 
 				str += String.fromCharCode( array_buffer[ i ] ); // implicitly assumes little-endian
 
@@ -249,7 +249,7 @@ THREE.PLYLoader.prototype = {
 
 		}
 
-		function parseASCII( data ) {
+		function parseASCII( data, header ) {
 
 			// PLY ascii format specification, as per http://en.wikipedia.org/wiki/PLY_(file_format)
 
@@ -263,8 +263,6 @@ THREE.PLYLoader.prototype = {
 
 			var result;
 
-			var header = parseHeader( data );
-
 			var patternBody = /end_header\s([\s\S]*)$/;
 			var body = '';
 			if ( ( result = patternBody.exec( data ) ) !== null ) {
@@ -446,7 +444,7 @@ THREE.PLYLoader.prototype = {
 
 		}
 
-		function parseBinary( data ) {
+		function parseBinary( data, header ) {
 
 			var buffer = {
 				indices : [],
@@ -456,7 +454,6 @@ THREE.PLYLoader.prototype = {
 				colors : []
 			};
 
-			var header = parseHeader( bin2str( data ) );
 			var little_endian = ( header.format === 'binary_little_endian' );
 			var body = new DataView( data, header.headerLength );
 			var result, loc = 0;
@@ -486,11 +483,14 @@ THREE.PLYLoader.prototype = {
 
 		if ( data instanceof ArrayBuffer ) {
 
-			geometry = isASCII( data ) ? parseASCII( bin2str( data ) ) : parseBinary( data );
+			var text = bin2str( data );
+			var header = parseHeader( text );
+
+			geometry = header.format === 'ascii' ? parseASCII( text, header ) : parseBinary( data, header );
 
 		} else {
 
-			geometry = parseASCII( data );
+			geometry = parseASCII( data, parseHeader( data ) );
 
 		}
 

examples/js/loaders/STLLoader.js

@@ -245,13 +245,22 @@ THREE.STLLoader.prototype = {
 		if ( typeof buf !== "string" ) {
 
 			var array_buffer = new Uint8Array( buf );
-			var strArray = [];
-			for ( var i = 0; i < buf.byteLength; i ++ ) {
 
-				strArray.push(String.fromCharCode( array_buffer[ i ] )); // implicitly assumes little-endian
+			if ( window.TextDecoder !== undefined ) {
+
+				return new TextDecoder().decode( array_buffer );
 
 			}
-			return strArray.join('');
+
+			var str = '';
+
+			for ( var i = 0, il = buf.byteLength; i < il; i ++ ) {
+
+				str += String.fromCharCode( array_buffer[ i ] ); // implicitly assumes little-endian
+
+			}
+
+			return str;
 
 		} else {
 

examples/js/loaders/XLoader.js

@@ -362,8 +362,15 @@ THREE.XLoader = function () {
 		if ( typeof buf !== "string" ) {
 
 			var array_buffer = new Uint8Array( buf );
+
+			if ( window.TextDecoder !== undefined ) {
+
+				return new TextDecoder().decode( array_buffer );
+
+			}
+
 			var str = '';
-			for ( var i = 0; i < buf.byteLength; i ++ ) {
+			for ( var i = 0, il = buf.byteLength; i < il; i ++ ) {
 
 				str += String.fromCharCode( array_buffer[ i ] );
 

examples/js/loaders/sea3d/SEA3DLoader.js

@@ -2876,6 +2876,7 @@ THREE.SEA3D.prototype.readMorpher = function ( sea ) {
 		var node = sea.node[ i ];
 
 		attribs.position[ i ] = new THREE.Float32BufferAttribute( node.vertex, 3 );
+		attribs.position[ i ].name = node.name;
 
 		if ( node.normal ) {
 

examples/webgl_geometry_normals.html

 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - geometry - Subdivisions with Catmull-Clark</title>
+		<title>three.js webgl - geometry - normals</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
@@ -11,304 +11,149 @@
 				margin: 0px;
 				overflow: hidden;
 			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				padding: 5px;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+				color: #ffffff;
+			}
+
+			a {
+				color: #ffffff;
+			}
 		</style>
 	</head>
 	<body>
 
+		<div id="container"></div>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank">three.js</a> - geometry - normals</a>
+			<p>
+				<span>Yellow Arrows: Face Normals</span><br>
+				<span>Red Arrows: Vertex Normals</span>
+			</p>
+		</div>
+
 		<script src="../build/three.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
+		<script src="./js/libs/dat.gui.min.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
 
-			var container, stats;
-
+			var container, stats, gui;
 			var camera, controls, scene, renderer;
+			var mesh, geometry;
 
-			var cube, plane;
-
-			// Create new object by parameters
-
-			var createSomething = function( klass, args ) {
-
-				var F = function( klass, args ) {
-
-					return klass.apply( this, args );
-
-				};
-
-				F.prototype = klass.prototype;
-
-				return new F( klass, args );
-
-			};
-
-
-			// Cube
-
-			var materials = [];
-
-			for ( var i = 0; i < 6; i ++ ) {
-
-				materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } ) ] );
-
-			}
+			var geometries = [
 
-			var geometriesParams = [
-
-				{ type: 'BoxGeometry', args: [ 200, 200, 200, 2, 2, 2, materials ] },
-				{ type: 'TorusGeometry', args: [ 100, 60, 12, 12 ] },
-				{ type: 'TorusKnotGeometry', args: [  ] },
-				{ type: 'SphereGeometry', args: [ 100, 12, 12 ] },
-				{ type: 'SphereGeometry', args: [ 100, 5, 5 ] },
-				{ type: 'SphereGeometry', args: [ 100, 13, 13 ] },
-				{ type: 'IcosahedronGeometry', args: [ 100, 1 ] },
-				{ type: 'CylinderGeometry', args: [ 25, 75, 200, 8, 3 ]} ,
-				{ type: 'OctahedronGeometry', args: [200, 0] },
-				{ type: 'LatheGeometry', args: [ [
-					new THREE.Vector2(0,-100),
-					new THREE.Vector2(50,-50),
-					new THREE.Vector2(10,0),
-					new THREE.Vector2(50,050),
-					new THREE.Vector2(0,100) ] ]},
-				{ type: 'LatheGeometry', args: [ [
-					new THREE.Vector2(0,-100),
-					new THREE.Vector2(50,-50),
-					new THREE.Vector2(10,0),
-					new THREE.Vector2(50,050),
-					new THREE.Vector2(100,100) ], 12, 0, Math.PI ] },
-				{ type: 'LatheGeometry', args: [ [
-					new THREE.Vector2(10,-100),
-					new THREE.Vector2(50,-50),
-					new THREE.Vector2(10,0),
-					new THREE.Vector2(50,050),
-					new THREE.Vector2(0,100) ], 12, Math.PI*2/3, Math.PI*3/2 ] },
-				{ type: 'TextGeometry', args: ['&', {
-						size: 200,
-						height: 50,
-						curveSegments: 1
-					}]},
-				{ type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] }
+				{ type: 'BoxGeometry', geometry: new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ) },
+				{ type: 'CircleGeometry', geometry: new THREE.CircleGeometry( 200, 32 ) },
+				{ type: 'CylinderGeometry', geometry: new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ) } ,
+				{ type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronGeometry( 100, 1 ) },
+				{ type: 'OctahedronGeometry', geometry: new THREE.OctahedronGeometry( 200, 0 ) },
+				{ type: 'PlaneGeometry', geometry: new THREE.PlaneGeometry( 200, 200, 4, 4 ) },
+				{ type: 'RingGeometry', geometry: new THREE.RingGeometry( 32, 64, 16 ) },
+				{ type: 'SphereGeometry', geometry: new THREE.SphereGeometry( 100, 12, 12 ) },
+				{ type: 'TorusGeometry', geometry: new THREE.TorusGeometry( 64, 16, 12, 12 ) },
+				{ type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotGeometry( 64, 16 ) }
 
 			];
 
-			var loader = new THREE.FontLoader();
-			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
-
-				geometriesParams[ 12 ].args[ 1 ].font = font;
-
-			} );
-
-			var info;
-			var geometryIndex = 0;
+			var options = {
+				Geometry: 0
+			};
 
-			// start scene
+			var material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
 
 			init();
 			animate();
 
-			function nextGeometry() {
-
-				geometryIndex ++;
-
-				if ( geometryIndex > geometriesParams.length - 1 ) {
-
-					geometryIndex = 0;
-
-				}
-
-				addStuff();
-
-			}
-
-			function switchGeometry(i) {
-
-				geometryIndex = i;
-
-				addStuff();
-			}
-
-			function updateInfo() {
-
-				var params = geometriesParams[ geometryIndex ];
-
-				var dropdown = '<select id="dropdown" onchange="switchGeometry(this.value)">';
-
-				for (  i = 0; i < geometriesParams.length; i ++ ) {
-					dropdown += '<option value="' + i + '"';
-
-					dropdown += (geometryIndex == i)  ? ' selected' : '';
-
-					dropdown += '>' + geometriesParams[i].type + '</option>';
-				}
-
-				dropdown += '</select>';
+			function addMesh() {
 
-				var text =
-					'Drag to spin THREE.' + params.type +
-				 	'<br>' +
-					'<br>Geometry: ' + dropdown + ' <a href="#" onclick="nextGeometry();return false;">next</a>';
+				if ( mesh !== undefined ) {
 
-				text +=
-					'<br><br><font color="3333FF">Blue Arrows: Face Normals</font>' +
-					'<br><font color="FF3333">Red Arrows: Vertex Normals before Geometry.mergeVertices</font>' +
-					'<br>Black Arrows: Vertex Normals after Geometry.mergeVertices';
-
-				info.innerHTML = text;
-
-			}
-
-			function addStuff() {
-
-				if ( window.group !== undefined ) {
-
-					scene.remove( group );
+					scene.remove( mesh );
+					geometry.dispose();
 
 				}
 
-
-
-				var params = geometriesParams[ geometryIndex ];
-
-				geometry = createSomething( THREE[ params.type ], params.args );
+				geometry = geometries[ options.Geometry ].geometry;
 
 				// scale geometry to a uniform size
+
 				geometry.computeBoundingSphere();
 
 				var scaleFactor = 160 / geometry.boundingSphere.radius;
 				geometry.scale( scaleFactor, scaleFactor, scaleFactor );
 
-				var originalGeometry = geometry.clone();
-				originalGeometry.computeFaceNormals();
-				originalGeometry.computeVertexNormals( true );
-
-				// in case of duplicated vertices
-				geometry.mergeVertices();
-				geometry.computeFaceNormals();
-				geometry.computeVertexNormals( true );
-
-				updateInfo();
-
-				var faceABCD = "abcd";
-				var color, f, p, n, vertexIndex;
-
-				for ( i = 0; i < geometry.faces.length; i ++ ) {
-
-					f  = geometry.faces[ i ];
-
-					n = ( f instanceof THREE.Face3 ) ? 3 : 4;
-
-					for( var j = 0; j < n; j++ ) {
-
-						vertexIndex = f[ faceABCD.charAt( j ) ];
-
-						p = geometry.vertices[ vertexIndex ];
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y ) / 400 + 0.5, 1.0, 0.5 );
-
-						f.vertexColors[ j ] = color;
-
-					}
-
-				}
-
-				group = new THREE.Group();
-				scene.add( group );
-
-				var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } ) );
-				group.add( mesh );
-
-				var fvNames = [ 'a', 'b', 'c', 'd' ];
-
-				var normalLength = 15;
-
-				for( var f = 0, fl = geometry.faces.length; f < fl; f ++ ) {
-					var face = geometry.faces[ f ];
-
-					var centroid = new THREE.Vector3()
-						.add( geometry.vertices[ face.a ] )
-						.add( geometry.vertices[ face.b ] )
-						.add( geometry.vertices[ face.c ] )
-						.divideScalar( 3 );
+				mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-					var arrow = new THREE.ArrowHelper(
-							face.normal,
-							centroid,
-							normalLength,
-							0x3333FF );
-					mesh.add( arrow );
-				}
-
-				for( var f = 0, fl = originalGeometry.faces.length; f < fl; f ++ ) {
-					var face = originalGeometry.faces[ f ];
-					if( face.vertexNormals === undefined ) {
-						continue;
-					}
-					for( var v = 0, vl = face.vertexNormals.length; v < vl; v ++ ) {
-						var arrow = new THREE.ArrowHelper(
-								face.vertexNormals[ v ],
-								originalGeometry.vertices[ face[ fvNames[ v ] ] ],
-								normalLength,
-								0xFF3333 );
-						mesh.add( arrow );
-					}
-				}
+				var faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
+				mesh.add( faceNormalsHelper );
 
-				for( var f = 0, fl = mesh.geometry.faces.length; f < fl; f ++ ) {
-					var face = mesh.geometry.faces[ f ];
-					if( face.vertexNormals === undefined ) {
-						continue;
-					}
-					for( var v = 0, vl = face.vertexNormals.length; v < vl; v ++ ) {
-						var arrow = new THREE.ArrowHelper(
-								face.vertexNormals[ v ],
-								mesh.geometry.vertices[ face[ fvNames[ v ] ] ],
-								normalLength,
-								0x000000 );
-						mesh.add( arrow );
-					}
-				}
+				var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
+				mesh.add( vertexNormalsHelper );
 
 			}
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = 'Drag to spin the geometry ';
-				container.appendChild( info );
+				container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.z = 500;
 
 				scene = new THREE.Scene();
 
-				var light = new THREE.PointLight( 0xffffff, 1.5 );
-				light.position.set( 1000, 1000, 2000 );
-				scene.add( light );
+				addMesh();
 
-				addStuff();
+				//
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } ); // WebGLRenderer CanvasRenderer
-				renderer.setClearColor( 0xf0f0f0 );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
 				//
 
+				var geometries = {
+					BoxGeometry: 0,
+					CircleGeometry: 1,
+					CylinderGeometry: 2,
+					IcosahedronGeometry: 3,
+					OctahedronGeometry: 4,
+					PlaneGeometry: 5,
+					RingGeometry: 6,
+					SphereGeometry: 7,
+					TorusGeometry: 8,
+					TorusKnotGeometry: 9
+				};
+
+				gui = new dat.GUI( { width: 350 } );
+				gui.add( options, 'Geometry', geometries ).onChange( function( value ) {
+
+					addMesh();
+
+				} );
+
+				//
+
 				controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -328,8 +173,6 @@
 
 				requestAnimationFrame( animate );
 
-				controls.update();
-
 				render();
 				stats.update();
 

examples/webgl_interactive_voxelpainter.html

@@ -71,24 +71,8 @@
 
 				// grid
 
-				var size = 500, step = 50;
-
-				var geometry = new THREE.Geometry();
-
-				for ( var i = - size; i <= size; i += step ) {
-
-					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
-					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
-
-					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
-					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
-
-				}
-
-				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2, transparent: true } );
-
-				var line = new THREE.LineSegments( geometry, material );
-				scene.add( line );
+				var gridHelper = new THREE.GridHelper( 1000, 20 );
+				scene.add( gridHelper );
 
 				//
 

src/animation/PropertyBinding.js

@@ -616,19 +616,44 @@ Object.assign( PropertyBinding.prototype, { // prototype, continued
 
 				}
 
-				if ( ! targetObject.geometry.morphTargets ) {
+				if ( targetObject.geometry.isBufferGeometry ) {
 
-					console.error( '  can not bind to morphTargetInfluences becasuse node does not have a geometry.morphTargets', this );
-					return;
+					if ( ! targetObject.geometry.morphAttributes ) {
 
-				}
+						console.error( '  can not bind to morphTargetInfluences becasuse node does not have a geometry.morphAttributes', this );
+						return;
+
+					}
+
+					for ( var i = 0; i < this.node.geometry.morphAttributes.position.length; i ++ ) {
 
-				for ( var i = 0; i < this.node.geometry.morphTargets.length; i ++ ) {
+						if ( targetObject.geometry.morphAttributes.position[ i ].name === propertyIndex ) {
+
+							propertyIndex = i;
+							break;
+
+						}
+
+					}
 
-					if ( targetObject.geometry.morphTargets[ i ].name === propertyIndex ) {
 
-						propertyIndex = i;
-						break;
+				} else {
+
+					if ( ! targetObject.geometry.morphTargets ) {
+
+						console.error( '  can not bind to morphTargetInfluences becasuse node does not have a geometry.morphTargets', this );
+						return;
+
+					}
+
+					for ( var i = 0; i < this.node.geometry.morphTargets.length; i ++ ) {
+
+						if ( targetObject.geometry.morphTargets[ i ].name === propertyIndex ) {
+
+							propertyIndex = i;
+							break;
+
+						}
 
 					}
 

src/core/BufferAttribute.js

@@ -17,6 +17,7 @@ function BufferAttribute( array, itemSize, normalized ) {
 	}
 
 	this.uuid = _Math.generateUUID();
+	this.name = '';
 
 	this.array = array;
 	this.itemSize = itemSize;

src/objects/Mesh.js

@@ -56,17 +56,53 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
 
 	updateMorphTargets: function () {
 
-		var morphTargets = this.geometry.morphTargets;
+		var geometry = this.geometry;
+		var m, ml, name;
 
-		if ( morphTargets !== undefined && morphTargets.length > 0 ) {
+		if ( geometry.isBufferGeometry ) {
 
-			this.morphTargetInfluences = [];
-			this.morphTargetDictionary = {};
+			var morphAttributes = geometry.morphAttributes;
+			var keys = Object.keys( morphAttributes );
 
-			for ( var m = 0, ml = morphTargets.length; m < ml; m ++ ) {
+			if ( keys.length > 0 ) {
 
-				this.morphTargetInfluences.push( 0 );
-				this.morphTargetDictionary[ morphTargets[ m ].name ] = m;
+				var morphAttribute = morphAttributes[ keys[ 0 ] ];
+
+				if ( morphAttribute !== undefined ) {
+
+					this.morphTargetInfluences = [];
+					this.morphTargetDictionary = {};
+
+					for ( m = 0, ml = morphAttribute.length; m < ml; m ++ ) {
+
+						name = morphAttribute[ m ].name || String( m );
+
+						this.morphTargetInfluences.push( 0 );
+						this.morphTargetDictionary[ name ] = m;
+
+					}
+
+				}
+
+			}
+
+		} else {
+
+			var morphTargets = geometry.morphTargets;
+
+			if ( morphTargets !== undefined && morphTargets.length > 0 ) {
+
+				this.morphTargetInfluences = [];
+				this.morphTargetDictionary = {};
+
+				for ( m = 0, ml = morphTargets.length; m < ml; m ++ ) {
+
+					name = morphTargets[ m ].name || String( m );
+
+					this.morphTargetInfluences.push( 0 );
+					this.morphTargetDictionary[ name ] = m;
+
+				}
 
 			}