Three.js 天空盒和环境贴图

提示词

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

效果描述

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

效果特性

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

核心参数

参数 值 说明
天空盒路径 skyBox0/ 天空盒贴图目录
贴图数量 6 天空盒 6 个面
贴图格式 png 贴图文件格式
金属度 1.0 完全金属
粗糙度 0.0 完全光滑

核心代码解析

加载天空盒

JAVASCRIPT
1
2
3
4
5
6
7
8
9
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;

创建环境贴图材质

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
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 编辑整理，如需转载，请注明出处。