【three.js教程】Three.js 材质详解：从“不反光“到“物理级真实“怎么选

Three.js 材质详解从不反光到物理级真实怎么选原文出处Three.js Manual – Materials本文基于 three.js 官方手册材质章节整理用通俗的方式带你理清 three.js 里五花八门的材质该怎么选、怎么用。写在前面前面我们聊了图元——也就是那些现成的 3D 形状。但你肯定发现了一个球体光秃秃的没有颜色、没有质感看着特别假。让它有模有样的东西就是材质Material。材质决定了物体表面怎么和光互动、看起来是什么质感。three.js 里的材质种类很多Basic、Lambert、Phong、Standard、Physical、Toon……这篇就帮你把这些材质梳理一遍介绍什么时候该用哪个。一、怎么设置一个材质先说最基础的材质属性有两种设置时机。第一种创建时直接传参数我们前面一直这么用constmaterialnewTHREE.MeshPhongMaterial({color:0xff0000,// 红色这里也可以传 CSS 颜色字符串flatShading:true,});第二种创建之后再改constmaterialnewTHREE.MeshPhongMaterial();material.color.setHSL(0,1,0.5);// 红色material.flatShadingtrue;特别是颜色THREE.Color类型它的设值方式特别多记几个常用的就够material.color.set(0x00ffff);// 和 CSS 的 #RRGGBB 一样material.color.set(purple);// 直接传 CSS 颜色名material.color.set(#F32);// CSS 简写material.color.set(rgb(255, 127, 64));// CSS rgb 写法material.color.set(hsl(180, 50%, 25%));// CSS hsl 写法material.color.setHSL(h,s,l);// h/s/l 都是 0~1material.color.setRGB(r,g,b);// r/g/b 都是 0~1创建时也可以混用十六进制和字符串constm1newTHREE.MeshBasicMaterial({color:0xff0000});// 红色constm2newTHREE.MeshBasicMaterial({color:red});// 红色constm3newTHREE.MeshBasicMaterial({color:#F00});// 红色constm4newTHREE.MeshBasicMaterial({color:rgb(255,0,0)});// 红色constm5newTHREE.MeshBasicMaterial({color:hsl(0,100%,50%)});// 红色二、最基础的三属性Basic / Lambert / Phong这三个是 three.js 里最基础的受光材质区别在于怎么计算光照材质光照计算方式特点MeshBasicMaterial完全不受光永远一个色像贴了自发光贴纸MeshLambertMaterial只在顶点处算光照便宜适合低端设备MeshPhongMaterial逐像素算光照支持高光有镜面反光点最塑料感MeshBasicMaterial最简单——不管有没有光它都显示你给的颜色像灯泡自己会发光。MeshPhongMaterial比 Lambert 高级的地方在于它支持高光specular highlight也就是物体表面那个亮亮的反光点。高光的锐利程度由shininess参数控制默认是 30shininess: 0高光铺得很开看起来像磨砂shininess: 30默认值适中shininess: 150高光聚成一个小点看起来像釉面/瓷器还有个有意思的技巧如果你把MeshLambertMaterial或MeshPhongMaterial的emissive自发光色设成某个颜色同时把color设成黑色Phong 再把shininess设 0效果就跟MeshBasicMaterial一模一样了。换句话说Basic 其实是 Lambert/Phong 的阉割版。那为什么还要保留三个答案很简单越高级的材质越费 GPU。在手机这种性能弱的设备上用简单材质能省不少电。所以原则是不需要的功能就别用——不需要光照和高光就用MeshBasicMaterial别无脑上 Phong。三、Toon 材质卡通渲染MeshToonMaterial和MeshPhongMaterial很像但有个关键区别它不用平滑渐变来表现明暗而是用一张渐变贴图gradient map来分级。默认的分级是前 70% 亮度统一 70%后 30% 统一 100%所以物体看起来只有两三个色块像卡通片里的上色。你也可以自己提供 gradient map 来定义分几级、每级什么亮度。适合做日系卡通风格、二次元渲染那种效果。四、物理级材质Standard 和 PhysicalPBR前面那几个材质用的都是凑合好看的简单数学。但真实世界里光的行为复杂得多——金属和非金属反光不一样粗糙和光滑反光也不一样。为了逼近真实three.js 提供了PBRPhysically Based Rendering基于物理的渲染材质。MeshStandardMaterial这是目前最常用、也是官方推荐的标准材质。它和 Phong 最大的参数区别Phong 用shininess越小越亮Standard 用两个新参数roughness粗糙度和metalness金属度roughness基本就是shininess的反面高 roughness接近 1像棒球表面粗糙没有硬反光低 roughness接近 0像台球非常光滑反光锐利取值范围 0~1metalness表示这东西有多像金属0非金属塑料、木头、皮肤1纯金属铁、铜、金这两个参数可以组合出无数种质感比如粗糙的金属“光滑的塑料”“磨砂玻璃”。MeshPhysicalMaterialMeshPhysicalMaterial在MeshStandardMaterial基础上多加了一层清漆效果新增两个参数clearcoat0~1表示表面镀了一层多厚的透明清漆比如车漆、钢琴漆clearCoatRoughness这层清漆本身有多粗糙它适合做车漆、带保护层的家具、手机背板这种底层是某种材质、表面又镀了一层的效果。性能排序从快到慢排个队MeshBasicMaterial → MeshLambertMaterial → MeshPhongMaterial → MeshStandardMaterial → MeshPhysicalMaterial越靠后的越真实但也越费性能。低端机/移动端尽量往前选。五、三个特殊用途材质这三个不常用但知道有它们会省事材质干嘛用的ShadowMaterial只显示阴影。做阴影相关效果时用来显示阴影数据MeshDepthMaterial把每个像素的深度渲染出来近的偏黑远的偏白某些后期特效会用到MeshNormalMaterial把几何体的法线方向用颜色画出来。x红、y绿、z蓝调试模型朝向时很有用六、自定义着色器ShaderMaterial / RawShaderMaterial如果你想做完全自定义的效果比如水波、溶解、全息可以用ShaderMaterial写 GLSL 着色器。它还能借助 three.js 帮你处理一部分底层逻辑。RawShaderMaterial更彻底——完全不依赖 three.js 的任何帮助你自己掌控所有。这两个话题比较大会在后面专门讲。七、两个最常用的通用属性所有材质都共享一堆通用设置定义在Material基类里挑两个最实用的说flatShading平面着色默认false。设为true后物体表面会按每个三角面平整上色而不是平滑过渡——也就是传说中的 low-poly 风格。配合低面数球体特别好看。side显示哪一面默认THREE.FrontSide只显示正面。其他可选THREE.BackSide只显示背面THREE.DoubleSide两面都显示大部分 3D 物体是实心不透明的背面朝内不用画。但像PlaneGeometry这种没有厚度的平面从背面看会直接消失——所以这种场景必须把side设成THREE.DoubleSide。八、一个容易踩的坑needsUpdate大多数情况下你改材质属性three.js 会自己重新应用。但有几类设置改了之后不会自动生效得手动告诉它material.needsUpdatetrue;需要在改完后设needsUpdate true的情况主要是改了flatShading增删了纹理注意只是换纹理图片不用但从有纹理变没纹理或反过来就得设从纹理切回无纹理时更省事的做法是直接换一张 1×1 的白色像素纹理而不是真的去掉纹理。大部分 App 这辈子都不会碰到这个问题——你很少会在运行时切换 flat shading 或有没有纹理。知道有这么回事就行。回顾一下材质这东西核心记住三句话不需要光照就用 Basic要真实就用 Standard中间按性能和效果权衡选 Lambert / Phong / Toon。PBR 时代首选MeshStandardMaterial用roughnessmetalness两个参数就能调出绝大多数日常质感。平面类物体记得设THREE.DoubleSide否则背面看不见。材质还有一大块内容没展开——纹理Texture。那是另一个大话题会单独讲。在那之前先消化这几个材质就够用了。延伸阅读Three.js MeshStandardMaterial 文档Three.js MeshPhongMaterial 文档Three.js Material 基类文档Three.js 材质特性对照表