[cesium] 基于Cesium的动态泛光效果示例

抽空将之前的功能单独抽出来写成一个模块，方便单独调用，配合单个模块写了一些示例

可以兼容各个基于cesium底层库的三方框架，引入即可。

效果

模型光源模拟

动态泛光墙

泛光面

城市泛光线

建筑物调整

其他示例

三维效果和功能

使用

// 在引入的cesiumJS下面引入d3kit插件
<script src="http://zhangticcc.gitee.io/d3kit/d3kit.js"></script>
<script>// 初始化 Cesium.Viewerlet viewer = new Cesium.Viewer("d3map");// 初始化 d3kitlet d3kit = new Cesium.D3Kit(viewer)// 泛光场景配置 建筑物材质发光d3kit.setDefSceneConfig()d3kit.setBloomLightScene()// 自定义纹理材质let MaterialLineImage = ['data/images/Textures/ArrowOpacity.png','data/images/Textures/ArrowTransparent.png','data/images/Textures/DataTransLine.png','data/images/Textures/DotTransparent.png','data/images/Textures/LinkPulse.png','data/images/Textures/meteor_01.png','data/images/Textures/Trail.png','data/images/Textures/Trail1.png',]// colorlet colors = [new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 1),new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 1),new Cesium.Color(221 / 255, 221 / 255, 221 / 255, 1)];let getCustomMaterialLine = (image, color) => {return d3kit.getCustomMaterialLine({image: image,color: color,duration: 2000})}// 创建动态线
let startPoint = Cesium.Cartesian3.fromDegrees(104.081701757991, 30.627042558105988)
for (let i = 0, len = 8; i < len; i++) {let endPoint = Cesium.Cartesian3.fromDegrees((Math.random() / 100) +         104.081701757991, (Math.random() / 100) + 30.627042558105988);let positions = d3kit.getLinkedPointList(startPoint, endPoint, 100000, 50);let glowingLine = viewer.entities.add({polyline: {positions: positions,width: 5,material: getCustomMaterialLine(MaterialLineImage[i], colors[i % 3]),}});}</script>

开源地址：github

查看在线效果：传送门

基于cesium拓展效果：传送门2

[cesium] 基于Cesium的动态泛光效果示例相关推荐

Cesium 1.87+实现建筑泛光效果
Cesium 1.87+实现建筑泛光效果 Cesium 1.87+增加了customShader自定义着色器,实现建筑泛光效果示例代码如下: <!DOCTYPE html><meta ...
cesium 旋转弹跳四棱锥（光带扫描）（动态泛光效果）
前言:本文主要分以下几个部分阐述功能的核心实现. 1. 四棱锥的生成 2.物体的平移(也就是弹跳,本质上来说就是控制物体的渲染位置) 3.物体的绕自身中心轴旋转 4.Cesium drawComman ...
Cesium3Dtilesets 使用customShader的解读以及泛光效果示例
前言:光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过,但还是有不少靓仔靓女可能会感到疑惑,在3Dtilesets里怎么使用?为啥我在网上看到的为数不多的代码示例我看不懂?是由于没理解透彻导致的.借此机 ...
flex图表数据动态更新效果示例
<?xml version="1.0"?>  <mx:Appli ...
[cesium] 数字孪生 | 超图 | UE4 | Unity | 基于三维GIS + 游戏引擎结合示例 | UE4 和 Unity的效果展示
说明因为公司的产品规划,最近在研究数字孪生方向的产品,看到51word的云渲染路线三维GIS+游戏引擎跨界融合: 不过没多久看到超图官网已经出了相应的拓展插件今天准备试试.之前有关注过cesium有 ...
基于Cesium的实景三维模型动态更新-以3Dtiles为例（三）
基于Cesium的实景三维模型动态更新-以3Dtiles为例(二)_lwx2233的博客-CSDN博客紧接上文,我们需要将osgb格式转换为cesium可以读取的3dtiles格式打开我们的ces ...
Cesium实现UnrealBloom泛光效果
关注[三维网格3D],分享更多3D心得泛光(Bloom)是一种常用的后期处理特效,游戏中更是随处可见,这里直接上我们的效果图. 图1.UnrealBloom泛光效果 Cesium内置的bloom后期 ...
cesium实现立体墙（垂直、水平）渐变泛光效果
文章目录 1.实现效果 2.实现方法 2.1材质文件 2.2代码调用 2.3其他类型 2.3.1立体向下 2.3.2水平逆时针 2.3.3水平顺时针 Cesium实战系列文章总目录: 传送门 1.实现 ...
基于Cesium的实景三维模型动态更新-以3Dtiles为例（二）
基于Cesium的实景三维模型动态更新-以3Dtiles为例(一)_lwx2233的博客-CSDN博客在上一节中,我们了解了实景三维模型动态更新的本质,这一节我们来讲讲三维模型更新的技术路线有两条 ...

[cesium] 基于Cesium的动态泛光效果示例

效果

其他示例

使用

[cesium] 基于Cesium的动态泛光效果示例相关推荐

最新文章

热门文章