效果图

实例代码

只保留了关键代码部分，其余部分自行引入

开发使用Cesium1.81版本

var path = [108.95846, 34.22104, 108.96039, 34.22104, 108.96046, 34.21804, 108.95843, 34.21804, 108.95846, 34.22104];var wall = viewer.entities.add({wall: {positions: Cesium.Cartesian3.fromDegreesArray(path),material: new Cesium.PolylineTrailLinkMaterialProperty({color: Cesium.Color.RED,duration: 1500 // 持续时间,单位毫秒（0时为静止状态）}),maximumHeights: [20, 20, 20, 20, 20],minimumHeights: [0, 0, 0, 0, 0]}
});
viewer.flyTo(wall);//动态墙材质
function PolylineTrailLinkMaterialProperty(options) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined;this.color = options.color;this.duration = options.duration;this.trailImage = options.trailImage;this._time = (new Date()).getTime();
}
Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {isConstant: {get: function () {return false;}},definitionChanged: {get: function () {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {return 'PolylineTrailLink';
};
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);if(this.trailImage){result.image = this.trailImage ;}else {result.image=Cesium.Material.PolylineTrailLinkImage}if(this.duration){result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;}viewer.scene.requestRender();return result;
};
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {return this === other ||(other instanceof PolylineTrailLinkMaterialProperty&& Cesium.Property.equals(this._color, other._color))
};
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "./static/image/colors.png";
Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\{\n\czm_material material = czm_getDefaultMaterial(materialInput);\n\vec2 st = materialInput.st;\n\vec4 colorImage = texture2D(image, vec2(fract(st.t - time), st.t));\n\vec4 fragColor;\n\fragColor.rgb = color.rgb / 1.0;\n\fragColor = czm_gammaCorrect(fragColor);\n\material.alpha = colorImage.a * color.a;\n\material.diffuse = color.rgb;\n\material.emission = fragColor.rgb;\n\return material;\n\}";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {fabric: {type: Cesium.Material.PolylineTrailLinkType,uniforms: {color: new Cesium.Color(1.0, 1.0, 1.0, 1),image: Cesium.Material.PolylineTrailLinkImage,time: 0},source: Cesium.Material.PolylineTrailLinkSource},translucent: function (material) {return true;}
});

代码中使用到的材质图片

Cesium开发日记—动态立体墙效果相关推荐

使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果废话不多说,直接先来看下最终实现的动态立体墙效果图. 如果图片还不够直观,那么点击链接查看在线示例. 首先我们需要用到ArcG ...
cesium实现动态立体墙效果
文章目录 1.实现效果 2.实现方法 2.1自定义材质 2.2纹理图片 2.3代码调用 Cesium实战系列文章总目录: 传送门设置自定义MaterialProperty,实现动态立体墙体效果 1. ...
cesium实现正多边形动态扩散墙效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2核心函数 2.3材质文件 2.4代码调用 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法 2.1实现思路实现正多变形 ...
Cesium实战专栏09.Cesium动态立体墙
前言之前在某个三维安防布控管理平台中需要在场景中绘制警戒区,用来表示某些区域具有特定意义,需要进行封锁,不允许靠近,比如军事重地.某些重要会议场所等.使用的是Cesium中的墙体类,实现拉伸显示来模 ...
cesium实现动态扩散墙效果（基于turf）
文章目录 1.实现效果 2.实现方法 2.1 turf库 2.2具体代码 2.2.1核心函数 2.2.2代码调用 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法通过查询Cesi ...
59.（cesium之家）cesium叠加动态立体墙(着色器)(顺逆时针方向)
听老人家说:多看美女会长寿地图之家总目录(订阅之前建议先查看该博客) 文章末尾处提供保证可运行完整代码包,运行如有问题,可"私信"博主. 效果如下所示: 下面献上完整代码,代码重 ...
cesium实现立体墙（垂直、水平）渐变泛光效果
文章目录 1.实现效果 2.实现方法 2.1材质文件 2.2代码调用 2.3其他类型 2.3.1立体向下 2.3.2水平逆时针 2.3.3水平顺时针 Cesium实战系列文章总目录: 传送门 1.实现 ...
Cesium加载entities实体，包括文字标注,图标(动态缩放效果),线(尾迹线效果)，面(动态闪烁效果)，背景图，围栏(立体分层效果)，渐变色圆柱，扇形图等
加载图标和文字标注 addPoints(data) {if (data && data.length > 0) {let datasource = map_common_addD ...
Android实现动态贴纸,Android开发之仿微博贴纸效果实现——进阶篇
上个月写了一篇<Android开发之仿微博贴纸效果实现--基础篇>,文章中提到还有一篇进阶篇要写,很早就想动笔了,因中途去维护了开源库<高仿微信图片选择器2.0版本>,导致耽搁 ...

Cesium开发日记—动态立体墙效果

效果图

实例代码

Cesium开发日记—动态立体墙效果相关推荐

最新文章

热门文章