vue 使用three.js加载hdr

首先，需要安装 `three.js` 和 `three/examples/jsm/loaders/RGBELoader.js`。

然后，可以使用以下代码加载 HDR：

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene()

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 0, 5)

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    this.$refs.container.appendChild(renderer.domElement)

    // 创建加载器
    const loader = new RGBELoader()

    // 加载 HDR
    loader.load('path/to/hdr.hdr', (texture) => {
      // 创建 HDRCubeTexture
      const hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture).texture

      // 释放资源
      texture.dispose()
      pmremGenerator.dispose()

      // 创建立方体贴图材质
      const material = new THREE.MeshLambertMaterial({
        envMap: hdrCubeRenderTarget
      })

      // 创建立方体
      const geometry = new THREE.BoxGeometry()
      const cube = new THREE.Mesh(geometry, material)
      scene.add(cube)

      // 渲染场景
      renderer.render(scene, camera)
    })

    // 创建 PMREMGenerator
    const pmremGenerator = new THREE.PMREMGenerator(renderer)
    pmremGenerator.compileEquirectangularShader()
  }
}
</script>

注意：`PMREMGenerator` 需要在渲染前使用 `compileEquirectangularShader()` 编译着色器。并且需要在加载 HDR 完成后释放资源。