Three-fiber聚光灯配置问题：设置指向时报错且无法垂直向下

报错原因 #

你直接给spotLight的target属性传坐标数组会触发报错，因为在React Three Fiber中，SpotLight的target要求绑定一个Three.js的Object3D实例（比如空Mesh、Group），而非单纯的坐标数组，这就是导致TypeError: Cannot read properties of undefined (reading 'elements')的根源。

两种可行的解决方法 #

方法一：通过lookAt方法设置指向 #

利用useRef获取聚光灯实例，再在useEffect中调用lookAt方法指定垂直向下的目标点。比如你的灯位置是[0,20,-20]，垂直向下的目标点可以设为[0,0,-20]（保持x、z坐标与灯一致，仅y轴降低，确保方向纯向下）。

import { useRef, useEffect } from 'react';
import { SpotLight } from '@react-three/fiber';

function DownwardSpotLight() {
  const spotLightRef = useRef(null);

  useEffect(() => {
    if (spotLightRef.current) {
      // 指向垂直向下的点
      spotLightRef.current.lookAt(0, 0, -20);
      // 若要指向世界空间绝对下方（不受灯位置影响），可改为 lookAt(0, -Infinity, 0)
    }
  }, []);

  return (
    <spotLight
      ref={spotLightRef}
      position={[0, 20, -20]}
      intensity={1.5}
      color="#fff"
      penumbra={0.5}
      castShadow={false}
    />
  );
}

方法二：直接设置旋转属性 #

Three.js中聚光灯默认朝向-z轴（0,0,-1方向），要让它垂直向下（朝向-y轴），只需绕x轴旋转Math.PI/2（90度）即可，这种方法无需处理target，更简洁。

import { SpotLight } from '@react-three/fiber';

function DownwardSpotLight() {
  return (
    <spotLight
      position={[0, 20, -20]}
      intensity={1.5}
      color="#fff"
      penumbra={0.5}
      castShadow={false}
      rotation={[Math.PI / 2, 0, 0]}
    />
  );
}

可选：使用target属性的正确方式 #

如果一定要用target属性，需要创建一个Object3D实例作为目标对象，并设置其位置为垂直向下的点：

import { Object3D } from 'three';
import { useRef, useEffect } from 'react';
import { SpotLight } from '@react-three/fiber';

function DownwardSpotLight() {
  const targetRef = useRef(new Object3D());

  useEffect(() => {
    // 设置目标点位置为垂直向下的坐标
    targetRef.current.position.set(0, 0, -20);
  }, []);

  return (
    <>
      <spotLight
        position={[0, 20, -20]}
        intensity={1.5}
        color="#fff"
        penumbra={0.5}
        castShadow={false}
        target={targetRef.current}
      />
      {/* 可选：渲染目标点方便调试，不需要可删除 */}
      <mesh position={targetRef.current.position}>
        <sphereGeometry args={[0.1]} />
        <meshBasicMaterial color="red" />
      </mesh>
    </>
  );
}

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