react-three-fiber中SpotLight无法生效问题求助

先看你代码里的几个关键问题：

1. JSX结构语法错误 #

你的组件返回了多个顶层元素，且末尾存在多余的</mesh>标签（无对应起始<mesh>），这会导致React渲染异常，SpotLight可能根本没被正确挂载。

2. SpotLight参数设置不合理 #

• 环境光强度（2.5）远高于SpotLight的强度（1），SpotLight的效果被完全掩盖。
• angle=0.12（约6.87度）光照范围极窄，加上位置[-20,50,10]离目标物体太远，大概率照不到电脑模型。
• shadow-mapSize属性写法错误，React Three Fiber中需要通过shadow对象配置阴影参数。
• SpotLight默认指向原点，你的电脑模型不在原点，灯光方向没对准目标。

修改后的代码示例 #

const Computers = ({ isMobile }) => {
  const computer = useGLTF("./desktop_pc/scene.gltf")
  const computerPosition = isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]

  return (
    <group>
      <ambientLight intensity={0.5} />
      <spotLight
        position={[0, 10, 5]}
        angle={0.5}
        penumbra={0.5}
        intensity={5}
        castShadow
        shadow={{ mapSize: { width: 1024, height: 1024 } }}
        target={computerPosition}
      />
      <pointLight intensity={1} />

      <primitive
        object={computer.scene}
        scale={isMobile ? 0.7 : 0.75}
        position={computerPosition}
        rotation={[-0.01, -0.2, -0.1]}
      />
    </group>
  )
}

关键修改说明 #

• 用<group>包裹所有元素，修复顶层元素数量问题，移除多余的</mesh>。
• 降低ambientLight强度到0.5，避免掩盖SpotLight效果。
• 调整SpotLight位置到[0,10,5]，离电脑模型更近；把angle调到0.5，扩大光照范围。
• 增强SpotLight强度到5，提升可见性。
• 正确配置阴影参数，用shadow={{ mapSize: {...} }}替代错误的shadow-mapSize。
• 设置target为电脑模型的位置，让灯光准确对准目标。

你可以根据实际场景再微调位置、角度和强度，先确保灯光能覆盖到模型，再逐步优化效果。

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