Three.js中灯光无法对3D模型产生预期效果的问题求助

核心原因排查与修复步骤 #

1. 检查并替换模型材质 #

GLTF模型导出时可能使用了MeshBasicMaterial（这种材质完全不响应光照），或材质配置了忽略光照的属性。你需要遍历模型，将材质替换为支持光照的MeshStandardMaterial或MeshPhysicalMaterial：

import { useGLTF } from '@react-three/drei'
import * as THREE from 'three'

function ComputerModel() {
  const { scene } = useGLTF('/computer.glb')
  
  // 遍历模型替换材质并启用阴影
  scene.traverse((child) => {
    if (child.isMesh) {
      child.material = new THREE.MeshStandardMaterial({
        map: child.material.map, // 保留原纹理
        roughness: 0.6, // 控制表面反光程度
        metalness: 0.2, // 调整金属质感
        color: child.material.color,
        transparent: child.material.transparent,
        opacity: child.material.opacity
      })
      child.receiveShadow = true
      child.castShadow = true
    }
  })

  return <primitive object={scene} />
}

2. 调整灯光层级与位置 #

不要将灯光作为承载模型的mesh子元素，避免继承模型的局部变换导致灯光被包裹在模型内部。将灯光放在场景根级别或模型的父容器中：

function Computers() {
  return (
    <group>
      {/* 半球光：提供环境照明，地面色设为黑色 */}
      <hemisphereLight 
        skyColor="#f0f0f0" 
        groundColor="#000000" 
        intensity={0.7} 
        position={[0, 4, 0]} 
      />
      {/* 点光：模拟局部光源，启用阴影 */}
      <pointLight 
        color="#ffffff" 
        intensity={2} 
        position={[3, 3, 3]} 
        castShadow={true}
        shadow-mapSize-width={1024}
        shadow-mapSize-height={1024}
      />
      {/* 加载的电脑模型 */}
      <ComputerModel />
    </group>
  )
}

3. 启用全局阴影渲染 #

在根场景组件中，开启Three.js渲染器的阴影映射功能：

import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <Canvas
      shadows // 启用全局阴影
      camera={{ position: [6, 6, 12], fov: 40 }}
    >
      <Computers />
    </Canvas>
  )
}

4. 快速验证灯光有效性 #

如果仍无效果，可以添加一个测试立方体，验证灯光是否正常工作：

<mesh position={[0, 0, 4]} castShadow receiveShadow>
  <boxGeometry />
  <meshStandardMaterial color="#ff4444" />
</mesh>

若立方体有光影效果，说明问题出在模型材质或层级设置上；若立方体也无效果，检查灯光强度、位置是否合理，或相机是否能覆盖灯光照射范围。

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