在三 - drei中的SA模型时，环境可能不会呈现

Question

那就是我如何渲染我的环境的

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 background>
          <mesh scale={100}>
            <sphereGeometry args={[1, 64, 64]} />
            <meshBasicMaterial  side={THREE.BackSide} />
          </mesh>
        </Environment>


    </>
  )
}

export default Three  

。

function App() {
  return (
    <div>
      <Canvas 
      style={{height:'100vh',backgroundColor:'transparent'}}
      shadows
      >
        <Three />
        
      </Canvas>
    </div>
  )
}

export default App

方式

在保存vite时更改状态或正常刷新后的输出

PS：删除模型时，环境正常 我尝试使用不同的压缩，不同的模型仍然存在相同的问题，有人知道是什么原因引起了问题吗？