全景圖（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, // 加載進