Vue2 + Three.js 加载 HDR 贴图

HDR（高动态范围）贴图常用于为 Three.js 场景提供真实的环境光照和背景，核心依赖 RGBELoader 加载器，以下是加载流程：

一、引入 HDR 加载器依赖

HDR 贴图需通过 RGBELoader 加载，先在 HTML 中引入该加载器脚本（需与 Three.js 版本匹配）：

<!-- 引入HDR加载器 -->
<script src="https://unpkg.com/three@0.128.0/examples/js/loaders/RGBELoader.js"></script>

二、初始化加载器（Vue2 实例内）

在 Vue 实例的 data 中声明加载器实例，在场景初始化方法中完成加载器初始化：

new Vue({
    el: '#app',
    data() {
        return {
            rgbeLoader: null // HDR加载器实例
        };
    },
    methods: {
        // 初始化Three.js基础场景
        initThreeScene() {
            // 创建RGBE加载器
            this.rgbeLoader = new THREE.RGBELoader();
            
            // 加载天空.hdr贴图
            this.rgbeLoader.load("./天空.hdr", (texture) => {
                texture.mapping = THREE.EquirectangularReflectionMapping;
                texture.encoding = THREE.RGBEEncoding;
                this.scene.background = texture;
                this.scene.environment = texture;
            });
        },
    }
});

三、核心注意事项（仅加载相关）

1. 路径问题：
   • 本地开发时，HDR 文件需放在 Vue 项目的 public 目录下，路径以 / 开头（如 /sky.hdr），避免跨域；
   • 远程加载需确保服务器开启跨域允许。
2. 版本匹配：RGBELoader 版本需与 Three.js 核心版本一致，否则会出现加载器未定义或方法报错。
3. 映射方式：EquirectangularReflectionMapping 是全景 HDR 最常用的映射方式，无需修改（仅加载场景无需调整其他映射）。
4. 格式要求：确保文件为 .hdr 格式（RGBE 编码），其他格式（如 .exr）需对应加载器，非 HDR 加载范畴。