返回知识库

网页 3D · 搭一个场景

光照与阴影Lighting & Shadow

标准材质没有光就是一片黑。环境光补底,方向光像太阳一样有方向并能投影;阴影要从光的位置每帧多画一遍,开得越多、越精细越耗性能。

给这张产品图打光

下面的桌面是真实渲染的,所有物体都用标准材质,一盏灯都没开,所以一片黑。按右边的顺序开环境光、开方向光、开阴影,再选阴影精度和投影对象。画面、左下角的 draw call 读数和验收单会一起变化。

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

产品图打光验收单 0/5 通过

  1. 1看得见一盏灯都没开:画面全黑✗ 不行
  2. 2有立体感,背光面不死黑需要方向光 + 环境光未做
  3. 3产品的影子落在桌上阴影要靠方向光投,先开方向光未做
  4. 4影子边缘干净,显存不浪费开阴影后再选精度未做
  5. 5只让需要的物体投影开阴影后再选未做
从四面八方均匀补光,不分方向,不能投影
先打开方向光
阴影要靠方向光投:先开方向光
阴影贴图精度
谁投影

画面全黑不是 bug:MeshStandardMaterial 按真实光照计算颜色,没有光就没有颜色。先开环境光。

知识点:先看得见,再有形状,最后才是影子

刚才产品图的每一步变化,对应下面一条。

  • MeshStandardMaterial 这类标准材质按真实光照算颜色:没有光就是全黑,这不是模型坏了。
  • 环境光(AmbientLight / HemisphereLight)均匀补底,不分方向、不能投影;方向光(DirectionalLight)像太阳,有方向,分出亮面和暗面,还能投影。
  • 阴影的代价:渲染器每帧先从光的位置把投影物体再画一遍,draw call 直接上涨;投影的物体越多,多画的越多。
  • 阴影贴图精度(mapSize)越高边缘越干净,显存按边长的平方涨:1024 → 2048 显存翻 4 倍,画面差别却很小。
  • 只给需要的物体开 castShadow:产品投影、地面接收;看不见的墙、远处小道具不投影。
  • 阴影范围(阴影相机的大小)要贴合产品:范围越大,同样的精度分到每个物体上的像素越少,锯齿越明显。

什么时候用、怎么验收

模型放进来一片黑、平得像纸,或者一开阴影手机就卡,都是这一页的问题。

  • 信号:AI 报告里出现 AmbientLight、DirectionalLight、castShadow、receiveShadow、shadow.mapSize。
  • 需求写法:「一盏环境光 + 一盏投影的方向光;只有产品和地面参与阴影;阴影贴图 1024;报告开阴影前后的帧率和 draw call」。
  • 验收一:画面里没有一片死黑或曝光过度的区域;转一圈看背光面。
  • 验收二:让 AI 给出开阴影前后的 draw call 和帧率,在真实手机上对比。
  • 不适用:纯展示、不动的场景可以把阴影「烘焙」进贴图,就不用每帧实时算——这时要的是美术流程,不是更多灯。

正反例:同一张产品图

都想要「有影子的高级感」,只差一个选择。

反例「加点光,再加阴影」

AI 开了三盏投影灯、所有物体都投影、阴影贴图 4096。电脑上好看,手机上 draw call 翻几倍、显存吃满,一转就掉帧发烫。

正例「一盏环境光 + 一盏投影方向光,只有产品投影,贴图 1024」

画面同样有立体感和落地的影子,阴影通道只多画产品那几次,显存约 8 MB,手机上依然流畅。

快速自测

AI 做的 3D 展厅里放了 200 把椅子,开了阴影后手机明显卡顿,画面里其实只有中间那张桌子的影子显眼。最该先让 AI 改什么?

继续查证

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

下一步学

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