Three.js中HemisphereLight与PointLight不显示及React警告求助

一、React警告：frameLoop属性无法识别 #

直接修改Canvas组件的属性名，将**frameLoop改为全小写的frameloop**即可消除警告。@react-three/fiber的Canvas组件接受的参数是全小写的frameloop，大写的L会被React误判为DOM原生属性。

修复后的代码片段：

<Canvas
  frameloop='demand'
  shadows
  camera={{position: [20, 3, 5], fov: 25}}
  gl={{ preserveDrawingBuffer: true}}
>
  {/* 其他内容保持不变 */}
</Canvas>

二、HemisphereLight和PointLight不生效问题 #

核心原因 #

你把光源嵌套在了<mesh>标签内部，这是错误的。在Three.js中，光源是场景的直接子元素，不能作为网格对象的子节点，否则会被限制在网格的局部空间，无法正确作用于场景内的物体。

修复步骤 #

1. 调整光源层级：将光源从<mesh>中移出，作为组件的顶级元素：

const Computers = () => {
  const computer = useGLTF('./desktop_pc/scene.gltf');

  return (
    <>
      {/* 光源直接属于场景，而非mesh子元素 */}
      <hemisphereLight intensity={0.5} groundColor="#333" />
      <pointLight intensity={2} position={[0, 5, 0]} />
      <spotLight
        position={[-10 ,70, 10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-mapSize={1024}
      />
      {/* 模型网格单独放置 */}
      <primitive 
        object={computer.scene}
        scale={0.75}
        position={[1, -5.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
        receiveShadow
        castShadow
      />
    </>
  )
}

2. 优化光源参数增强效果：

• HemisphereLight：将intensity从0.15调高到0.5（可根据视觉效果微调），groundColor从纯黑改为深灰色#333，避免地面反射光完全缺失；
• PointLight：添加position属性（如模型上方[0,5,0]），并调高intensity到2，让光照效果更直观；
• 给模型primitive添加receiveShadow和castShadow，确保模型能与阴影系统交互。

3. 模型材质检查（可选）：
   如果调整后仍无光照效果，可能是GLTF模型使用了MeshBasicMaterial（不受光照影响），可加载后替换为标准材质：

import * as THREE from 'three';

// 在Computers组件内添加useEffect
useEffect(() => {
  computer.scene.traverse((child) => {
    if (child.isMesh) {
      child.material = new THREE.MeshStandardMaterial({
        map: child.material.map,
        color: child.material.color
      });
      child.castShadow = true;
      child.receiveShadow = true;
    }
  });
}, [computer]);

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