Three.js RectAreaLight在MeshPhongMaterial无反射及OES_texture_half_float报错问题

问题根因 #

1. MeshPhongMaterial本身不支持RectAreaLight的光照计算，three.js当前版本仅MeshStandardMaterial、MeshPhysicalMaterial两类PBR材质原生支持RectAreaLight光照效果
2. OES_texture_half_float是RectAreaLight光照、阴影计算依赖的WebGL扩展，注释相关检测代码会直接导致光照计算无法正常执行
3. 未正确引入RectAreaLight对应的着色器补丁，也是无光照效果的常见原因

修复步骤 #

• 替换材质：将场景中的MeshPhongMaterial替换为支持RectAreaLight的PBR材质，示例代码：

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.4,
  metalness: 0.6
})

• 引入并初始化RectAreaLight着色器库：

import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js'
RectAreaLightUniformsLib.init()

• 修复OES_texture_half_float报错：不要注释扩展检测代码，在Renderer初始化完成后主动获取对应的扩展即可，原生three.js写法：

const renderer = new THREE.WebGLRenderer()
renderer.extensions.get('OES_texture_half_float')

如果是react-three-fiber环境，可以通过useThree钩子获取renderer实例后执行上述代码

• 校验灯光参数：确认RectAreaLight的宽度、高度、强度参数配置合理，同时RectAreaLight有明确的发光朝向，可通过light.lookAt(场景对象位置)调整发光面朝向目标对象

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