「11 天空盒子（threeJS 使用贴图）」
/~aedf3LsI9x~:/
链接：https://pan.quark.cn/s/188fde1e01b4

天空盒子演示项目

这是一个使用纯HTML和Three.js实现的3D天空盒子演示项目。

📁 项目结构

skybox-demo/
├── index.html          # 使用本地天空盒子图片的版本
└── README.md          # 项目说明文档

🚀 使用方法

方法一：在线版本（推荐）

直接在浏览器中打开 index-online.html 文件即可查看效果。这个版本使用Three.js官方的在线示例天空盒子纹理。

方法二：本地版本

1. 确保 ../images/skybox1/ 目录下有以下6张图片：

   • 1.png - 底部纹理

   • 2.png - 顶部纹理

   • 3.png - 左侧纹理

   • 4.png - 后侧纹理

   • 5.png - 前侧纹理

   • 6.png - 右侧纹理

2. 在浏览器中打开 index.html 文件

🎮 操作说明

• 左键拖拽: 旋转视角

• 右键拖拽: 平移视角

• 滚轮: 缩放视角

🔧 技术实现

核心代码（从原项目提取）

// 初始化天空盒子
function initSkybox() {
    const skyboxPath = '../images/skybox1/';
​
    // 立方体纹理的加载顺序：
    // 0: 右 (right, px)
    // 1: 左 (left, nx)
    // 2: 上 (top, py)
    // 3: 下 (bottom, ny)
    // 4: 前 (front, pz)
    // 5: 后 (back, nz)
    const urls = [
        skyboxPath + '6.png', // 右
        skyboxPath + '3.png', // 左
        skyboxPath + '2.png', // 上
        skyboxPath + '1.png', // 下
        skyboxPath + '5.png', // 前
        skyboxPath + '4.png'  // 后
    ];
​
    const cubeTextureLoader = new THREE.CubeTextureLoader();
    const skyboxTexture = cubeTextureLoader.load(urls);
    scene.background = skyboxTexture;
}

关键特性

1. Three.js: 使用CDN引入，无需本地安装

2. OrbitControls: 支持鼠标交互控制视角

3. 响应式设计: 自动适应窗口大小变化

4. 加载提示: 显示加载状态和错误处理

5. 测试物体: 添加了几何体和网格以便更好地观察天空盒子效果

📝 与原项目的对比

原项目中的天空盒子实现位于 src/base.ts 文件的 initSky() 方法中：

async initSky() {
    const path = './images/skybox1/'
    const urls = [
        path + '6.png',
        path + '3.png',
        path + '2.png',
        path + '1.png',
        path + '5.png',
        path + '4.png'
    ]
    const textCube = new THREE.CubeTextureLoader().load(urls)
    this.scene.background = textCube
}

这个纯HTML版本提取了相同的核心逻辑，并添加了更完整的用户界面和错误处理。

🎨 自定义天空盒子

如果你想使用自己的天空盒子图片：

1. 准备6张正方形图片（建议1024x1024像素）

2. 按照立方体贴图的对应关系命名

3. 修改代码中的 skyboxPath 变量指向你的图片目录

4. 如果需要，调整 urls 数组中的文件名

🔗 参考资源

• Three.js 官方文档

• Three.js 天空盒子示例

• 立方体贴图制作工具