点击查看:最新Cesium可视化系统实战视频课程

hdr全景图转jpg
https://convertio.co/zh/download/4f21a4d54c570fb05fe0df2d9da0cd863a6c07/

全景jpg图转cube图
https://equirectangular-cubemap.vercel.app/

202502061623153d855c5831364956c4324f3fad523999287Cesium 是一个强大的 Web 地图框架,用于创建 3D 地球视图和虚拟地理信息系统。它不仅支持多种地图类型,还提供了丰富的视觉效果以增强用户体验。其中,天空盒 (SkyBox) 是 Cesium 中一种非常重要的渲染效果,它模拟了一个包围地球的立方体,通过纹理图像来展现天空、云层、星空等视觉效果,为 3D 场景提供更加真实的环境。

在本文中,我们将详细讲解如何在 Cesium 中设置天空盒 (SkyBox),并分析其背后的实现原理。

1. 什么是天空盒 (SkyBox)?

天空盒是一种通过贴图技术创建的环境效果,它将一系列的 2D 图像(通常为六个面组成的立方体的六个纹理)映射到场景的外围,从而让玩家感觉到身处一个被天空环绕的虚拟世界。这个立方体的六个面分别是:

  • 正向 X 面(px)
  • 负向 X 面(nx)
  • 正向 Y 面(py)
  • 负向 Y 面(ny)
  • 正向 Z 面(pz)
  • 负向 Z 面(nz)

这些图像通常代表了不同的天空效果,如晴空、星空、云层等。在 Cesium 中,我们可以通过 Cesium.SkyBox 来实现这一效果。

2. Cesium 中的 SkyBox 设置

在 Cesium 中,创建一个天空盒非常简单。通过配置 Cesium.SkyBox 类并传入六张图片(对应六个方向的纹理),即可为场景添加自定义的天空效果。下面是一个基本的例子:


const viewer = new Cesium.Viewer("cesiumContainer", {
  // 其他配置项
  skyBox: new Cesium.SkyBox({
    sources: {
      positiveX: "./texture/sky4/px.jpg", // 右边
      negativeX: "./texture/sky4/nx.jpg", // 左边
      positiveY: "./texture/sky4/py.jpg", // 上方
      negativeY: "./texture/sky4/ny.jpg", // 下方
      positiveZ: "./texture/sky4/pz.jpg", // 前方
      negativeZ: "./texture/sky4/nz.jpg", // 后方
    }
  }),
});

3. SkyBox 的构造与使用

3.1 SkyBox 对象

Cesium.SkyBox 是一个用于创建天空盒的类,它需要一个包含六张图片路径的 sources 对象。这些图片应该为立方体的每个面提供相应的纹理。构造时,我们通过 sources 属性指定六个纹理图片的路径,Cesium 会自动将这些图片应用到场景中,并渲染出一个环绕整个地球的天空盒。

3.2 SkyBox 的 sources 属性

sources 属性是一个对象,其中包含六个方向的图片路径。每个方向的图像都会被 Cesium 映射到天空盒的对应面上。具体来说:

  • positiveX:右侧
  • negativeX:左侧
  • positiveY:上侧
  • negativeY:下侧
  • positiveZ:前侧
  • negativeZ:后侧

注意:这些图片的尺寸应当一致,通常为正方形。为了确保渲染效果的良好表现,建议使用高质量的图片,以避免在拉伸和变形时产生失真。

3.3 自定义天空盒的纹理

除了使用默认的天空盒图像,您也可以自定义天空盒的纹理,替换成自己设计的图像。以下是如何使用自定义纹理的示例:


skyBox: new Cesium.SkyBox({
  sources: {
    positiveX: "./textures/custom/skybox_px.jpg",
    negativeX: "./textures/custom/skybox_nx.jpg",
    positiveY: "./textures/custom/skybox_py.jpg",
    negativeY: "./textures/custom/skybox_ny.jpg",
    positiveZ: "./textures/custom/skybox_pz.jpg",
    negativeZ: "./textures/custom/skybox_nz.jpg",
  }
})


4. SkyBox 的作用

天空盒不仅仅是一个美学效果,它在虚拟地球的场景中扮演了重要角色:

  • 增强沉浸感:通过不同的天空纹理,可以模拟不同的环境,比如晴空、黄昏、夜空等,极大地提升用户的沉浸感。
  • 天气效果:与地球表面的天气系统结合,天空盒可以呈现不同的云层、雨雪效果。
  • 动态变化:如果需要模拟昼夜变化或者时间进程,可以通过动态加载不同的天空纹理来实现。
  • 背景替换:通过自定义天空盒,可以为不同的应用场景提供不同的背景,如太空、海洋、城市等。

5. 代码实现示例

在实际开发中,您可能会希望对 Cesium 的默认视图进行更精细的控制,例如设置默认视角、隐藏控件或调整渲染性能。以下是一个简单的代码实现,展示了如何在创建 Cesium Viewer 时配置天空盒,并进行一些其他设置。


import * as Cesium from "cesium";
import "../public/Cesium/Widgets/widgets.css"

// 设置 Cesium 静态资源路径
window.CESIUM_BASE_URL = "./Cesium";

// 创建 Cesium Viewer
const viewer = new Cesium.Viewer("cesiumContainer", {
  // 设置默认视角
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  navigationHelpButton: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  terrainProvider: Cesium.createWorldTerrain(),
  
  // 设置天空盒
  skyBox: new Cesium.SkyBox({
    sources: {
      positiveX: "./texture/sky4/px.jpg",
      negativeX: "./texture/sky4/nx.jpg",
      positiveY: "./texture/sky4/py.jpg",
      negativeY: "./texture/sky4/ny.jpg",
      positiveZ: "./texture/sky4/pz.jpg",
      negativeZ: "./texture/sky4/nz.jpg",
    }
  }),
});

// 隐藏版权信息
viewer.cesiumWidget.creditContainer.style.display = "none";

// 查看帧率
viewer.scene.debugShowFramesPerSecond = true;

6. 总结

在 Cesium 中,天空盒是一个非常强大的功能,通过设置合适的六面纹理,开发者能够为用户提供丰富的视觉体验。它不仅能增强用户的沉浸感,还能为 3D 场景增添许多生动的元素。通过灵活配置,您可以根据应用需求自定义不同的天空效果,为用户呈现更加多样化的视觉风貌。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注