一、五大光源 完整代码 + 使用场景
1. 环境光 AmbientLight
作用
无方向、无阴影，均匀照亮全场暗部，只用来补暗部
规则
- 数量：全局仅 1 盏
- 强度：
0.1 ~ 0.3最佳 - 不产生阴影、不区分明暗
// 代码
const ambientLight = new THREE.AmbientLight(0xffffff, 0.2)
scene.add(ambientLight)
适用场景
- 所有场景必备打底光
- 阴天、室内柔光、漫反射环境
避坑
强度超过 0.4 → 画面发灰，丢失立体感
2. 平行光 DirectionalLight 太阳光
作用
模拟自然光、太阳光，主光源首选，支持阴影
// 代码
const dirLight = new THREE.DirectionalLight(0xffffee, 0.7)
// 光源位置
dirLight.position.set(10, 15, 10)
// 开启投射阴影
dirLight.castShadow = true
// 阴影范围优化
dirLight.shadow.camera.left = -20
dirLight.shadow.camera.right = 20
dirLight.shadow.camera.top = 20
dirLight.shadow.camera.bottom = -20
scene.add(dirLight)
scene.add(dirLight.target)
适用场景
- 户外白天场景
- 建筑可视化、园区沙盘
- 3D 产品写实渲染
搭配方案
环境光 (0.2) + 平行光 (0.7) = 万能写实组合
3. 点光源 PointLight 灯泡 / 火光
作用
从一个点向四面八方发光，有照射范围
// 代码
const pointLight = new THREE.PointLight(0xff7722, 1, 30)
pointLight.position.set(0, 5, 0)
pointLight.castShadow = true
scene.add(pointLight)
// 可选：添加光源可视化小球
const pointHelper = new THREE.PointLightHelper(pointLight,1)
scene.add(pointHelper)
- 第三个参数：照射最大距离
适用场景
- 室内吊灯、台灯
- 篝火、火焰特效
- 夜晚街道路灯点缀
- 飞船机舱氛围灯
注意
多盏点光源 + 阴影极度耗性能，移动端少用
4. 聚光灯 SpotLight 手电筒 / 探照灯
作用
锥形定向发光，聚焦一束光线，类似手电筒
// 代码
const spotLight = new THREE.SpotLight(0x44aaff, 1)
spotLight.position.set(0,12,0)
// 照射角度
spotLight.angle = Math.PI / 6
// 边缘虚化
spotLight.penumbra = 0.2
spotLight.castShadow = true
scene.add(spotLight)
scene.add(spotLight.target)
// 辅助查看照射范围
const spotHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotHelper)
适用场景
- 舞台追光灯
- 夜视探照灯
- 游戏密室射灯
- 展厅展品聚焦打光
5. 区域光 RectAreaLight 面光源
作用
矩形平面发光，模拟窗户、屏幕、长条灯带必须引入对应插件
import { RectAreaLight } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/lights/RectAreaLight.js'
import { RectAreaLightHelper } from 'https://cdn.jsdelivr.net/npm/three@0.160/examples/jsm/helpers/RectAreaLightHelper.js'
// 代码
const rectLight = new RectAreaLight(0xffffff, 2, 10, 6)
rectLight.position.set(0,6,5)
// 朝向
rectLight.lookAt(0,0,0)
scene.add(rectLight)
scene.add(new RectAreaLightHelper(rectLight))
限制
只对 MeshStandardMaterial / MeshPhysicalMaterial 生效
适用场景
- 落地窗自然光
- 室内大屏发光
- 长条霓虹灯带
- 摄影棚柔光箱
二、五大主流行业场景 整套光源配置
场景 1：户外白天园区 / 地图沙盘
搭配：环境光 + 平行太阳光
// 暗部补光
const ambient = new THREE.AmbientLight(0xcce0ff, 0.25)
scene.add(ambient)
// 正午太阳光
const sun = new THREE.DirectionalLight(0xfffffa, 0.8)
sun.position.set(15,20,15)
sun.castShadow = true
scene.add(sun)
风格：明亮通透，阴影清晰
场景 2：夜晚城市 / 夜景可视化
搭配：低亮度环境光 + 多彩色点光源
const ambient = new THREE.AmbientLight(0x222244, 0.1)
scene.add(ambient)
// 暖黄路灯
const streetLight = new THREE.PointLight(0xffdd66, 0.8, 25)
streetLight.position.set(8,6,0)
scene.add(streetLight)
// 冷色氛围灯
const coolLight = new THREE.PointLight(0x66aaff, 0.6, 20)
coolLight.position.set(-8,6,5)
scene.add(coolLight)
风格：昏暗氛围感，冷暖撞色
场景 3：室内居家 / 房间场景
搭配：环境光 + 主平行光 + 顶部点光
const ambient = new THREE.AmbientLight(0xffffff, 0.3)
scene.add(ambient)
// 窗外自然光
const windowLight = new THREE.DirectionalLight(0xfff8e8, 0.6)
windowLight.position.set(12,10,5)
scene.add(windowLight)
// 室内顶灯
const topLight = new THREE.PointLight(0xfff2cc, 0.7, 30)
topLight.position.set(0,9,0)
scene.add(topLight)
场景 4：科技赛博朋克场景
搭配：极低环境光 + 红蓝聚光 + 点光
const ambient = new THREE.AmbientLight(0x111122, 0.08)
scene.add(ambient)
// 蓝色聚光
const blueSpot = new THREE.SpotLight(0x0088ff, 0.9)
blueSpot.position.set(10,10,0)
blueSpot.angle = Math.PI/5
scene.add(blueSpot)
// 红色氛围点光
const redPoint = new THREE.PointLight(0xff2255, 0.7, 22)
redPoint.position.set(-10,5,8)
scene.add(redPoint)
场景 5：产品写实渲染（珠宝 / 汽车 / 数码）
搭配：环境柔光 + 主平行光 + 补光
// 基础环境
const ambient = new THREE.AmbientLight(0xffffff, 0.2)
scene.add(ambient)
// 主打光
const mainLight = new THREE.DirectionalLight(0xffffff, 0.85)
mainLight.position.set(12,15,10)
mainLight.castShadow = true
scene.add(mainLight)
// 暗部补光（弱光提亮阴影）
const fillLight = new THREE.DirectionalLight(0xeeeeee, 0.3)
fillLight.position.set(-10,8,5)
scene.add(fillLight)
三、核心总结规则
- 主光源优先用平行光，做层次阴影
- 氛围点缀用点光源，不要大面积做主光
- 聚焦效果用聚光灯
- 平面发光用区域光
- 所有场景必带环境光，防止死黑
- 自定义
ShaderMaterial不受场景灯光影响，需自己在 GLSL 写光照 - 追求流畅：移动端尽量少开多光源 + 阴影
