Three.js 天空盒和环境贴图效果 | 三维可视化 / AI 提示词

📋 AI 提示词

使用 Three.js 的 CubeTextureLoader 加载天空盒贴图，使用环境贴图创建反射效果。

🖼️ 效果预览

🎮 案例演示

立即体验

效果描述

这是一个展示如何使用天空盒和环境贴图的示例，包括天空盒背景和环境反射效果。

效果特性

• 天空盒背景：使用 CubeTextureLoader 加载天空盒
• 环境贴图：使用 envMap 创建反射效果
• 金属材质：使用 MeshStandardMaterial 创建金属效果
• 反射效果：环境贴图在金属表面反射
• 6 面贴图：天空盒使用 6 个面的贴图
• 在线加载：从网络加载天空盒贴图

核心参数

核心代码解析

加载天空盒

const urls = [0, 1, 2, 3, 4, 5].map(
    (k) =>
        "https://z2586300277.github.io/three-editor/dist/files/scene/skyBox0/" +
        (k + 1) +
        ".png"
);

const textureCube = new THREE.CubeTextureLoader().load(urls);
scene.background = textureCube;

创建环境贴图材质

const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const boxMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    envMap: textureCube,
    metalness: 1,
    roughness: 0,
});

const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

技术亮点

1. CubeTextureLoader：加载立方体贴图
2. 天空盒背景：scene.background 设置天空盒
3. 环境贴图：envMap 创建反射效果
4. 金属材质：MeshStandardMaterial 创建金属效果
5. 反射效果：环境贴图在表面反射

调试技巧

1. 贴图路径：确保天空盒贴图路径正确
2. 贴图顺序：确保 6 个面顺序正确
3. 金属度：调整 metalness 控制反射强度
4. 粗糙度：调整 roughness 控制反射清晰度
5. 贴图大小：使用合适大小的贴图

扩展方向

1. 动态天空盒：动态切换天空盒
2. 自定义天空盒：创建自定义天空盒
3. 多环境贴图：使用多个环境贴图
4. 反射探针：使用反射探针
5. HDR 天空盒：使用 HDR 天空盒

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。