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