React 增加hdr环境贴图和背景图片的方法

React 增加hdr环境贴图和背景图片的方法：

import React, { Suspense, useEffect } from 'react'
import { Canvas, useThree, useLoader  } from '@react-three/fiber'
import * as THREE from 'three'
import { OrbitControls } from '@react-three/drei'
import { RGBELoader } from 'three/examples/jsm/loaders/'

import Model from './components/Model'

const HDRI = './adams_place_bridge_4k.hdr'

const Env = () => {
  const { gl, scene } = useThree()
  const pmremGenerator = new (gl)
  const loader = new RGBELoader()
  ()
  ()

  useEffect(() => {
    (HDRI, texture => {
      const envMap = (texture).texture

       = envMap
      // one can also set  to envMap here

      ()
      ()
    })
  }, [scene, loader, pmremGenerator])

  return null
}

const  SkyBox = () => {
  const { scene } = useThree();
  const loader = new RGBELoader();
  useEffect(() => {
    (HDRI, texture => {
       = ;
       = ;
       = ;
       = ;
       = true;

       = texture;
    });
  }, [scene, loader])
  return null;
}



const OnlineConfigurator = (props) => {
  return (
    <Canvas style={{ width: '100vw', height: '100vh' }}  >
      <ambientLight intensity={0.4} />

      <Suspense fallback={null}>
        <Env />
        <SkyBox />
        <Model  {...props} />
        {/* <Environment preset={null}  files={['/shared-assets/environments/aircraft_workshop_01_1k.hdr']} /> */}
        {/* <Environment preset="sunset" background /> */}
        <OrbitControls enableZoom={true} enablePan={true} enableRotate={true} enabled={true} />
      </Suspense>
    </Canvas>
  )
}

参考：http://vr./