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

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 (
    
      

      
        
        
        
        {/*  */}
        {/*  */}
        
      
    
  )
}

参考：http://vr.51565.net/