2. 软件编程
  3. 网页编程

4.1 常见的材质属性

材质与 THREE.Geometry 共同构成 THREE.Mesh。材质就像是对象的“皮肤”，定义了几何体外部的样子。例如，皮肤决定了几何体是呈现金属质感、透明，还是以线框形式显示。生成的 THREE.Mesh 对象随后可以添加到场景中，由 Three.js 渲染。本章中我们将深入研究 Three.js 提供的所有材质，你将学习如何使用这些材质来创建好看的 3D 对象。我们将在本章中探索的材质如下表所示：

名称 描述
MeshBasicMaterial 基础材质，可用于为几何体赋予简单颜色或显示线框。这种材质不受光照影响。
MeshDepthMaterial 根据距相机的距离来决定网格颜色的材质。
MeshNormalMaterial 根据面的法线向量来决定颜色的简单材质。
MeshLambertMaterial 考虑光照的材质，用于创建暗淡、无光泽的对象。
MeshPhongMaterial 同样考虑光照，可用于创建有光泽的对象。
MeshStandardMaterial 基于物理渲染（PBR）的材质，使用物理正确模型确定光与表面的交互，可创建更真实的对象。
MeshPhysicalMaterial MeshStandardMaterial 的扩展，对反射提供更多控制。
MeshToonMaterial MeshPhongMaterial的扩展，尝试使对象看起来像手绘风格。
ShadowMaterial 一种特殊材质，可以接收阴影，但其余部分渲染为透明。
ShaderMaterial 允许指定自己的着色器程序，直接控制顶点位置和像素颜色。
LineBasicMaterial 用于 THREE.Line 几何体创建彩色线条的材质。
LineDashMaterial 与 LineBasicMaterial 相同，但允许创建虚线效果。

材质有许多共同的属性。Three.js 提供了一个材质基类 THREE.Material，其中列出了所有公共属性。可以将这些常见的材质属性分为以下三类：

基本属性

THREE.Material 对象的基本属性列在下表中：

属性 描述
id 用于标识材质，在创建材质时分配。第一个材质从 0 开始，每创建一个新材质增加 1。
uuid 一个唯一生成的ID，内部使用。
name 你可以使用此属性为材质分配一个名称，可用于调试目的。
opacity 定义对象的透明程度。需与 transparent 属性一起使用。范围从 0 到 1。
transparent 如果设置为true，Three.js 将使用设定的 opacity 渲染此对象。如果为 false，对象不会透明，只是颜色变浅。如果使用带有 alpha（透明）通道的纹理，也应将此属性设置为 true。
overdraw 使用 THREE.CanvasRenderer 时，可能看到三角形之间的小间隙。设置此属性可防止此问题。好的取值是0.5，默认为0。
visible 定义此材质是否可见。如果设置为 false，你将无法在场景中看到该对象。
side 使用此属性可以定义材质应用于几何体的哪一面。默认是 THREE.FrontSide，将材质应用于对象的正面（外部）。你也可以设置为 THREE.BackSide，应用于背面（内部），或  THREE.DoubleSide，应用于两面。
needsUpdate 当 Three.js 创建材质时，会将其转换为一组WebGL指令。当你希望对材质所做的更改也能更新 WebGL 指令时，可以将此属性设置为 true。
colorWrite 如果设置为 false，材质的颜色将不会显示（实际上，你将创建不可见的对象，但它们会遮挡其后的对象）。
flatShading 决定此材质是否使用平面着色渲染。使用平面着色时，构成对象的各个三角形会被单独渲染，而不会合并为光滑表面。
lights 布尔值，决定此材质是否受光照影响。默认值为 true。
premultipliedAlpha 改变对象透明度渲染方式。默认为 false。
dithering 对渲染材质应用抖动效果。可用于避免条带效应。默认为 false。
shadowSide 与 side 属性类似，但决定哪些面投射阴影。默认为 null。如果为 null，则根据 side 属性确定：THREE.FrontSide → 正面；THREE.BackSide → 背面；THREE.DoubleSide → 两面。
vertexColors 通过此属性，可以为每个顶点定义单独的颜色。默认为 THREE.NoColors。如果设置为 THREE.VertexColors，则使用 THREE.Face3 的 vertexColors 数组中的颜色为各个顶点着色；如果设置为 THREE.FaceColors，则使用每个面的 color 属性为该面着色。此属性在 CanvasRenderer 上不起作用，但在 WebGLRenderer 上有效。请参考 LineBasicMaterial  示例，我们在其中使用此属性为线条的不同部分着色。

对于每种材质，你还可以设置许多混合属性。

混合属性

材质有一些通用的混合相关属性。混合决定了我们渲染的颜色如何与它们背后的颜色交互。我们在讨论组合材质时会稍微涉及这个主题。混合属性列在下表中：

名称 描述
blending 决定此对象上的材质如何与背景混合。标准模式是 THREE.NormalBlending，只显示顶层。
blendSrc 除了使用标准混合模式，你还可以通过设置 blendSrc、blendDst 和 blendEquation 创建自定义混合模式。此属性定义此对象（源）如何混合到背景（目标）中。默认的 THREE.SrcAlphaFactor 设置使用 alpha（透明度）通道进行混合。
blendSrcAlpha blendSrc 的透明度。默认为 null。
blendDst 此属性定义背景（目标）如何用于混合，默认为 THREE.OneMinusSrcAlphaFactor，意味着此属性也使用源的 alpha 通道进行混合，但使用 1 − (源的alpha 通道)作为值。
blendDstAlpha blendDst 的透明度。默认为 null。
blendEquation 定义 blendSrc 和 blendDst 值如何一起使用。默认为相加（AddEquation）。通过这三个属性，你可以创建自己的自定义混合模式。

最后一组属性主要在内部使用，控制 WebGL 用于渲染场景的具体细节。

高级属性

我们不会深入探讨这些属性的细节。它们与 WebGL 内部工作原理有关。如果你想了解更多关于这些属性的信息，OpenGL 规范是一个很好的起点。你可以在 https://registry.khronos.org/OpenGL/specs/es/2.0/es_full_spec_2.0.withchanges.pdf 找到此规范。下表简要描述了这些高级属性：

名称 描述
depthTest 这是一个高级 WebGL 属性。使用此属性可以启用或禁用 GL_DEPTH_TEST 参数。此参数控制是否使用像素的深度来确定新像素的值。通常你不需要更改此值。更多信息可以在我们前面提到的 OpenGL 规范中找到。
depthWrite 这是另一个内部属性。此属性可用于确定此材质是否影响 WebGL 深度缓冲区。如果你将对象用于2D叠加（例如，HUD），应将此属性设置为 false。但通常情况下，你不需要更改此属性。
depthFunc 用于比较像素深度的函数。对应于 WebGL 规范中的 glDepthFunc。
polygonOffset、polygonOffsetFactor 和 polygonOffsetUnits 通过这些属性，你可以控制 WebGL 的 POLYGON_OFFSET_FILL 特性。通常不需要。有关它们具体作用的详细解释，可以查看OpenGL规范。
alphaTest 此值可以设置为特定值（0 到 1）。每当像素的 alpha 值小于此值时，它就不会被绘制。你可以使用此属性来消除一些与透明度相关的伪影。
precision 将材质的精度设置为以下WebGL值之一：highp、mediump 或 lowp。

发布时间：2026/8/25 22:14:58  阅读次数：28