<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <base href="../../../" /> <script src="page.js"></script> <link type="text/css" rel="stylesheet" href="page.css" /> </head> <body> [page:Material] → <h1>[name]</h1> <div class="desc">一种实现卡通着色的材质。</div> <iframe id="scene" src="scenes/material-browser.html#MeshToonMaterial"></iframe> <script> // iOS iframe auto-resize workaround if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) { const scene = document.getElementById( 'scene' ); scene.style.width = getComputedStyle( scene ).width; scene.style.height = getComputedStyle( scene ).height; scene.setAttribute( 'scrolling', 'no' ); } </script> <h2>例子</h2> <p> [example:webgl_materials_toon materials / toon] </p> <h2>构造函数(Constructor)</h2> <h3>[name]( [param:Object parameters] )</h3> <p> [page:Object parameters] - (可选) 具有定义材料外观的一个或多个属性的对象。材料的任何属性(包括从Material继承的任何属性)都可以在这里传递.<br /><br /> 例外是属性[page:Hexadecimal color],它可以作为十六进制字符串传入,默认为0xffffff(白色)。[page:Color.set]Color.set ( color ) 在内部被调用。 </p> <h2>属性(Properties)</h2> <p>请参阅基础Material[page:Material]类以了解常见属性。</p> <h3>[property:Texture alphaMap]</h3> <p>alpha 贴图是一种灰度纹理,可控制整个表面的不透明度(黑色:完全透明;白色:完全不透明)。默认为空。<br /><br /> 仅使用纹理的颜色,如果存在则忽略alpha通道。对于RGB和RGBA纹理,由于在DXT压缩和未压缩的RGB565格式中为绿色提供了额外的精度,[page:WebGLRenderer WebGL]渲染器将在对该纹理进行采样时使用绿色通道。仅亮度和亮度/alpha纹理也将按预期工作。 </p> <h3>[property:Texture aoMap]</h3> <p>该纹理的红色通道用作环境遮挡贴图。默认为空。aoMap需要第二组UV。</p> <h3>[property:Float aoMapIntensity]</h3> <p>环境遮挡效果的强度。默认值为1。零表示没有遮挡效果。</p> <h3>[property:Texture bumpMap]</h3> <p> 创建凹凸贴图的纹理。黑色和白色值映射到与灯光相关的感知深度。凹凸实际上不会影响对象的几何形状,只会影响光照。如果定义了法线贴图,这将被忽略。 </p> <h3>[property:Float bumpScale]</h3> <p>凹凸贴图对材质的影响程度。典型范围是0-1。默认值为1。</p> <h3>[property:Color color]</h3> <p>材质的颜色[page:Color],默认设置为白色 (0xffffff)。</p> <h3>[property:Texture displacementMap]</h3> <p> 置换贴图影响网格顶点的位置。 与其他仅影响材质明暗的贴图不同,置换的顶点可以投射阴影、阻挡其他对象,并以其他方式充当真实几何体。 位移纹理是一个图像,其中每个像素的值(白色为最高)映射到网格的顶点并重新定位。 </p> <h3>[property:Float displacementScale]</h3> <p> 置换贴图对网格的影响程度(黑色表示无置换,白色表示最大置换)。如果没有置换贴图集,则不会应用此值。默认值为1。 </p> <h3>[property:Float displacementBias]</h3> <p> 置换贴图值在网格顶点上的偏移量。如果没有置换贴图集,则不会应用此值。默认为0。 </p> <h3>[property:Color emissive]</h3> <p> 材料的发射(光)颜色,本质上是一种不受其他光照影响的纯色。默认为黑色。 </p> <h3>[property:Texture emissiveMap]</h3> <p> 设置发射(发光)贴图。默认为空。发射贴图颜色由发射颜色和发射强度调制。如果您有自发光贴图,请务必将自发光颜色设置为黑色以外的颜色。 </p> <h3>[property:Float emissiveIntensity]</h3> <p>发射光的强度。调制发光颜色。默认值为1。</p> <h3>[property:Boolean fog]</h3> <p>材质是否受雾影响。默认为*true*。</p> <h3>[property:Texture gradientMap]</h3> <p>卡通着色的渐变贴图。使用此类纹理时,需要将Texture.minFilter[page:Texture.minFilter]和Texture.magFilter[page:Texture.magFilter]设置为[page:Textures THREE.NearestFilter]。默认为空。 </p> <h3>[property:Texture lightMap]</h3> <p>光照贴图。默认为空。lightMap需要第二组UV。</p> <h3>[property:Float lightMapIntensity]</h3> <p>烘焙光的强度。默认值为1。</p> <h3>[property:Texture map]</h3> <p> 彩色地图。可以选择包含一个alpha通道,通常与[page:Material.transparent .transparent]或[page:Material.alphaTest .alphaTest]结合使用。默认为空。纹理贴图颜色由漫反射.color[page:.color]调制。 </p> <h3>[property:Texture normalMap]</h3> <p> 创建法线贴图的纹理。RGB值影响每个像素片段的表面法线并改变颜色的点亮方式。法线贴图不会改变表面的实际形状,只会改变光照。如果材质具有使用左手惯例创作的法线贴图,则应取反normalScale的y分量以补偿不同的手性。 </p> <h3>[property:Integer normalMapType]</h3> <p> 法线贴图的类型。<br /><br /> 选项为[page:constant THREE.TangentSpaceNormalMap](默认)和[page:constant THREE.ObjectSpaceNormalMap]。 </p> <h3>[property:Vector2 normalScale]</h3> <p> 法线贴图对材质的影响有多大。典型范围是0-1。默认是设置为(1,1)的二维向量[page:Vector2]。 </p> <h3>[property:Boolean wireframe]</h3> <p>将几何渲染为线框。默认为false(即呈现为平面多边形)。</p> <h3>[property:String wireframeLinecap]</h3> <p> 定义线端的外观。可能的值为“butt”、“round”和“square”。默认为“圆形”。<br /><br /> 这对应于[link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2DCanvas]的lineCap属性,它会被[page:WebGLRenderer WebGL]渲染器忽略。 </p> <h3>[property:String wireframeLinejoin]</h3> <p> 定义线接头的外观。可能的值是“round”、“bevel”和“miter”。默认为“圆形”。<br /><br /> 这对应于[link:https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap 2DCanvas]的lineCap属性,它会被[page:WebGLRenderer WebGL]渲染器忽略。 </p> <h3>[property:Float wireframeLinewidth]</h3> <p>控制线框厚度。默认值为1。<br /><br /> 由于[link:https://www.khronos.org/registry/OpenGL/specs/gl/glspec46.core.pdf OpenGL Core Profile]与[page:WebGLRenderer WebGL]渲染器在大多数平台上的限制,无论设置值如何,线宽始终为1。 </p> <h2>方法(Methods)</h2> <p>有关常用方法,请参见Material[page:Material]类。</p> <h2>源码(Source)</h2> <p> [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js] </p> </body> </html>