你有没有过这种情况？花了一周建了个超精细的3D模型，结果渲染出来总觉得”假假的”——物体像贴在背景上，没有光影层次，阳光照在金属上居然没反光，完全没有真实世界的质感。其实啊，我刚开始做前端3D开发时也踩过这坑，当时用Three.js写了个产品展示页，模型细节拉满，可客户总说”像玩具”。后来才发现，问题根本不在模型精度，而在光照没调好。
光照就像场景的”灵魂”，真实世界里没有哪个物体是”凭空发光”的——阳光有方向，墙壁会反光，窗户会透进柔和的漫射光。电脑渲染要做的，就是模拟这种”光的传播规律”。这里有个小知识点：现在主流的真实感渲染都用”物理渲染（PBR）”，简单说就是让光的反射、吸收、折射都符合物理规律。你不用记复杂公式，只要记住一句话：光照的核心是”层次”和”互动”——有主光定方向，有环境光填暗部，有反光体现物体和场景的关系。
三点打光法：快速搭建基础光影框架
我最常用的”保底方案”是三点打光法，亲测对新手特别友好，不管是产品渲染还是场景漫游，这套组合拳都能让物体立刻”立”起来。具体怎么做呢？你可以想象自己站在物体前，需要三盏灯：
HDRI环境贴图：让场景”呼吸”的秘密武器
三点打光解决了”基础明暗”，但真实世界里，物体不只会被几盏灯照亮——地面会反光，天空会漫射，周围的墙壁、家具都会”悄悄”贡献光线。这时候HDRI环境贴图就派上用场了。简单说，HDRI是一张360°全景图，电脑会把它当成”环境光源”，让物体反射出周围的场景，瞬间有”融入环境”的感觉。
怎么选HDRI贴图呢？我一般在HDRIHaven（免费可商用）找，选的时候注意两点：光照方向和亮度范围。比如你要做”午后书房”场景，就选阳光从窗户进来的HDRI；做”夜晚城市”，就选霓虹灯多的贴图。加载到Three.js里时，记得调整envMapIntensity参数（一般0.5-1.0），太亮会过曝，太暗没效果。
我之前帮客户做一个手表展示页，用了张办公室HDRI，结果手表玻璃反射出窗外的树影和天花板灯，客户说”比实拍还真实”。对了，HDRI不仅影响光照，还能当背景图——把scene.background设成HDRI贴图，模型和背景的光影会完全匹配，再也不会有”模型悬浮”的尴尬。
体积光：给场景加”空气感”的小技巧
你有没有注意过，阳光透过窗户时，能看到空气中的灰尘？这种”光束感”就是体积光，加了之后场景立刻有”呼吸感”。Three.js里用VolumetricLight插件就能实现，参数调整有个小窍门：
density（密度）：值越小光束越淡，一般0.01-0.03。之前调过0.05，结果整个画面像起雾，模型都看不清了。 decay（衰减）：光传播中会变弱，室外场景设2，室内设1.5，太大会”断光”。 samples（采样数）：越高越细腻但越卡，电脑配置一般的话，512就够了。 我做过一个咖啡厅场景，加了体积光后，客户说”感觉能闻到咖啡香”——你看，光照做好了，连氛围都能调动起来。
材质参数调校——告别”塑料感”的关键步骤
解决了光照，接下来就是材质。很多人调材质只改颜色，结果模型永远像”塑料玩具”。其实PBR材质（基于物理的渲染）有三个”黄金参数”：漫反射（Albedo）、粗糙度（Roughness）、金属度（Metallic）。这三个值调对了，材质真实感能提升80%。
PBR材质三参数：搞懂”光怎么和物体玩”
先用人话解释下这三个参数：
我之前有个客户做3D手机展示，模型总像”塑料壳”，后来发现是Metallic值设成0了——改成0.9，Roughness 0.2，手机边框立刻有了”金属冷感”，客户反馈点击率涨了15%。
不同材质的”调校公式”
不同物体的材质特性差很远，这里分享几个我 的”傻瓜式参数表”，照着调基本不会错：
| 材质类型 | Metallic | Roughness | 特殊参数 |
|---|---|---|---|
| 不锈钢/金属 | 0.9-1.0 | 0.05-0.2 | 开启反射模糊 |
| 布料/织物 | 0.0 | 0.6-0.9 | 添加法线贴图模拟纹理 |
| 玻璃/透明材质 | 0.0 | 0.05-0.1 | 折射强度1.5，开启菲涅尔 |
| 木头/塑料 | 0.0-0.1 | 0.3-0.6 | 添加粗糙度贴图模拟木纹 |
纹理贴图：让材质”有细节”的终极武器
参数调好只是基础，真实物体表面都有细节——木头有纹理，金属有划痕，布料有编织感。这时候就需要PBR纹理集，一般包含4张贴图：Albedo（颜色）、Normal（凹凸）、Roughness（粗糙度）、Metallic（金属度）。
怎么用呢？以Three.js为例，加载后赋值给材质：
const textureLoader = new THREE.TextureLoader();
const albedoMap = textureLoader.load('wood-albedo.jpg');
const normalMap = textureLoader.load('wood-normal.jpg');
const roughnessMap = textureLoader.load('wood-roughness.jpg');
material.map = albedoMap;
material.normalMap = normalMap;
material.roughnessMap = roughnessMap;
注意贴图要”无缝拼接”，不然会有明显接缝。我之前用过一张有接缝的木纹贴图，客户说”像贴了劣质壁纸”，后来换了无缝贴图，效果立刻提升一个档次。
最后分享个小技巧：如果觉得材质还是”不够真实”，试试加”环境遮挡（AO）贴图”——模拟物体缝隙里的阴影，比如椅子腿和地面接触的地方，加了AO贴图后，”贴合感”会特别强。
你如果按这些方法调了光照和材质，肯定能告别”塑料感”。对了，Three.js官方文档里有PBR材质的详细说明（https://threejs.org/docs/#api/en/materials/MeshStandardMaterial，rel=”nofollow”），遇到问题可以翻翻看。你最近在做什么3D项目？有没有遇到真实感不足的问题？欢迎在评论区告诉我，我们一起解决！
你问不同3D库的光照设置是不是能通用啊？其实核心思路是相通的，就像不管用什么牌子的相机，拍人像时“主角要亮、背景要虚”的逻辑都一样。比如咱们说的三点打光法——主光定方向、补光填暗部、轮廓光勾边，这套思路在Three.js、Babylon.js甚至Unity里都能用，毕竟真实世界的光就是这么运作的：总得有个最亮的光源（比如太阳），暗部不能死黑（比如地面反光补亮），物体和背景得分开（比如头发边缘的逆光）。
不过具体调起来，细节确实不一样。举个例子，Three.js里想模拟太阳光用DirectionalLight，参数叫intensity控制亮度；Babylon.js里也有DirectionalLight，但亮度参数叫diffuse，而且默认值范围还不一样——Three.js的intensity设1就挺亮，Babylon.js的diffuse可能要设0.8才自然。我之前帮朋友改个Babylon.js的项目，他按Three.js的习惯把diffuse设成1.5，结果整个场景“亮到曝光”，后来查文档才发现两个库的参数刻度不一样。所以我的 是，先把“光照层次”的逻辑吃透——哪个是主光、哪个负责补暗、哪个勾轮廓，这些想明白了，再对着具体库的文档找对应的光源类型和参数，比死记“这个库用A参数，那个库用B参数”要靠谱多了，换工具的时候也能很快上手。
不同3D库（如Three.js、Babylon.js）的光照设置方法通用吗？
核心原理是通用的，但具体实现细节有差异。比如三点打光法（主光+补光+轮廓光）的逻辑在任何3D库都适用，但Three.js用PointLight/DirectionalLight，Babylon.js用PointLight/SpotLight，参数名称可能不同（比如Three.js的intensity对应Babylon.js的diffuse）。 先掌握“光照层次”的核心逻辑（主光定方向、补光填暗部、轮廓光分离物体），再看对应库的官方文档调整参数，这样切换工具时也能快速上手。
哪里能找到免费且高质量的HDRI环境贴图？
推荐两个我常用的免费网站：HDRIHaven（hdrihaven.com）和Poly Haven，前者专注HDRI，后者还有纹理贴图，全部可商用且分辨率从1K到16K可选。下载时注意选“Equirectangular”格式（全景图），Three.js直接用RGBELoader加载，Babylon.js用HDRCubeTextureLoader。新手 先从“室内环境”类贴图开始练手，光照过渡更柔和，容易出效果。
调整PBR材质参数时，最容易踩哪些坑？
新手常踩3个坑：① 金属度（Metallic）设太高，比如给木头、塑料设0.5以上，结果表面像“生锈金属”，记住非金属物体金属度 0-0.1；② 粗糙度（Roughness）没配合纹理贴图，比如调了0.3但没加载粗糙度贴图，表面会“假滑”， 参数+贴图结合（贴图控制局部细节，参数控制整体趋势）；③ 漫反射（Albedo）颜色太亮，RGB值超过240，导致物体像“自发光”，真实世界物体的Albedo亮度通常在180-220之间。
体积光效果很好，但电脑配置不够，会卡顿怎么办？
可以试试这3个优化技巧：① 降低采样数（samples），从512降到256，肉眼几乎看不出差异，但性能提升30%以上；② 缩小体积光范围，只在需要突出的区域（如窗户光束）使用，避免全场景覆盖；③ 用“伪体积光”替代，比如在光束路径上叠加半透明的平面网格，贴渐变纹理，视觉效果接近且性能消耗极低。我之前给低配设备做展厅漫游时，就用第③种方法，既保持效果又不卡顿。
怎么快速判断自己的渲染效果是否接近真实？
分享2个“对比法”小技巧：① 找一张真实世界的照片（比如同类型产品、同场景的实拍图），对比明暗过渡——真实场景暗部不会“死黑”，高光不会“过曝”，影子边缘有虚实变化（主光影子实，环境光影子虚）；② 检查“材质互动”——金属物体是否反射周围环境，透明物体（如玻璃）是否有折射，布料是否有细微的纹理凹凸。如果你的渲染图和照片放在一起，不觉得“违和”，基本就达到真实感标准了。
