C2 |
您所在的位置：网站首页 › ppt流动箭头动画法 › C2 |
C2
|
描述：cesium里面的道路什么的加个流动的效果。 原理：通过创建自定义材质来实现。 效果：可以自己定义流动样式和颜色，可以调整流动速度的快慢，。
代码有点乱没时间整理就这样吧：在其他地方已经把自定义材质封装成了一个对象，但是版本更新太多次没时间去找了。奔来也是参考网上其他人的但现在原文找不到了。 // 自定义材质的 if (Cesium.PolylineTrailLinkMaterialPropertyRoad1 == undefined) { function PolylineTrailLinkMaterialPropertyRoad1(color, duration) { this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = undefined; this.color = color; this.duration = duration; this._time = new Date().getTime(); } Object.defineProperties( PolylineTrailLinkMaterialPropertyRoad1.prototype, { isConstant: { get: function () { return false; } }, definitionChanged: { get: function () { return this._definitionChanged; } }, color: Cesium.createPropertyDescriptor("color") } ); PolylineTrailLinkMaterialPropertyRoad1.prototype.getType = function (time) { return "PolylineTrailLink"; }; PolylineTrailLinkMaterialPropertyRoad1.prototype.getValue = function (time,result) { if (!Cesium.defined(result)) { result = {}; } result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color); result.time =((new Date().getTime() - this._time) % this.duration) / this.duration; return result; }; PolylineTrailLinkMaterialPropertyRoad1.prototype.equals = function ( other ) { return ( this === other || (other instanceof PolylineTrailLinkMaterialPropertyRoad1 && Property.equals(this._color, other._color)) ); }; Cesium.PolylineTrailLinkMaterialPropertyRoad1 = PolylineTrailLinkMaterialPropertyRoad1; Cesium.Material.PolylineTrailLinkType = "PolylineTrailLink"; Cesium.Material.PolylineTrailLinkImage = require("./blue6.png");//道路样式的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.s - time), st.t));\n\ material.alpha = colorImage.a * color.a;\n\ material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\ return material;\n\ }"; Cesium.Material._materialCache.addMaterial( Cesium.Material.PolylineTrailLinkType, { fabric: { type: Cesium.Material.PolylineTrailLinkType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 0.5), image: Cesium.Material.PolylineTrailLinkImage, time: 0, constantSpeed: 300, depthFailMaterial: true }, source: Cesium.Material.PolylineTrailLinkSource }, translucent: function (material) { return true; } } ); } // new来生成材质实体 if (!window.roadMaterialRoad1) { let roadColor = new Cesium.Color.fromCssColorString("#0cfd11"); window.roadMaterialRoad1 = new Cesium.PolylineTrailLinkMaterialPropertyRoad1( roadColor, 20000 ); } // 创建流动线对象 viewer.entities.add({ polyline: new Cesium.PolylineGraphics({ material: roadMaterial, width: new Cesium.ConstantProperty(25),// 线宽 arcType: Cesium.ArcType.GEODESIC, positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions)//positions道路经过的坐标点集合 }) });
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |