cesium实现动态圆效果之—

文章目录

1.实现效果
2.实现方法
- 2.1材质实现
- 2.2代码调用

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

1.实现效果

2.实现方法

2.1材质实现

创建螺旋圆的材质circleSpiralMaterialProperty.js:

/** @Description: 螺旋圆效果（参考开源代码）* @Version: 1.0* @Author: Julian* @Date: 2022-03-03 18:38:39* @LastEditors: Julian* @LastEditTime: 2022-03-03 18:50:00*/
class CircleSpiralMaterialProperty {constructor(options) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._speed = undefined;this.color = options.color;this.speed = options.speed;};get isConstant() {return false;}get definitionChanged() {return this._definitionChanged;}getType(time) {return Cesium.Material.CircleSpiralMaterialType;}getValue(time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 10, result.speed);return result}equals(other) {return (this === other ||(other instanceof CircleSpiralMaterialProperty &&Cesium.Property.equals(this._color, other._color) &&Cesium.Property.equals(this._speed, other._speed)))}
}Object.defineProperties(CircleSpiralMaterialProperty.prototype, {color: Cesium.createPropertyDescriptor('color'),speed: Cesium.createPropertyDescriptor('speed')
})Cesium.CircleSpiralMaterialProperty = CircleSpiralMaterialProperty;
Cesium.Material.CircleSpiralMaterialProperty = 'CircleSpiralMaterialProperty';
Cesium.Material.CircleSpiralMaterialType = 'CircleSpiralMaterialType';
Cesium.Material.CircleSpiralMaterialSource = `uniform vec4 color;uniform float speed;#define PI 3.14159265359vec2 rotate2D (vec2 _st, float _angle) {_st =  mat2(cos(_angle),-sin(_angle),  sin(_angle),cos(_angle)) * _st;return _st;}czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st * 2.0 - 1.0;st *= 1.6;float time = czm_frameNumber * speed / 1000.0;float r = length(st);float w = .3;st = rotate2D(st,(r*PI*6.-time*2.));float a = smoothstep(-w,.2,st.x) * smoothstep(w,.2,st.x);float b = abs(1./(sin(pow(r,2.)*2.-time*1.3)*6.))*.4;material.alpha = a * b ;material.diffuse = color.rgb * a * b  * 3.0;return material;}`Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleSpiralMaterialType, {fabric: {type: Cesium.Material.CircleSpiralMaterialType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),speed: 10.0},source: Cesium.Material.CircleSpiralMaterialSource},translucent: function(material) {return true;}
})

2.2代码调用

引入材质js文件后，使用entity方式创建圆，并设置其材质即可。

// 螺旋圆特效
this.viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),name: "螺旋圆",ellipse: {semiMinorAxis: 1000.0,semiMajorAxis: 1000.0,material: new Cesium.CircleSpiralMaterialProperty({color: new Cesium.Color(1, 1, 0, 0.7),speed: 12.0,})}})

cesium实现动态圆效果之——螺旋圆相关推荐

[cesium] 基于Cesium的动态泛光效果示例
抽空将之前的功能单独抽出来写成一个模块,方便单独调用,配合单个模块写了一些示例可以兼容各个基于cesium底层库的三方框架,引入即可. 效果模型光源模拟动态泛光墙泛光面城市泛光线建筑物调整 ...
cesium实现动态圆效果之——图片雷达
文章目录 1.实现效果 2.实现方法 Cesium实战系列文章总目录:传送门 1.实现效果 2.实现方法通过entity方式创建圆形,并使用回调函数旋转材质即可实现图片雷达效果. 具体代码如下,包含 ...
使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
掌财社:前端接口怎么实现canvas动态图形效果?方法详情！
我们在通过上个文章中的分享我们知道大概有关于如何利用canvas来进行图形绘制这方面的相关内容,那么今天我们接着来说说有关于"前端接口怎么实现canvas动态图形效果?"这个问题的 ...
OpenGL 画出雷达动态扫描效果(二) 非底图
OpenGL 画出雷达动态扫描效果(一)中给出了已一张图片作为底图的雷达扫面程序如果有漂亮的雷达底图的话,效果应该非常不错的,另外也可以直接手绘雷达框架效果如下雷达主体代码 glLineWidt ...
Cesium|xt3d动态轨迹线
Cesium|xt3d动态轨迹线效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head& ...
cesium实现昼夜交替效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1实现思路 (1)加载两个图层为模拟昼夜更替效果,首先 ...
实现类似表格内容动态滚动效果
文章目录需求背景效果图实现思路示例代码需求背景在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果.下面是具体的 ...
【CSON原创】HTML5字体动态粒子效果发布
功能说明: 输入字体,按确定后,右侧画布出现字体的动态粒子效果. 效果预览: 输入显示内容: 实现分析: 之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果,和当耐特砖家的HTML ...

cesium实现动态圆效果之——螺旋圆

文章目录

1.实现效果

2.实现方法

2.1材质实现

2.2代码调用

cesium实现动态圆效果之——螺旋圆相关推荐

最新文章

热门文章