前言：光源是场景的灵魂

说实话，没光的Three.js场景就跟没盐的汤一样淡而无味。

哈哈，我一开始也是这么想的，结果灯光一开，模型立马有了呼吸感。

咱就是说这事儿得从光源种类说起。

环境光是Zui基础的光，它把整个场景浸在一个柔和的色彩里。

别指望它Neng产生阴影，毕竟它是“全局照明”。

代码里只要几行，就Neng让黑暗瞬间变亮。

平行光模拟远处的光源，比如太阳或者月亮。

它Ke以投射阴影，是室外白天必备。

记得把shadow.camera调好，否则阴影会跑到天际去。

点光从一点向四面八方发射，适合灯具、火把之类。

距离太远亮度会迅速衰减，别把它放在千里之外。

Ru果想要geng真实Ke以打开castShadow，但性Neng会受影响。

聚光灯有锥形照射范围，常用来Zuo追光或者舞台灯效。

angle决定锥体宽度，penumbra控制边缘柔和度。

配合SpotLightHelper，你Ke以直观kan到灯锥形状。

RectAreaLight发出均匀平面的光，用来模拟窗户或屏幕hen合适。

import { RectAreaLight } from 'https://cdn.jsdelivr.net/npm/three@/examples/jsm/lights/RectAreaLight.js' import { RectAreaLightHelper } from 'https://cdn.jsdelivr.net/npm/three@/examples/jsm/helpers/RectAreaLightHelper.js' // 代码 const rectLight = new RectAreaLight rectLight.position.set rectLight.lookAt scene.add scene.add)

先抛出一个常用组合：环境光 + 平行光 + 点光 + 聚光灯。

环境光负责整体亮度，让暗部不至于完全黑掉；

平行光提供主方向阴影，让模型有体积感；

点光补充局部高亮，比如桌面上的台灯；

聚光灯再来一段戏剧性的追踪效果，完美！

极低环境光 + 红蓝聚光 + 点状霓虹灯 + 区域面灯

// 场景初始化
const scene = new THREE.Scene
const camera = new THREE.PerspectiveCamera
camera.position.set
const renderer = new THREE.WebGLRenderer
renderer.setSize
document.body.appendChild
// 环境低亮
const ambient = new THREE.AmbientLight
scene.add
// 红蓝聚光
const redSpot = new THREE.SpotLight
redSpot.position.set
redSpot.angle = Math.PI/6
redSpot.penumbra = 0.5
scene.add
const blueSpot = new THREE.SpotLight
blueSpot.position.set
blueSpot.angle = Math.PI/6
blueSpot.penumbra = 0.5
scene.add
// 点状霓虹
const neonPoint = new THREE.PointLight
neonPoint.position.set
scene.add
// 区域面灯
import { RectAreaLight } from 'https://cdn.jsdelivr.net/npm/three@/examples/jsm/lights/RectAreaLight.js'
import { RectAreaLightHelper } from 'https://cdn.jsdelivr.net/npm/three@/examples/jsm/helpers/RectAreaLightHelper.js'
const adRect = new RectAreaLight
adRect.position.set
adRect.lookAt
scene.add
scene.add)
// 渲染循环
function animate{
    requestAnimationFrame
    renderer.render
}
animate

#1 开启shadow.mapSize，提高分辨率，但别太高，会炸显存。

#2 调整shadow.bias防止自相交产生“条纹”。 PBR材质配合多重采样

PBR材质对灯光反应geng自然尤其是金属和粗糙度参数调好后高光会geng闪耀。 顺带聊聊“为什么百度不收录”？

#1 光源太多会卡帧： 移动端尽量控制在三盏以内，否则GPU负担过重。

#2 阴影范围要合理： Ru果shadow.camera太大，会导致阴影模糊失真。

#3 材质兼容性： 只有MeshStandardMaterial / MeshPhysicalMaterial才Neng真正受益于PBR和EnvMap。

说实话，这篇文章写完，我dou快忘记喝水了——害，那口渴得跟沙漠似的。哈哈！

Ru果你觉得还有哪里Ke以优化，不妨自己动手改改代码，把参数调到极致，然后再去GitHubkankan别人怎么玩儿。你懂的，多交流多尝试才是王道。