Three.js使用PointerLockControls绑定SpotLight实现定向手电筒效果问题

问题原因 #

你之前的实现存在两个核心错误导致光束发散：

• 聚光灯照射角度设置错误：0.8*Math.PI超出了SpotLight的angle参数上限（最大为Math.PI/2，即90度半角），被自动截断为最大照射范围，接近半球形发散，无法形成窄定向光束
• 聚光灯目标点（target）相对位置错误：未设置target的相对位置时，target默认和光源位置重合，光源相当于照射自身位置，光线向四周扩散

正确实现代码 #

// 初始化指针锁定控制
controls = new PointerLockControls(camera, document.body);
scene.add(controls.getObject());

// 初始化聚光灯，缩小照射角度实现定向效果
const flashlight = new THREE.SpotLight(
  0xffffff,
  7, // 光照强度
  50, // 最大照射距离
  0.1 * Math.PI, // 半照射角度，范围0到Math.PI/2，数值越小光束越窄
  0.2, // 边缘半影柔和度，可按需调整
  1 // 光照衰减系数
);
// 光源绑定到控制对象，跟随相机移动旋转
controls.getObject().add(flashlight);

// 设置目标点永远在相机正前方10单位位置（Three.js相机默认朝向z轴负方向）
flashlight.target.position.set(0, 0, -10);
// 目标点也绑定到控制对象，和相机同步运动
controls.getObject().add(flashlight.target);

// 调试可选：添加光束辅助线直观查看照射范围
// const lightHelper = new THREE.SpotLightHelper(flashlight);
// scene.add(lightHelper);

补充说明 #

如果需要实现带体积感的可见光束效果，可以额外创建锥形Mesh配合半透明发光纹理，和聚光灯绑定到同一父节点即可实现同步运动。

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