下载掌阅APP，畅读海量书库
立即打开
我们先列出所有材质的共同属性。Three.js提供了一个材质基类THREE.Material，这个基类包含了所有这些常见属性。我们将这些常见的材质属性分为以下三个类别：
❑ 基本属性 ：这些属性是你经常使用的属性。使用这些属性，你可以控制对象的不透明度、是否可见以及如何引用它（通过ID或自定义名称）。
❑ 混合属性 ：每个对象都有一组混合属性。这些属性定义了材质每个点的颜色如何与其背后的颜色结合。
❑ 高级属性 ：高级属性是一组用于控制WebGL底层上下文如何渲染对象的属性。大多数情况下，我们不需要处理这些属性。
注意，本章我们将跳过大多数与纹理和贴图相关的属性。大多数材质允许你使用图像作为纹理（例如，类似于木材或石材的质感）。我们会在第10章深入了解各种可用的纹理和贴图选项。一些材质还具有与动画相关的特定属性（例如，skinning、morpNormals和morphTargets），我们也将跳过这些属性，这些将在第9章介绍。clipIntersection、clippingPlanes和clipShadows属性将在第6章介绍。
我们先从基本属性开始。
以下是THREE.Material对象的基本属性（你将在4.2.1节看到这些属性的实际应用）：
❑ id：用于标识材质的ID，在创建材质时会自动分配。第一个材质的id从0开始，然后每创建一个新的材质，id都会增加1。
❑ uuid：这是一个全局唯一的ID，用于Three.js的内部管理和调试。
❑ name：你可以使用该属性为材质分配一个名称，这个属性在调试时非常有用。
❑ opacity：定义对象的透明度。需要与transparent属性一起使用，取值范围为0到1。
❑ transparent：如果设置为true，则Three.js会使用设置的透明度渲染该对象。如果设置为false，则对象将不会呈现透明效果，而是显示更浅的颜色。当使用包含alpha透明度通道的纹理时，也需要将transparent设置为true。
❑ visible：定义此材质是否可见。如果将其设置为false，则将无法在场景中看到该对象。
❑ side：使用此属性，你可以定义将材质应用于哪侧的几何体。默认值为THREE.Frontside，它将材质应用于对象的正面（外部）。你还可以将其设置为THREE.BackSide，将其应用于背面（内部），或者将其设置为THREE.DoubleSide，将其应用于两个面。
❑ needsUpdate：当Three.js创建材质时，会转换为一组WebGL指令。当你希望更改材质会自动更新对应的WebGL指令时，可以将此属性设置为true。
❑ colorWrite：如果设置为false，则不会显示该材质的颜色（实际上你创建了一个不可见的对象，该对象遮挡其后面的对象）。
❑ flatShading：确定是否使用平面着色来渲染材质。在平面着色模式下，组成对象的单个三角形会被单独渲染，而不是合并成一个平滑的表面。
❑ lights：这是一个布尔值，用于确定此材质是否受到光源的影响。默认值为true。
❑ premultipliedAlpha：该属性用于控制材质的透明度渲染方式。默认值为f a l s e。
❑ dithering：控制是否在材质渲染时启用抖动效果。当设置为true时，渲染器会对材质的渐变颜色应用抖动，以减少带状效应和色带。默认值为false。
❑ shadowSide：与side属性类似，用于确定哪些面会投射阴影。如果没有设置shadowSide，则将遵循side属性设置的值进行渲染。
❑ vertexColors：控制是否为每个顶点定义单独的颜色。当设置为true时，渲染器将使用几何体中每个顶点的颜色进行渲染；当设置为false时，渲染器将忽略顶点的颜色，只使用材质的颜色进行渲染。
❑ fog：用于确定材质是否受全局雾设置的影响。尽管未在本章中演示，但如果设置为false，则禁用我们在第2章看到的场景的全局雾效果。
对于每种材质，你还可以设置一些混合属性。
材质具有一些通用的混合属性。混合属性决定了我们渲染的颜色如何与它们后面的颜色相互作用。我们将在讨论组合材质时简要提及这个主题。这里先列出这些混合属性：
❑ blending：决定了材质与其后面颜色的混合方式。正常模式是THREE.Normal-Blending，它只显示最顶层的材质。
❑ blendSrc：除了使用标准的混合模式，你还可以通过设置blendsrc、blenddst和blendequation来创建自定义混合模式。该属性定义了如何将对象（源）混合到其后面颜色（目标）中。默认的THREE.SrcAlphaFactor设置使用alpha（透明度）通道进行混合。
❑ blendSrcAlpha：用于设置blendSrc的透明度。默认值为null。
❑ blendDst：该属性用于定义其后面颜色（目标）如何参与混合，默认为THREE.OneMinusSrcAlphaFactor，即目标颜色会与源颜色的alpha通道（透明度）进行混合，其中目标颜色使用1作为值。
❑ blendDstAlpha：前面blendDst属性提到的alpha通道（透明度）。默认值为null。
❑ blendEquation：定义了如何使用blendsrc和blenddst的值。默认值是AddEquation，即默认将它们相加。结合这三个属性，你可以创建自定义混合模式。
最后一组属性主要用于内部控制WebGL渲染场景的细节。
我们不会深入探讨这些属性。这些属性主要与WebGL内部的运行机制相关。如果你确实想要了解更多关于这些属性的信息，可以从OpenGL规范开始。你可以在https://www.khronos.org/opengl/wiki找到该规范。高级属性主要包括：
❑ depthTest：这是一个高级的WebGL属性。通过这个属性，你可以启用或禁用GL_DEPTH_TEST参数。此参数控制是否使用像素的深度来确定新像素的值。通常情况下，你不需要更改这个属性。关于这个属性的更多信息可以在我们之前提到的OpenGL规范中找到。
❑ depthWrite：这是另一个内部属性，用于确定材质是否影响WebGL深度缓冲区。如果你使用一个对象作为2D叠加层，则应将该属性设置为false。通常情况下，你不需要更改该属性。
❑ depthFunc：此函数用于比较像素的深度值，对应于来自WebGL规范的glDepthFunc。
❑ polygonOffset、polygonOffsetFactor和polygonOffsetUnits：你可以使用这些属性控制POLYGON_OFFSET_FILL WebGL特性。通常情况下不需要用到这些属性。如果想详细了解它们的作用，可以查阅OpenGL规范。
❑ Alphatest：这个值可以设为特定值（0到1）。每当一个像素的alpha值小于该值时，它就不会被绘制。你可以使用该属性来消除一些与透明度相关的伪影。你可以将材质的精度设为以下WebGL值之一：highp、mediump或lowp。
接下来我们将介绍Three.js中的各种材质，并解释这些材质的属性如何影响最终的渲染效果。