返回知识库

网页 3D · 搭一个场景

网格与材质Mesh & Material

网格 = 几何体(由三角形组成的形状)+ 材质(表面怎么反光)。像陶瓷还是像塑料,看金属度、粗糙度和颜色 / 法线 / 粗糙度这几张贴图各自的分工。

把同一只杯子调成三种样品

下面的杯子是真实渲染的:形状是车削出来的几何体,表面是一份 PBR 材质。先点「看几何体」数一数三角形,再用金属度、粗糙度和三张贴图,把它依次调成客户要的亮面陶瓷、磨砂金属和木纹——样品清单会逐条告诉你还差什么。

正在按需加载 3D 引擎(three.js)…

1 几何体:形状

三角形:… 个

2 材质:表面怎么反光
3 贴图:各管一件事

客户要的三种样品 0/3 已调出

  • 亮面陶瓷白釉,能照出窗户的亮光还差 1 项
    • ✓ 金属度 ≤ 0.1
    • ✗ 粗糙度 0.1–0.35
    • ✓ 不贴木纹(颜色、法线贴图关)
  • 磨砂金属不锈钢保温杯那种哑光还差 2 项
    • ✗ 金属度 ≥ 0.8
    • ✗ 粗糙度 0.4–0.7
    • ✓ 不贴木纹颜色
  • 木纹原木杯,看得出纹路和纹沟还差 3 项
    • ✗ 颜色贴图开
    • ✗ 法线贴图开
    • ✗ 粗糙度贴图开
    • ✓ 金属度 ≤ 0.1、粗糙度 ≥ 0.5
AI 报告里会这样写MeshStandardMaterial { metalness: 0.00, roughness: 1.00, map: 无, normalMap: 无, roughnessMap: 无 }

现在是白模:金属度 0、粗糙度接近 1,形状已经对了,质感还没定。拉金属度、粗糙度或打开贴图,看杯子怎么变。

知识点:形状和质感是两回事

刚才杯子的每一次变化,都能归到下面某一条。

  • 网格(Mesh)= 几何体 + 材质。换材质不改形状,换几何体不改质感。
  • 几何体就是一堆三角形:分段越多越圆滑,三角形也越多;线框模式能直接数出来。
  • PBR 材质主要靠两个数:金属度决定「是不是金属」(通常取 0 或 1),粗糙度决定倒影清晰还是糊开。
  • 贴图各管一件事:颜色贴图管颜色,法线贴图管凹凸(不加三角形也能有纹沟),粗糙度贴图管哪里哑哪里亮。
  • PBR 的高光来自环境反射:场景里没有环境光照(环境贴图),金属会发黑、陶瓷没有高光。
  • 贴图尺寸要和它在屏幕上的大小相称:一只占半屏的杯子用 1024px 足够,4K 贴图只会让加载变慢、显存变大。

什么时候用、怎么验收

当你觉得「模型看起来很假 / 像塑料 / 发黑」,先别让 AI 加面数,先看材质。

  • 信号:AI 报告里出现 MeshStandardMaterial、metalness、roughness、map、normalMap,或你描述质感时只能说「更真实一点」。
  • 需求写法:说出材料是什么(陶瓷 / 金属 / 木头),让 AI 给出金属度、粗糙度的具体数值。
  • 验收一:要求 AI 列出每张贴图负责什么、尺寸多大,没有用途说明的贴图删掉。
  • 验收二:转着看高光——陶瓷要有清晰亮点,磨砂金属是柔和的一片;如果整个发黑,问 AI 有没有配环境贴图。
  • 不适用:形状本身不对(杯口不圆、把手太粗)是几何体或模型问题,调材质救不了。

正反例:同一句「让杯子更真实」

目标都是陶瓷杯,只差一个关键选择。

反例「杯子太假了,把面数加到 10 万」

形状本来就够圆,加面数只让页面更重;杯子仍然金属度 0.5、粗糙度 0.6,看起来还是一只灰塑料杯。

正例「陶瓷:金属度 0、粗糙度约 0.3;列出贴图用途和尺寸」

面数不变,只改材质参数,釉面高光马上出来;贴图清单让你一眼看出有没有多余的 4K 图。

快速自测

AI 做的不锈钢保温杯看起来像一面镜子,客户要的是磨砂质感。最该让 AI 改哪一项?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。