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

最新推荐文章于 2024-08-22 10:44:53 发布
最新推荐文章于 2024-08-22 10:44:53 发布
阅读量703 收藏
点赞数
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透明。接着提供代码示例展示如何指定六个方向的背景图像路径，从而实现自定义背景。最后，给出完整示例代码，帮助读者理解并应用到自己的项目中。

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 2624
第003个本示例的目的是介绍如何在vue+leaflet中设置skybox透明并添加背景图。我们不想要黑乎乎的背景，想自定义一个背景图，然后前面显示地球。
如何设置透明的skybox并添加背景图 - JavaScript实现
ByteZenith的博客
08-29 167
通常情况下，skybox是不透明的，但是我们可以通过一些技巧使其变为透明的，并在其中添加自定义的背景图。在本文中，我们将讨论如何使用JavaScript来设置一个透明的skybox并添加背景图。通过以上代码，您可以在自己的项目中实现一个透明的skybox并添加自定义的背景图。在上述代码中，首先创建了一个场景对象和一个光源。然后，创建了一个相机对象，并设置其位置。接着，创建一个立方体几何体，并将材质应用于它，然后将这个skybox添加到场景中。最后，创建一个渲染器对象，并设置其尺寸，将渲染器的。
Cesium天空盒生成及顺序调整
06-14 973
此时如果直接用于cesium的天空盒的话，会发现有问题，个别图片颠倒，并不能使用，所以我们需要将这几张贴图做一下顺序调整。天空盒设置的时候，找好对应顺序即可加载。转换之后可以获得六张盒子贴图。nx：顺时针旋转90°。px：逆时针旋转90°。
Cesium入门之五：认识Cesium中的Viewer
九仞山的专栏
05-13 6055
详细介绍了Viewer类的构造函数、成员变量及常用方法
Cesium 天空盒资源 skybox 近景天空盒
04-11
Cesium 直接可用天空盒资源。 完美衔接 。 尺寸都是（2048*2048）高清真实天空资源。 近景天空盒 附带代码： viewer.scene.skyBox = new Cesium.GroundSkyBox({ sources: { positiveX: "./Assets/Images/skybox/right.jpg", negativeX: "./Assets/Images/skybox/left.jpg", positiveY: "./Assets/Images/skybox/backav.jpg", negativeY: "./Assets/Images/skybox/front.jpg", positiveZ: "./Assets/Images/skybox/topav.jpg", negativeZ: "./Assets/Images/skybox/bottomav.jpg", }, }); 超方便给你项目集成真实高清天空盒...
cesium中自定义背景
tjx1997的博客
08-05 1337
主要实现了自定义背景的颜色，该背景是球体外的环境背景。
Cesium skybox 星空盒子
03-28
在压缩包中的“五套Cesium星空盒子”可能包含不同风格或不同时间（比如日出、黄昏、深夜）的天空纹理，用户可以根据需要选择合适的纹理设置到Skybox中，以改变场景的氛围。例如，如果你希望展示一个晚上的场景，可以...
五套Cesium skybox.zip
11-22
Cesium是一款强大的开源JavaScript库，专门用于在Web浏览器中创建交互式的3D地球模型和地理空间应用程序。在Cesium中，skybox（天空盒）是一个重要的组成部分，它为场景提供了逼真的天空背景，包括日出、日落、星空...
cesium 天空盒子（图片）
06-05
"cesium 天空盒子（图片）"这个主题涉及到Cesium中的一个重要特性，即天空盒（SkyBox），它是为场景提供逼真天空背景的一种方式。 天空盒是三维空间中的一个六面体，每个面都是一个纹理图像，这些图像合在一起形成...
《Cesium 进阶知识点》- 关闭天空盒，自定义背景图
前端技术
09-21 1420
1.代码第 4 行，初始化时配置。2.代码第 8 行，不显示天空盒；3.代码第 9 行，背景色透明；
iclient for cesium 场景球透明，背景透明，全都透明demo
06-21
iclient for cesium 场景球透明，背景透明，全都透明demo
cesium 设置页面背景颜色
qq_41690869的博客
01-11 1210
【代码】cesium 设置页面背景颜色。
cesium-测量高度垂直距离
zslsh44的专栏
02-04 1495
cesium做垂直测量。
Cesium地表透明
03-01 1540
通过将地表的drawCommand放到透明队列里渲染。现在发现有了新的方法（其实2020年就有该方法了）：GlobeTranslucency。之前Cesium是不能地表透明的，需要改内部代码，将GlobeSurfaceTileProvider.js中的。也可以设置根据到相机的距离获取或设置地球背面的近和远半透明属性。当相机位于地下时，背面和正面会交换，即背面几何形状被视为正面。来计算的，所有这些都可能包含半透明度。还可以设置矩形范围，来呈现范围内的透明表面。下面代码是修改影像的透明度，可以看到地下。
cesium 克里金插值 背景透明显示
qq_32290021的博客
08-22 462
【代码】cesium 克里金插值 背景透明显示。
cesium 自定义底图样式
半路转行的Giser
07-24 1609
有些业务需求需要更改底图的样式，比如可视化大屏，cesium 针对图层提供了一些参数来改变底图样式。
Cesium实现背景透明的方法
weixin_34071713的博客
12-04 2916
前言 今天有人在Cesium实验室QQ群里问如何把地球背景做成透明的，当时我以为Cesium比较复杂的渲染机制可能即使context设置了alpha属性也未必能透明，所以和同学说可能得改Cesium代码，可以使用ViewportQuad来实现。 后来自己实验一下，发现实际上context设置为alpha还是起作用的。。。惭愧误导了某位同学。。 最终效果 最终效果如下所示，其中背景图片时...
cesium设置地球透明
qq_42351255的博客
04-17 1853
【代码】cesium设置地球透明。
C1—— cesium 离线开发去除在线图片自己添加背景图
GIS特战兵
04-24 2388
C1—— 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、付费专栏及课程。

余额充值