使用JavaScript设置Cesium的透明Skybox并添加背景图

最新推荐文章于 2024-08-22 10:44:53 发布
最新推荐文章于 2024-08-22 10:44:53 发布
阅读量624 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/133091674
js 专栏收录该内容
440 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用JavaScript在Cesium中创建透明的Skybox并添加背景图片。首先创建Cesium Viewer实例，然后通过设置skyBox属性和透明材质实现Skybox透明。接着提供代码示例展示如何指定六个方向的背景图像路径，从而实现自定义背景。最后，给出完整示例代码，帮助读者理解并应用到自己的项目中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Cesium是一个强大的JavaScript库，用于创建地球和宇宙等三维场景。在Cesium中，Skybox是一个围绕场景的背景盒子，通常用于呈现天空、星空或其他环境效果。本文将介绍如何使用JavaScript代码设置Cesium的透明Skybox并添加背景图。

首先，我们需要创建一个Cesium的Viewer实例，即一个可视化场景的容器。以下是创建Viewer实例的基本代码：

// 创建Viewer实例
var viewer = new Cesium.Viewer('cesiumContainer');

在这个例子中，'cesiumContainer’是一个HTML元素的ID，它将用作Cesium的容器。

接下来，我们可以通过设置Viewer实例的skyBox属性来配置Skyb

