点击查看:最新Cesium可视化系统实战视频课程
hdr全景图转jpg
https://convertio.co/zh/download/4f21a4d54c570fb05fe0df2d9da0cd863a6c07/
全景jpg图转cube图
https://equirectangular-cubemap.vercel.app/
Cesium 是一个强大的 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 场景增添许多生动的元素。通过灵活配置,您可以根据应用需求自定义不同的天空效果,为用户呈现更加多样化的视觉风貌。