three-drei场景加载模型时Environment组件渲染异常问题

该异常是@react-three/drei的Environment组件和异步加载的模型组件存在渲染时序冲突导致的：

• 硬刷新页面时，Environment内部的PMREM环境贴图生成逻辑会提前执行，此时Model组件的网格、材质还没完成初始化挂载，组件捕获的环境源不完整，最终生成的环境贴图错乱
• 自定义的环境球体嵌套在Environment组件内部时，组件会默认把所有子节点作为环境源烘焙，异步加载的模型不会触发组件的重烘焙流程，就会出现首次加载异常
• Vite热更新、状态变更触发重渲染时，模型资源已经存在于缓存中，Environment执行烘焙时所有场景资源都已挂载完成，因此渲染效果正常
• 移除Model组件后没有异步加载流程，时序冲突消失，因此Environment可以正常工作

按优先级从高到低选择即可：

方案1：拆分背景网格和Environment职责（推荐） #

Environment组件的核心作用是生成环境光照贴图，不需要把自定义背景网格嵌套在组件内部。直接把背景球体挪到组件外层，Environment单独负责环境光照生成即可：

const Three = () => {
  return (
    <>
        <PerspectiveCamera makeDefault position={[0,3,10]} />
        <OrbitControls  />
        <directionalLight args={[0xffffff, .5]} position={[-5,20,0]} castShadow />
        <spotLight args={[0xffffff]} position={[0,10,0]} castShadow />

        <Model scale={0.5} />
        {/* 自定义背景球体直接放在场景中，无需嵌套在Environment内 */}
        <mesh scale={100}>
          <sphereGeometry args={[1, 64, 64]} />
          <meshBasicMaterial side={THREE.BackSide} />
        </mesh>
        {/* Environment仅负责环境光照生成，不需要包裹自定义网格 */}
        <Environment />
    </>
  )
}

如果需要用Environment同时控制场景背景，直接使用组件内置的环境预设或传入自定义环境贴图文件即可，不需要手动写球体网格：

// 示例：使用内置城市环境预设同时作为光照源和背景
<Environment preset="city" background />

方案2：等模型加载完成后再挂载Environment #

如果确实需要用自定义嵌套网格作为Environment的环境源，增加加载状态判断，等模型完全加载就绪后再渲染Environment组件：

import { useProgress } from '@react-three/drei'

const Three = () => {
  const { progress } = useProgress()
  const isSceneReady = progress === 100

  return (
    <>
        <PerspectiveCamera makeDefault position={[0,3,10]} />
        <OrbitControls  />
        <directionalLight args={[0xffffff, .5]} position={[-5,20,0]} castShadow />
        <spotLight args={[0xffffff]} position={[0,10,0]} castShadow />

        <Model scale={0.5} />
      
        {isSceneReady && (
          <Environment background>
            <mesh scale={100}>
              <sphereGeometry args={[1, 64, 64]} />
              <meshBasicMaterial side={THREE.BackSide} />
            </mesh>
          </Environment>
        )}
    </>
  )
}

方案3：强制Environment在模型加载完成后重挂载 #

如果不想调整现有组件结构，可以给Environment绑定一个和模型加载状态关联的key值，等模型加载完成后强制组件重走挂载、烘焙流程，也能解决时序问题。

额外排查点：如果Model组件内部存在useEffect动态修改材质envMap属性、手动覆盖场景environment配置的逻辑，也会在首次加载时干扰Environment的贴图注入，需要同步排查。

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