了解本专栏 订阅专栏 解锁全文
003：vue+cesium 设置skybox透明并添加背景图
大剑师兰特的GIS世界
02-25 2348
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
Cesium实现近地天空盒，且兼容webgl1和webgl2版本详细教程
最新发布
qq_37435704的博客
06-26 45
通过本文，可以了解到cesium如何实现近地天空盒效果的全过程，且兼容webgl1和webgl2版
cesium中自定义背景
tjx1997的博客
08-05 1197
主要实现了自定义背景的颜色，该背景是球体外的环境背景。
《Cesium 进阶知识点》- 关闭天空盒，自定义背景图
前端技术
09-21 1291
1.代码第 4 行，初始化时配置。2.代码第 8 行，不显示天空盒；3.代码第 9 行，背景色透明；
【Cesium】天空盒子
weixin_34040079的博客
11-21 5162
skyBox: new Cesium.SkyBox({ sources: { positiveX: 'static/image/skyBox/posx.jpg', negativeX: 'static/image/skyBox/negx.jpg', positiveY: 'static/image/skyBox/negy.jpg', negativeY: 'static/image/sky...
iclient for cesium 场景球透明，背景透明，全都透明demo
06-21
iclient for cesium 场景球透明，背景透明，全都透明demo
如何设置透明的skybox并添加背景图 - JavaScript实现
ByteZenith的博客
08-29 150
通常情况下，skybox是不透明的，但是我们可以通过一些技巧使其变为透明的，并在其中添加自定义的背景图。在本文中，我们将讨论如何使用JavaScript来设置一个透明的skybox并添加背景图。通过以上代码，您可以在自己的项目中实现一个透明的skybox并添加自定义的背景图。在上述代码中，首先创建了一个场景对象和一个光源。然后，创建了一个相机对象，并设置其位置。接着，创建一个立方体几何体，并将材质应用于它，然后将这个skybox添加到场景中。最后，创建一个渲染器对象，并设置其尺寸，将渲染器的。
Cesium skybox 星空盒子
03-28
在压缩包中的“五套Cesium星空盒子”可能包含不同风格或不同时间（比如日出、黄昏、深夜）的天空纹理，用户可以根据需要选择合适的纹理设置到Skybox中，以改变场景的氛围。例如，如果你希望展示一个晚上的场景，可以...
五套Cesium skybox.zip
11-22
Cesium是一款强大的开源JavaScript库，专门用于在Web浏览器中创建交互式的3D地球模型和地理空间应用程序。在Cesium中，skybox（天空盒）是一个重要的组成部分，它为场景提供了逼真的天空背景，包括日出、日落、星空...
13. Cesium SkyBox使用
qq_42038997的博客
05-06 253
skybox通俗的讲其实就是改变背景样式
cesium-测量高度垂直距离
zslsh44的专栏
02-04 1379
cesium做垂直测量。
cesium 天空盒子（图片）
06-05
相关文章：cesium 近地天空（天空盒子）https://blog.youkuaiyun.com/weixin_46730573/article/details/124695046
Cesium地表透明
03-01 1240
通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法（其实2020年就有该方法了）：GlobeTranslucency。之前Cesium是不能地表透明的，需要改内部代码，将GlobeSurfaceTileProvider.js中的。也可以设置根据到相机的距离获取或设置地球背面的近和远半透明属性。当相机位于地下时，背面和正面会交换，即背面几何形状被视为正面。来计算的，所有这些都可能包含半透明度。还可以设置矩形范围，来呈现范围内的透明表面。下面代码是修改影像的透明度，可以看到地下。
cesium 克里金插值 背景透明显示
qq_32290021的博客
08-22 363
【代码】cesium 克里金插值 背景透明显示。
cesium 自定义底图样式
半路转行的Giser
07-24 1363
有些业务需求需要更改底图的样式，比如可视化大屏，cesium 针对图层提供了一些参数来改变底图样式。
Cesium实现背景透明的方法
weixin_34071713的博客
12-04 2864
前言 今天有人在Cesium实验室QQ群里问如何把地球背景做成透明的，当时我以为Cesium比较复杂的渲染机制可能即使context设置了alpha属性也未必能透明，所以和同学说可能得改Cesium代码，可以使用ViewportQuad来实现。 后来自己实验一下，发现实际上context设置为alpha还是起作用的。。。惭愧误导了某位同学。。 最终效果 最终效果如下所示，其中背景图片时...
cesium自定义天空盒
weixin_43857611的博客
04-15 997
cesium 自定义天空盒，附部分资源路径
Cesium天空盒子(Skybox)制作(js代码)和显示
遨游在太空
08-14 1179
在Cesium中，星空背景是通过天空盒子方式（6张图片）来显示的，原生的图片分辨率太低，本项目用于生成天空盒子的6张图片。最终生成的6个图片大小约为500kb(每个)，格式为jpg，总共的恒星数目约为1万颗左右，在最终的地球星空背景中，仅出现恒星点，不会出现模糊的效果！Cesium与STK中的天空盒子(skybox)。
cesium设置地球透明
qq_42351255的博客
04-17 1613
【代码】cesium设置地球透明。
cesium设置背景为透明
05-26
### Cesium 中设置背景透明的方法 在 Cesium 中实现背景透明的效果可以通过多种方式完成，主要包括以下几个方面： #### 1. 隐藏默认的 SkyBox 并设置背景颜色为透明 通过隐藏 `skyBox` 和调整场景的 `backgroundColor` 来达到背景透明的目的。以下是具体的代码示例： ```javascript viewer.scene.skyBox.show = false; // 隐藏天空盒 viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); // 设置背景颜色为完全透明 ``` 此方法会移除默认的星空背景，并使整个场景呈现透明效果[^1]。 #### 2. 调整 WebGL 渲染选项以支持透明度 为了确保渲染器能够正确处理透明背景，需要修改 `Viewer` 初始化时的参数配置。具体来说，可以禁用独立半透明渲染 (`orderIndependentTranslucency`) 并启用 Alpha 通道支持。以下是一个完整的初始化示例： ```javascript this.viewer = new Cesium.Viewer("cesiumContainer", { orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true // 启用Alpha通道支持 } }, }); ``` 这段代码中的 `alpha: true` 是关键部分，它允许 HTML Canvas 的背景显示出来而不是被覆盖掉。 #### 3. 结合 CSS 自定义容器样式 如果希望进一步自定义背景（比如添加一张图片作为背景），可以在 CSS 文件中指定容器样式的 `background-image` 属性。例如： ```css #cesiumContainer { width: 100%; height: 100%; background-image: url("@/assets/image/background.png"); background-size: cover; } ``` 注意，在这种情况下，Cesium 场景本身仍然是透明的，因此可以看到底层的背景图像[^2]。 --- ### 综合解决方案 将以上三个步骤结合起来即可获得理想的透明背景效果。下面给出一个综合的例子供参考： ```javascript // 创建 Viewer 实例 const viewer = new Cesium.Viewer('cesiumContainer', { orderIndependentTranslucency: false, contextOptions: { webgl: { alpha: true // 支持透明背景 } } }); // 移除 skyBox 显示 viewer.scene.skyBox.show = false; // 将场景背景设为全透明 viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0); ``` 同时配合 CSS 完成最终布局设计： ```css body, html { margin: 0; padding: 0; } #cesiumContainer { width: 100vw; height: 100vh; background-image: url('@/assets/image/custom_background.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; } ``` 这样不仅实现了 Cesium 场景的透明化，还提供了更加美观的视觉体验[^1][^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值