mcpField
T
threejs-lighting

threejs-lighting

github.com/akillness创意与媒体5360 次安装今天更新
代码仓库

关于 threejs-lighting

Three.js Lighting 是用于在 Three.js 场景中选择灯光、配置阴影和添加基于图像照明的技能。它帮助开发者为 PBR 材质调整照明，同时权衡视觉效果与渲染成本。

主要功能

  1. 01按场景需求选择灯光
  2. 02配置阴影贴图与范围
  3. 03设置基于环境的照明
  4. 04诊断常见照明瑕疵
  5. 05评估照明质量成本

适用场景

  1. 01用太阳光照亮户外场景
  2. 02构建带环境反射的产品场景
  3. 03修复阴影痤疮或过曝
  4. 04为目标硬件调整阴影质量

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/akillness/jeo-skills --skill threejs-lighting

安装后在 Claude Code 中输入/threejs-lighting确认已加载。

附带文件SKILL.toonevals/evals.json

详细介绍

Three.js 光照

此技能用于选择光源、配置阴影行为和基于图像的照明。将 PBR 表面设置交给 threejs-materials，将 HDR／环境资源设置交给 threejs-textures，将屏幕空间效果交给 threejs-postprocessing。

何时使用此技能

  • 通过具有物理意义的直接光照和环境光照来照亮场景
  • 配置方向光、点光或聚光灯阴影，同时避免质量开销失控
  • 为 PBR 反射和漫射照明设置 HDR 环境
  • 排查光照过黑、过平、过曝、容易产生阴影瑕疵或性能开销过大的问题

说明

步骤 1：从材质和曝光的实际情况入手
  1. 确认网格使用了会对光照产生响应的材质，例如 MeshStandardMaterial；不受光照影响的 MeshBasicMaterial 无法体现光照变化。
  2. 在使用任意光照值进行补偿之前，先确定渲染器的颜色和色调设置。
  3. 判断场景需要直接光照、基于图像的照明，还是两者兼有。单个环境光会掩盖形状；应谨慎使用，将其作为补光，而不是万能修复手段。
步骤 2：选择最精简的光源模型
视觉需求默认选项
类似太阳／月亮的方向光源DirectionalLight
局部灯泡或小型发光体PointLight
带衰减的光锥／投影灯SpotLight
柔和的天空／地面补光HemisphereLight
大型摄影棚面光源RectAreaLight
PBR 反射和环境响应环境贴图／IBL
const key = new THREE.DirectionalLight(0xffffff, 3);
key.position.set(4, 6, 3);
key.castShadow = true;
scene.add(key);
scene.add(new THREE.HemisphereLight(0xcfe8ff, 0x223344, 1));

设置期间使用辅助对象，投入生产视图前将其移除或设置为受控启用。

步骤 3：有意设置阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

mesh.castShadow = true;
mesh.receiveShadow = true;
key.shadow.mapSize.set(1024, 1024);
key.shadow.camera.near = 0.5;
key.shadow.camera.far = 30;

将阴影相机／视锥体缩紧到真实的投射物和接收物范围。只有在目标硬件上完成性能分析后，才增加贴图尺寸、投射阴影的光源数量或更新频率。排查阴影痤疮／悬浮现象时，应检查几何体比例、偏移和法线偏移，而不是盲目增大数值，直到瑕疵反转。

步骤 4：在 PBR 需要时添加基于图像的照明

通过适用于所安装 Three.js 版本的加载器／PMREM 流程加载并预处理 HDR／等距柱状资源。设置 scene.environment 以影响材质响应；如果还需要显示环境，则单独设置 scene.background。

步骤 5：验证视觉效果和预算
  • 对比关闭／开启阴影、仅使用直接光照以及仅使用 IBL 时的材质响应。
  • 测试阴影边缘、移动的投射物以及靠近光源阴影边界的物体。
  • 在提升质量等级之前，先使用真实场景密度在目标设备上进行性能分析。
  • 确认拆卸时通过纹理加载所有者释放由该功能拥有的环境／渲染资源。

示例

小型产品展示

使用主方向光／面光源、低强度补光和环境贴图。不要用许多带阴影的点光源模拟摄影棚中的每一次反弹；PBR 环境光照通常更稳定、开销也更低。

户外场景

使用一个方向光模拟太阳，加入天空／地面半球光，并将阴影相机限制在可视游戏／视图区域内，仅在需要时跟随该区域。

最佳实践

  1. 根据材质响应布光，而不只是为了让截图更亮。
  2. 根据视觉需求，尽可能缩小阴影投射物／接收物范围和阴影视锥体。
  3. 对 PBR 使用环境贴图，而不是叠加多盏环境光。
  4. 先在渲染器级别调整色调映射／曝光，再避免扭曲每盏灯的设置。
  5. 将每次提高阴影质量都视为需要衡量的性能权衡。

参考资料

评论

支持 Markdown