React Three.js 增加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/RGBELoader.js'

import Model from './components/Model'

const HDRI = './adams_place_bridge_4k.hdr'

const Env = () => {
  const { gl, scene } = useThree()
  const pmremGenerator = new THREE.PMREMGenerator(gl)
  const loader = new RGBELoader()
  loader.setDataType(THREE.UnsignedByteType)
  pmremGenerator.compileEquirectangularShader()

  useEffect(() => {
    loader.load(HDRI, texture => {
      const envMap = pmremGenerator.fromEquirectangular(texture).texture

      scene.environment = envMap
      // one can also set scene.background to envMap here

      texture.dispose()
      pmremGenerator.dispose()
    })
  }, [scene, loader, pmremGenerator])

  return null
}

const  SkyBox = () => {
  const { scene } = useThree();
  const loader = new RGBELoader();
  useEffect(() => {
    loader.load(HDRI, texture => {
      texture.mapping = THREE.EquirectangularReflectionMapping;
      texture.encoding = THREE.RGBEEncoding;
      texture.minFilter = THREE.NearestFilter;
      texture.magFilter = THREE.NearestFilter;
      texture.flipY = true;

      scene.background = 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={['https://modelviewer.dev/shared-assets/environments/aircraft_workshop_01_1k.hdr']} /> */}
        {/* <Environment preset="sunset" background /> */}
        <OrbitControls enableZoom={true} enablePan={true} enableRotate={true} enabled={true} />
      </Suspense>
    </Canvas>
  )
}