cesium实现线圈发光效果

文章目录

1.实现效果
2.实现方法
- 2.1调用
- 2.2 库文件

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

2.1调用

引入js文件后，直接调用即可，设置其名称、中心点坐标、颜色、半径和速度等参数即可。

// 线圈发光扩散
let scanLine1 = new Scanline(viewer, "scanLine1");
scanLine1.add([113.923, 22.536, 0], "#CE1374", 1200, 15);

2.2 库文件

参考gitee上开源代码

Effect类文件可参考上一篇博文：传送门

/*** 线圈发光效果* 包括发光材质scanlineMaterialProperty和类scanline.js*/// 线圈发光扩散效果
class Scanline extends Effect {constructor(viewer, id) {super(viewer, id)}change_duration(d) {super.change_duration(d)const curEntity = this.viewer.entities.getById(this.id)curEntity._ellipse._material.speed = d}add(position, color, maxRadius, speed, isedit = false) {super.add(position, color, maxRadius, speed, isedit)const _this = thisthis.viewer.entities.add({id: _this.id,position: Cesium.Cartesian3.fromDegrees(position[0],position[1],position[2]),ellipse: {semiMinorAxis: new Cesium.CallbackProperty(function(n) {return _this.maxRadius}, false),semiMajorAxis: new Cesium.CallbackProperty(function(n) {return _this.maxRadius}, false),material: new Cesium.ScanlineMaterialProperty(new Cesium.Color.fromCssColorString(color),speed),classificationType: Cesium.ClassificationType.BOTH,},})}
}function ScanlineMaterialProperty(color, speed) {this._definitionChanged = new Cesium.Event()this.color = color || Cesium.Color.YELLOWthis.speed = speed || 10
}Object.defineProperties(ScanlineMaterialProperty.prototype, {isConstant: {get: function() {return false},},definitionChanged: {get: function() {return this._definitionChanged},},color: Cesium.createPropertyDescriptor('color'),speed: Cesium.createPropertyDescriptor('speed'),
})ScanlineMaterialProperty.prototype.getType = function(_time) {return Cesium.Material.ScanlineType
}
ScanlineMaterialProperty.prototype.getValue = function(time,result
) {if (!Cesium.defined(result)) {result = {}}result.color = Cesium.Property.getValueOrClonedDefault(this._color,time,Cesium.Color.WHITE,result.color)result.speed = this.speedreturn result
}ScanlineMaterialProperty.prototype.equals = function(other) {const reData =this === other ||(other instanceof ScanlineMaterialProperty &&Cesium.Property.equals(this.color, other.color) &&Cesium.Property.equals(this.speed, other.speed))return reData
}
Cesium.ScanlineMaterialProperty = ScanlineMaterialProperty
Cesium.Material.ScanlineType = 'Scanline'
Cesium.Material.ScanlineSource = `uniform vec4 color;uniform float speed;float circle(vec2 uv, float r, float blur) {float d = length(uv) * 1.0; /* 2.0 */float c = smoothstep(r+blur, r, d);return c;}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st - 0.5;material.diffuse = 2.8 * color.rgb;material.emission = vec3(0);float t = fract(czm_frameNumber * (11000.0 - speed) / 500000.0);float s = 0.3;float radius1 = smoothstep(.0, s, t) * 0.5;float alpha1 = circle(st, radius1, 0.01) * circle(st, radius1, -0.01);float alpha2 = circle(st, radius1, 0.01 - radius1) * circle(st, radius1, 0.01);float radius2 = 0.5 + smoothstep(s, 1.0, t) * 0.5;float alpha3 = circle(st, radius1, radius2 + 0.01 - radius1) * circle(st, radius1, -0.01);material.alpha = smoothstep(1.0, s, t) * (alpha1 + alpha2*0.1 + alpha3*0.1);material.alpha *= color.a ;return material;}`
Cesium.Material._materialCache.addMaterial(Cesium.Material.ScanlineType, {fabric: {type: Cesium.Material.ScanlineType,uniforms: {color: new Cesium.Color(1, 0, 0, 0.5),time: 0,speed: 10,},source: Cesium.Material.ScanlineSource,},translucent: function(t) {return true},
})

cesium实现线圈发光效果相关推荐

php发光字体代码,CSS3怎么实现字体发光效果
这次给大家带来CSS3怎么实现字体发光效果,CSS3实现字体发光效果的注意事项有哪些,下面就是实战案例,一起来看一下. 博客页面左上角的"猿来是勇者"文字已制作发光效果,分享方法如 ...
android 闪烁发光动画,androidview动画发光效果在imageview上
我正在开发一个应用程序,在我的主页上,我需要给徽标(imageview)提供发光和褪色效果动画我尝试了很多,但是找不到如何给出发光效果动画,我知道onclick事件的发光效果请帮我解决这个问题提前致 ...
android 控件发光_如何在android中的按钮周围制作动画/常量发光效果？
的按钮有一个背景绘制的图像,我只是想拥有它周围的发光效果,使它有点与音乐播放我已经搜查各地的多个线程共鸣,他们要么只是一个ImageView的,或在压制,或位图,所以不一定是我寻求这里是我的按钮X ...
Unity ShaderGraph图片发光效果
Unity ShaderGraph图片发光效果前言发光效果(Glow) 原理 ShaderGraph 前言发光的基本原理,如何给图片施加不同颜色的光公式讲解部分参考10行代码搞定"热 ...
webgl智慧楼宇发光效果算法系列之高斯模糊
webgl智慧楼宇发光效果算法系列之高斯模糊如果使用过PS之类的图像处理软件,相信对于模糊滤镜不会陌生,图像处理软件提供了众多的模糊算法.高斯模糊是其中的一种. 在我们的智慧楼宇的项目中,要求对楼宇 ...
Cesium：实现卷帘效果
Cesium:实现卷帘效果卷帘效果简介 Cesium:卷帘效果实现 Cesium:实现思路示例代码卷帘效果简介先上一个简动画预演一下. 但是如何介绍"卷帘效果"呢? ...
Unity Shader Graph 制作Emission发光效果
效果图: Graph中用到了一个重要的节点,Fresnel Effect菲涅尔效果,在画面渲染中菲涅尔效果是一种很实用的技术手段,在Unity中则经常用它来实现边缘照明. 模型用到的依然是Asset ...
Cesium实现雷达扫描效果
Cesium实现雷达扫描效果效果: html: <div id="cesiumContainer"></div> <canvas id=" ...
Cesium雨雪雾天气效果
Cesium雨雪雾天气效果实现效果关键代码 //雪着色器getSnow_fs() {return 'uniform sampler2D colorTexture;\n' +'varying vec ...

cesium实现线圈发光效果

文章目录

1.实现效果

2.实现方法

2.1调用

2.2 库文件

cesium实现线圈发光效果相关推荐

最新文章

热门文章