经纬志
首页 / three.js / 使用示例

光照对比

四个球并排,材质从左到右依次是 Basic、Lambert、Standard、Physical。 切换灯光方案,能直接看出「不受光」与「受光」的分界。

three.js 0.160.0 · 更新 2026-10-27
源码与运行效果
运行效果

说明

三点布光由半球光、主平行光、补平行光与轮廓点光组成。主光负责明暗关系与阴影, 补光压住背面的死黑,点光在球体边缘勾出亮边。切到「仅环境光」时, 所有受光材质都失去方向感,只剩均匀的亮度。

切到「关闭全部光源」时,只有最左边的 MeshBasicMaterial 仍然可见。 这一步能直观说明:Basic 不参与光照计算,其余材质没有光就是黑的。

设置取值说明
主光平行光 2.4暖白色,负责阴影与高光
补光平行光 0.8冷蓝色,从另一侧压暗部
轮廓光点光源 26decay = 2,近距离衰减很快
环境光半球光 0.55天空色与地面色的渐变
阴影贴图1024 × 1024范围 ±9,覆盖四个球与地面
色调映射ACES Filmic高光不过曝,暗部有层次

切换阴影为什么要重编译材质

开关 renderer.shadowMap.enabled 会改变着色器里是否包含阴影采样代码。 仅仅改这个布尔值,已经编译好的材质不会自动更新。示例在切换时遍历场景, 把所有材质的 needsUpdate 置为 true,下一帧重新编译后才看到效果。

这也是一个性能提示:运行中反复开关阴影,会反复触发重编译与卡顿。 确定需要阴影后,就不要再频繁切换。

物理材质的差别

最右边的球用了 MeshPhysicalMaterial,加了清漆层。 在主光下,它的高光更集中,边缘有一层额外的反射。 这类材质适合车漆、玻璃、抛光金属,普通建筑立面用 Standard 就够了, 过度使用会让材质看起来像塑料。

放到地理场景里

三维地形与建筑的主光方向最好固定,并与图例或时间信息一致; 否则同一份数据换一个光照,明暗关系完全变了,读图会产生歧义。 夜间场景可以降低主光、提高点光,但要保证道路与建筑轮廓仍然可辨。

受光材质需要光源,环境贴图不能替代方向光。环境贴图提供反射内容, 但不会产生明确的方向与阴影。需要立体感时,方向光仍然是必要的。