1.new Cesium.Viewer中添加
requestWebgl1: true,
2. 编写材质,主要分三步
(1)定义MaterialProperty
(2)设置材质
(3)添加材质
//定义材质对象及变量
function DynamicWallMaterialProperty(color, duration) {this._definitionChanged = new Cesium.Event();this._color = undefined;this._colorSubscription = undefined; this._time = (new Date()).getTime();this.color = color;this.duration = duration;}//Cesium.MaterialProperty是一个抽像类(https://cesium.com/learn/cesiumjs/ref-doc/MaterialProperty.html),//必须定义isConstant 、definitionChanged、equals()、getType()、getValue()//定义或修改材质属性Object.defineProperties(DynamicWallMaterialProperty.prototype, {isConstant: {get: function () {return false;}},definitionChanged: {get: function () {return this._definitionChanged;}},color: Cesium.createPropertyDescriptor('color')});//定义材质对象方法getTypeDynamicWallMaterialProperty.prototype.getType = function (time) {return 'DynamicWall';}//定义材质对象方法getValue,给下文的uniforms附值DynamicWallMaterialProperty.prototype.getValue = function (time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);result.image = Cesium.Material.DynamicWallImage;result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;return result;}//定义材质对象方法equalsDynamicWallMaterialProperty.prototype.equals = function (other) {return this === other || (other instanceof DynamicWallMaterialProperty && Property.equals(this._color, other._color))};Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;Cesium.Material.DynamicWallType = 'DynamicWall';Cesium.Material.DynamicWallImage = "src/assets/imgs/color.png";//图片Cesium.Material.DynamicWallSource =`czm_material czm_getMaterial(czm_materialInput materialInput){float time = czm_frameNumber/100.0;czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st;vec4 colorImage = texture2D(image, vec2(fract(1.0*st.t - time), st.t));material.alpha = colorImage.a * color.a;material.diffuse = (colorImage.rgb+color.rgb)/2.0;return material;}` //由上到下//添加自定义材质Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {fabric: {//纹理类型type: Cesium.Material.DynamicWallType,//传递给着色器的外部属性uniforms: {color: new Cesium.Color(0.0, 0.0, 0.0, 1),image: Cesium.Material.DynamicWallImage,time: 0},//纹理资源source: Cesium.Material.DynamicWallSource},//是否透明translucent: function (material) {return true;}})export default DynamicWallMaterialProperty;
3.使用材质
import DynamicWallMaterialProperty from "../materials/DynamicWallMaterial.js";//...function CustomMaterialTest() {var dynamicWall = window.Viewer.entities.add({wall: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([118.286419, 31.864436, 20000.0,119.386419, 31.864436, 20000.0,119.386419, 32.864436, 20000.0,118.286419, 32.864436, 20000.0,118.286419, 31.864436, 20000.0,]),material: new DynamicWallMaterialProperty(Cesium.Color.fromBytes(255, 200, 10).withAlpha(0.8), 30),}})window.Viewer.flyTo(dynamicWall)
}