企业官网建设流程全解析

three.js 编辑器的灯光与阴影系统

本文围绕three.js 编辑器（一款基于 Three.js 的 AI 驱动可视化低代码编辑器）展开。

- 🌐 在线预览： https://z2586300277.github.io/threejs-editor/

- 📦 GitHub 开源仓库： https://github.com/z2586300277/three-editor

- 📚 文档地址： https://z2586300277.github.io/three-editor/docs/dist

灯光是 3D 场景的导演，阴影则是让虚拟物体“落地生根”的关键。three.js 编辑器把 Three.js 的六种光源封装成可视化组件，并提供了一键启用阴影、调节阴影质量、控制阴影接收面的完整能力，让非专业用户也能快速打出有层次的光。

六种光源一站式布光

编辑器左侧“灯光”面板内置了环境光、平行光、点光源、聚光灯、半球光和平面光。点击任意一种光源，编辑器会立即在场景原点创建一个对应类型的THREE.Light，并自动附加 TransformControls 以便用户拖动位置。对于需要目标对象的平行光和聚光灯，编辑器还会自动把light.target加入场景，确保光源方向正确。

每种光源的参数都可在右侧面板中实时调整：颜色、强度、距离、衰减、角度、半影等。环境光和半球光负责基础填充照明，平行光模拟太阳，点光源和聚光灯负责局部重点照明，平面光则适合室内展板、灯箱等面光源效果。

阴影的快速启用

three.js 编辑器的阴影系统遵循 Three.js 的经典三段式：光源castShadow、物体castShadow、地面receiveShadow。在添加平行光或聚光灯时，编辑器默认开启castShadow，并把阴影贴图分辨率设为 2048，保证阴影边缘足够锐利。用户可以在对象材质配置中勾选castShadow与receiveShadow，决定哪些物体投射阴影、哪些物体承接阴影。

为了避免阴影失真，编辑器结合了对数深度缓冲与合理的相机裁剪范围。在“渲染配置”面板中，用户还可以开启shadowMap.enabled并选择阴影贴图类型，进一步平衡性能与画质。

灯光的持久化与场景模板

所有灯光对象都会被标记为editorType = 'isLight'，并作为lightCores数组保存到场景 JSON。每个灯光的位置、颜色、强度、是否投射阴影等属性都会序列化，切换场景时完整还原。这种设计让用户可以把精心调好的布光方案保存为模板，在多个项目中复用。

AI 辅助布光

AI 助手可以通过addCoreLight动作添加任意类型的光源，并通过setProps调整颜色、强度、位置与阴影开关。例如用户说“在 (10,10,10) 加一个暖色平行光并开启阴影”，AI 会解析为addCoreLight({ type: '平行光', position: [10,10,10], color: '#ffaa77', intensity: 1.5 })并自动设置castShadow。对于已有灯光，AI 也能批量修改castShadow与receiveShadow。

灯光与组件、材质的协同

three.js 编辑器的灯光系统不仅照亮标准 PBR 材质，还能与 ShaderMaterial 组件协作。例如“磨砂反射的地面”会根据灯光方向计算反射，“告警信标”的透镜自发光强度会随场景整体亮度动态呼吸。当用户切换天空盒或环境贴图时，IBL 与人工光源会自动叠加，形成既有环境反射又有人工重点照明的丰富光影。

代码一瞥

下面是左侧面板创建灯光的核心映射逻辑：

const lightMap = {
'环境光': () => new THREE.AmbientLight(0xffffff, 1), '平行光': () => new THREE.DirectionalLight(0xffffff, 1), '点光源': () => new THREE.PointLight(0xffffff, 1, 0, 0), '聚光灯': () => new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 6, 0, 0), '半球光': () => new THREE.HemisphereLight(0xffffff, 0x000000, 1), '平面光': () => new THREE.RectAreaLight(0xffffff, 1, 100, 100) }; const light = lightMap[v](); if (light.target) scene.add(light.target); light.editorType = 'isLight'; light.name = v; if (point) light.position.copy(point); scene.add(light); transformControls.attach(light);

从一键布光到阴影三要素，从场景模板保存到 AI 自动调光，three.js 编辑器的灯光与阴影系统把 Three.js 中最容易踩坑的照明配置，变成了一套低代码、可视化、可分享的能力。打好光，场景才有了灵魂。