Docs: Added MeshToonMaterial to material browser.

docs/api/en/materials/MeshToonMaterial.html

@@ -14,7 +14,7 @@ <h1>[name]</h1>
 
  <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 @@ <h1>[name]</h1>
 
  }
 
- </script> -->
+ </script>
 
  <h2>Examples</h2>
  [example:webgl_materials_variations_toon materials / variations / toon]<br />

docs/api/zh/materials/MeshToonMaterial.html

@@ -14,7 +14,7 @@ <h1>卡通网格材质([name])</h1>
 
  <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 @@ <h1>卡通网格材质([name])</h1>
 
  }
 
- </script> -->
+ </script>
 
  <h2>例子(Examples)</h2>
  [example:webgl_materials_variations_toon materials / variations / toon]<br />

docs/scenes/js/material.js

@@ -166,11 +166,30 @@ var alphaMaps = ( function () {
 
 } )();
 
+var gradientMaps = ( function () {
+
+ var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
+ threeTone.minFilter = THREE.NearestFilter;
+ threeTone.magFilter = THREE.NearestFilter;
+
+ var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
+ fiveTone.minFilter = THREE.NearestFilter;
+ fiveTone.magFilter = THREE.NearestFilter;
+
+ return {
+ none: null,
+ threeTone: threeTone,
+ fiveTone: fiveTone
+ };
+
+} )();
+
 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 +471,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 +604,21 @@ function chooseFromHash( gui, mesh, geometry ) {
 
  break;
 
+ case 'MeshToonMaterial' :
+
+ material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
+ 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 } );