在@react-three/fiber中如何为SpotLight阴影相机创建Helper辅助器

有两种简单的实现方式，都不需要额外修改SpotLight组件的结构：

方案1：手动管理辅助器（灵活可控） #

直接通过聚光灯的ref获取阴影相机实例，手动创建、挂载、清理辅助器：

import { useRef, useEffect } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import * as THREE from 'three'

// 组件内部逻辑
const sLightRef = useRef()
const shadowCamHelperRef = useRef()
const { scene } = useThree()

useEffect(() => {
  if (!sLightRef.current) return
  // 直接从聚光灯实例上获取阴影相机
  const shadowCamera = sLightRef.current.shadow.camera
  shadowCamHelperRef.current = new THREE.CameraHelper(shadowCamera)
  scene.add(shadowCamHelperRef.current)

  // 组件卸载时清理资源
  return () => {
    if (shadowCamHelperRef.current) {
      scene.remove(shadowCamHelperRef.current)
      shadowCamHelperRef.current.dispose()
    }
  }
}, [scene])

// 若阴影相机参数会动态变化，需每帧更新辅助器
useFrame(() => {
  shadowCamHelperRef.current?.update()
})

return (
  <spotLight
    castShadow
    ref={sLightRef}
    position={[0, 2, 2]}
    args={["#fff", 0.4, 10, Math.PI * 0.3]}
  />
)

方案2：复用useHelper（代码更简洁） #

自己构造一个指向阴影相机的ref，直接传给useHelper使用，框架会自动处理挂载、更新、清理逻辑：

import { useRef, useEffect } from 'react'
import { useHelper } from '@react-three/fiber'
import * as THREE from 'three'

// 组件内部逻辑
const sLightRef = useRef()
const shadowCamRef = useRef()

// 原有聚光灯辅助器
useHelper(sLightRef, THREE.SpotLightHelper)
// 阴影相机辅助器
useHelper(shadowCamRef, THREE.CameraHelper)

useEffect(() => {
  // 聚光灯挂载后，把阴影相机实例绑定到自定义ref上
  if (sLightRef.current) {
    shadowCamRef.current = sLightRef.current.shadow.camera
  }
}, [])

return (
  <spotLight
    castShadow
    ref={sLightRef}
    position={[0, 2, 2]}
    args={["#fff", 0.4, 10, Math.PI * 0.3]}
  />
)

两种方案都可以正常工作，如果你不需要自定义辅助器的挂载逻辑，优先选方案2即可。

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