Three.js emissive自发光材质无法投射阴影及产生反射问题咨询

核心原因 #

Three.js 默认渲染管线中，材质的 emissive 属性仅控制材质自身不受场景光照影响的固有色输出，不会向场景发射实际参与计算的光线，因此默认无法照亮其他物体、投射阴影、被其他物体反射，不存在可以直接开启该效果的内置配置项，需要根据性能预算和效果要求选择对应实现方案。

可选实现方案 #

1. 低成本近似方案（性能优先，适合大场景/低性能设备）

• 给自发光物体绑定匹配的实时光源：小体积发光体用 PointLight，面状发光体用 RectAreaLight，长条形发光体用线性排布的点光源或聚光灯，将光源颜色与自发光颜色对齐，光源强度和自发光强度成正比，开启光源的 castShadow 属性即可实现阴影投射。可以写遍历逻辑自动匹配：加载完GLTF后遍历所有mesh，对带自发光材质的mesh，自动在其包围盒中心生成对应参数的光源，设置合理的光照衰减范围控制性能开销。
• 反射效果直接通过环境贴图实现：将自发光物体纳入环境贴图的烘焙范围，场景内其他PBR材质会自动从环境贴图中采样到自发光物体的反射信息，不需要额外计算。
• 不需要精准阴影的场景可以直接用接触阴影做近似，额外开销极低。
• 基于你使用的@react-three/fiber、@react-three/drei技术栈，上述光源、环境贴图、接触阴影能力都有现成封装，不需要手动对接three.js底层对象，遍历mesh自动生成光源的逻辑放在useEffect中执行即可。

2. 效果性能平衡方案（适合大多数交互场景）

• 漫反射光照可以用光照探针实现：将自发光物体的光照信息烘焙到光照探针中，为周围物体提供自然的漫反射环境光，性能开销几乎可以忽略，缺点是无法投射锐利的定向阴影。
• 需要软阴影、间接光反弹、自然反射效果可以开启屏幕空间全局光照（SSGI），后处理阶段会自动识别屏幕内的自发光高亮区域，计算对应的光照影响，效果接近物理真实的全局光照，性能开销远低于多实时光源方案。注意该方案是屏幕空间效果，屏幕外的发光物体不会产生光照，边缘区域可能出现少量瑕疵。

3. 物理正确方案（效果优先，适合静态展示/产品渲染）

• 换用GPU路径追踪渲染器，这类渲染器遵循物理光学规则，会自动计算所有自发光材质发出的光线传播路径，自然生成真实的软阴影、多次光线反弹、完美反射效果，不需要手动添加任何辅助光源，缺点是渲染开销高，不适合高帧率要求的强交互动态场景。
• 完全静态的场景可以直接将自发光产生的光照、阴影全部烘焙到光照贴图中，运行时零额外性能开销，效果精度最高。

注意事项 #

不需要从零编写自定义着色器实现该需求，常规前向渲染管线本身不支持全局光照计算，硬写自定义着色器的实现复杂度远高于使用上述成熟方案。

内容的提问来源于stack exchange，提问作者Antoni Kiszka