Three.js 全景图（Equirectangular Texture）教程：从加载到球面映射

全景图（Equirectangular Texture）是一种特殊的 2D 图像，能通过数学转换模拟 360° 环绕视角，常用于创建沉浸式环境（如虚拟全景、天空盒替代方案）。本文将通过完整示例，带你掌握 Three.js 中全景图的加载、映射原理与实际应用。

什么是全景图（Equirectangular Texture）？

全景图是一种将 360° 球形环境压缩到平面的图像格式，其宽高比固定为 2:1（例如 4096×2048 像素）。想象将地球表面展开成一张矩形地图 —— 全景图就是 3D 场景的 “展开地图”，通过坐标转换可还原为球形环境。

完整示例代码解析

以下是一个将全景图映射到立方体和球体的示例，我们会逐行解释核心逻辑：

import * as THREE from '../extends/three.module.js';function createEquirectTextureScene(scene) {// 1. 加载全景图纹理const textureLoader = new THREE.TextureLoader();// 设置基础路径（根据项目实际配置调整）textureLoader.setPath(import.meta.env.BASE_URL);const equirectTexture = textureLoader.load('assets/EquirectTexture/number.png', // 全景图路径() => {console.log('全景图加载完成');},undefined, // 加载进