Docs: Move material browser to BufferGeometry.

docs/scenes/js/material.js

@@ -23,7 +23,6 @@ var constants = {
 	colors: {
 
 		'THREE.NoColors': THREE.NoColors,
-		'THREE.FaceColors': THREE.FaceColors,
 		'THREE.VertexColors': THREE.VertexColors
 
 	},
@@ -128,51 +127,19 @@ var textureMapKeys = getObjectsKeys( textureMaps );
 
 function generateVertexColors( geometry ) {
 
-	for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
-
-		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
-			i / il * Math.random(),
-			0.5,
-			0.5
-		) );
-		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
-			i / il * Math.random(),
-			0.5,
-			0.5
-		) );
-		geometry.faces[ i ].vertexColors.push( new THREE.Color().setHSL(
-			i / il * Math.random(),
-			0.5,
-			0.5
-		) );
-
-		geometry.faces[ i ].color = new THREE.Color().setHSL(
-			i / il * Math.random(),
-			0.5,
-			0.5
-		);
+	var positionAttribute = geometry.attributes.position;
 
-	}
-
-}
-
-function generateMorphTargets( mesh, geometry ) {
-
-	var vertices = [], scale;
-
-	for ( var i = 0; i < geometry.vertices.length; i ++ ) {
-
-		vertices.push( geometry.vertices[ i ].clone() );
+	var colors = [];
+	var color = new THREE.Color();
 
-		scale = 1 + Math.random() * 0.3;
+	for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
 
-		vertices[ vertices.length - 1 ].x *= scale;
-		vertices[ vertices.length - 1 ].y *= scale;
-		vertices[ vertices.length - 1 ].z *= scale;
+		color.setHSL( i / il * Math.random(), 0.5, 0.5 );
+		colors.push( color.r, color.g, color.b );
 
 	}
 
-	geometry.morphTargets.push( { name: 'target1', vertices: vertices } );
+	geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 }
 
@@ -196,23 +163,12 @@ function needsUpdate( material, geometry ) {
 
 	return function () {
 
-		material.vertexColors = + material.vertexColors; //Ensure number
-		material.side = + material.side; //Ensure number
-		material.needsUpdate = true;
-		geometry.verticesNeedUpdate = true;
-		geometry.normalsNeedUpdate = true;
-		geometry.colorsNeedUpdate = true;
-
-	};
-
-}
-
-function updateMorphs( torus, material ) {
-
-	return function () {
-
-		torus.updateMorphTargets();
+		material.vertexColors = parseInt( material.vertexColors ); //Ensure number
+		material.side = parseInt( material.side ); //Ensure number
 		material.needsUpdate = true;
+		geometry.attributes.position.needsUpdate = true;
+		geometry.attributes.normal.needsUpdate = true;
+		geometry.attributes.color.needsUpdate = true;
 
 	};
 
@@ -329,8 +285,7 @@ function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
 	folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
 	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
-	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
-	folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'combine', constants.combine );
 	folder.add( material, 'reflectivity', 0, 1 );
 	folder.add( material, 'refractionRatio', 0, 1 );
 
@@ -342,7 +297,6 @@ function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
 
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
 
 }
 
@@ -353,7 +307,6 @@ function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
 
 }
 
@@ -399,11 +352,9 @@ function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
 	folder.add( data, 'specularMap', textureMapKeys ).onChange( updateTexture( material, 'specularMap', textureMaps ) );
 	folder.add( data, 'alphaMap', textureMapKeys ).onChange( updateTexture( material, 'alphaMap', textureMaps ) );
-	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
-	folder.add( material, 'combine', constants.combine ).onChange( updateMorphs( mesh, material ) );
+	folder.add( material, 'combine', constants.combine );
 	folder.add( material, 'reflectivity', 0, 1 );
 	folder.add( material, 'refractionRatio', 0, 1 );
-	//folder.add( material, 'skinning' );
 
 }
 
@@ -430,7 +381,7 @@ function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -462,7 +413,7 @@ function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );
@@ -498,7 +449,7 @@ function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
 	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors );
+	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 	folder.add( data, 'map', textureMapKeys ).onChange( updateTexture( material, 'map', textureMaps ) );

docs/scenes/material-browser.html

@@ -71,15 +71,14 @@
 
 			guiScene( gui, scene, camera );
 
-			var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
-			var mesh = new THREE.Mesh( geometry );
+			var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
+			geometry = geometry.toNonIndexed();
 
 			generateVertexColors( geometry );
 
+			var mesh = new THREE.Mesh( geometry );
 			mesh.material = chooseFromHash( gui, mesh, geometry );
 
-			generateMorphTargets( mesh, geometry );
-
 			scene.add( mesh );
 
 			var prevFog = false;
@@ -100,12 +99,6 @@
 
 				}
 
-				if ( mesh.morphTargetInfluences ) {
-
-					mesh.morphTargetInfluences[ 0 ] = ( 1 + Math.sin( 4 * time ) ) / 2;
-
-				}
-
 				renderer.render( scene, camera );
 
 			};