SuperAPI AI 工具集

threejs-lighting

设计与创作

查看项目

更新于 10-15 13:11

技能介绍

用途

本技能面向 Three.js 场景中的光照相关工作,适用于以下场景:添加灯光、配置阴影、搭建基于图像的环境光照(IBL),以及优化光照性能。

主要能力

光源类型

文档列出六种光源及其特性:

  • AmbientLight:均匀照亮所有对象,无方向、无阴影,开销极低。
  • HemisphereLight:天空色到地面色的渐变,适合户外场景,无阴影,开销极低。
  • DirectionalLight:平行光线,模拟太阳等远距离光源,支持阴影,开销低。
  • PointLight:从一点向所有方向发光,类似灯泡,支持阴影,开销中等。
  • SpotLight:锥形光,类似手电筒或舞台灯,支持阴影,开销中等。
  • RectAreaLight:矩形面光源,适合柔和真实的光照,原生不支持阴影(需自定义方案),开销高。

阴影配置

阴影需要三处启用:渲染器(renderer.shadowMap.enabled = true,并可选 PCFSoftShadowMap 等类型)、光源(light.castShadow = true)、对象(mesh.castShadow / receiveShadow)。文档给出各光源的阴影相机参数(正交或透视)、mapSize、bias、normalBias、radius 等设置,并说明阴影贴图类型(BasicShadowMap、PCFShadowMap、PCFSoftShadowMap、VSMShadowMap)的差异。

环境光照(IBL)

使用 RGBELoader 加载 HDR 环境贴图,设置 scene.environment 影响所有 PBR 材质,也可作为背景。文档还介绍用 PMREMGenerator 生成更好的反射,以及使用 CubeTextureLoader 加载立方体贴图作为环境。

光照探针

通过 LightProbeGenerator 从立方体贴图或立方体渲染目标生成 LightProbe,用于环境光照。

常见布光方案

文档提供三点布光(主光、补光、背光加环境光)、户外日光(平行光加半球光)、室内影棚(多个面光源加环境光)三种示例。

光照动画与辅助工具

可用 Clock 实现光源环绕、强度脉动、颜色循环等动画。文档列出 DirectionalLightHelper、PointLightHelper、SpotLightHelper、HemisphereLightHelper、RectAreaLightHelper 等辅助对象,并提示光源变化后调用 update()。

性能优化

建议包括:限制光源数量、静态场景烘焙光照、使用较小的阴影贴图(512–1024 常已足够)、收紧阴影相机视锥、关闭不需要的阴影、使用光照层(layers)控制光源影响范围,以及选择性投射阴影。

使用方式

文档以代码片段形式给出各类光源的创建与属性设置、阴影启用与调参、环境贴图加载、光照探针生成、布光方案与动画循环的写法。RectAreaLight 需先调用 RectAreaLightUniformsLib.init(),且仅适用于 MeshStandardMaterial 与 MeshPhysicalMaterial。

适用场景

适用于 Three.js 3D 场景的灯光搭建与调优,包括户外、室内影棚、产品展示等需要真实光照与阴影的渲染场景。

限制

RectAreaLight 原生不支持阴影,需自定义方案;仅适用于 MeshStandardMaterial 与 MeshPhysicalMaterial。阴影质量与性能需权衡,高分辨率阴影贴图开销较大。文档未提供具体收费、价格或平台信息。