vue 使用three.js加载hdri

HDRI（高动态范围图像）是一种用于呈现高质量环境光照的图像格式。在 Vue 中使用 Three.js 加载 HDRI 可以让场景更加逼真。下面是一个简单的示例代码：

首先，加载 HDRI 图像：

const loader = new THREE.TextureLoader();
const hdrTexture = loader.load('path/to/hdri.hdr');

然后，使用 HDRI 图像创建环境贴图：

const pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader();

const envMap = pmremGenerator.fromEquirectangular(hdrTexture).texture;
scene.background = envMap;
scene.environment = envMap;

最后，要注意在渲染器中启用高动态范围：

renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.outputEncoding = THREE.sRGBEncoding;

这样就可以在 Vue 中使用 Three.js 加载 HDRI 图像了。