Docs: Added MeshToonMaterial to material browser.

docs/api/en/materials/MeshToonMaterial.html

@@ -14,7 +14,7 @@
 
 		<div class="desc">An extension of the [page:MeshPhongMaterial] with toon shading.</div>
 
-		<!-- <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
+		<iframe id="scene" src="scenes/material-browser.html#MeshToonMaterial"></iframe>
 
 		<script>
 
@@ -30,7 +30,7 @@
 
 		}
 
-		</script> -->
+		</script>
 
 		<h2>Examples</h2>
 		[example:webgl_materials_variations_toon materials / variations / toon]<br />

docs/api/zh/materials/MeshToonMaterial.html

@@ -14,7 +14,7 @@
 
 		<div class="desc">[page:MeshPhongMaterial]卡通着色的扩展。</div>
 
-		<!-- <iframe id="scene" src="scenes/material-browser.html#MeshStandardMaterial"></iframe>
+		<iframe id="scene" src="scenes/material-browser.html#MeshToonMaterial"></iframe>
 
 		<script>
 
@@ -30,7 +30,7 @@
 
 		}
 
-		</script> -->
+		</script>
 
 		<h2>例子(Examples)</h2>
 		[example:webgl_materials_variations_toon materials / variations / toon]<br />

docs/scenes/js/material.js

@@ -166,11 +166,25 @@ var alphaMaps = ( function () {
 
 } )();
 
+var gradientMaps = ( function () {
+
+	var fiveStep = textureLoader.load( '../../examples/textures/gradientMaps/fiveStep.jpg' );
+	fiveStep.minFilter = THREE.NearestFilter;
+	fiveStep.magFilter = THREE.NearestFilter;
+
+	return {
+		none: null,
+		fiveStep: fiveStep
+	};
+
+} )();
+
 var envMapKeys = getObjectsKeys( envMaps );
 var diffuseMapKeys = getObjectsKeys( diffuseMaps );
 var roughnessMapKeys = getObjectsKeys( roughnessMaps );
 var matcapKeys = getObjectsKeys( matcaps );
 var alphaMapKeys = getObjectsKeys( alphaMaps );
+var gradientMapKeys = getObjectsKeys( gradientMaps );
 
 function generateVertexColors( geometry ) {
 
@@ -452,6 +466,25 @@ function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
 
 }
 
+function guiMeshToonMaterial( gui, mesh, material ) {
+
+	var data = {
+		color: material.color.getHex(),
+		map: diffuseMapKeys[ 0 ],
+		gradientMap: gradientMapKeys[ 1 ],
+		alphaMap: alphaMapKeys[ 0 ]
+	};
+
+	var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
+
+	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+
+	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+	folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
+	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+}
+
 function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
 
 	var data = {
@@ -566,6 +599,21 @@ function chooseFromHash( gui, mesh, geometry ) {
 
 			break;
 
+		case 'MeshToonMaterial' :
+
+			material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.fiveStep } );
+			guiMaterial( gui, mesh, material, geometry );
+			guiMeshToonMaterial( gui, mesh, material, geometry );
+
+			// only use a single point light
+
+			lights[ 0 ].visible = false;
+			lights[ 2 ].visible = false;
+
+			return material;
+
+			break;
+
 		case 'MeshStandardMaterial' :
 
 			material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );