three.js 编辑器的灯光与阴影系统
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 中最容易踩坑的照明配置变成了一套低代码、可视化、可分享的能力。打好光场景才有了灵魂。
