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>
参考：http://vr.51565.net/
                    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 } 
    margin: 0;
    overflow: hidden;
    background: url("background/background.png") center no-repeat;
    background-size:cover;
这种方法要设置渲染器的透明度，即：
rend...
我把现在的Web前端页面动效分为四个等级
     1:  简单的css,js,jquery的旋转, 缩放, 位移,  淡入淡出, 拉伸, 渐变等效果;
     2:  通过Ae或者其他软件导出的序列帧(或者图片),和一些简单的特效js(大多是canvas);
     3:  通过大量数据(json)来定义的动作,包含(人物,地图等,可包含简单的3d
可以从上面下载需要的纹理 介于浏览器需要考虑速度 清晰度不易选择过大2k即可 大概6M
获取HDRI图片后 并不能直接放到THREE中使用需要将HDRI 分割成六份
这个网站帮我们处理
https://matheowis.github.io/HDRI-to-CubeMap/
使用 步骤 1 上传下载的HDRI图 如图分割了六个面
2 点击save 选