123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <!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>
|