Ceisum绘制雷达效果
在绘制圆锥的基础上加上Primitive的材质渲染(GLSL语言)。
//初始化雷达波
initRadarRiationWave() {
// 雷达的高度
let length = 40000;
let centerOnEllipsoid = Cesium.Cartesian3.fromDegrees(110, 26, length * 0.5);
this.map.camera.flyToBoundingSphere(new Cesium.BoundingSphere(centerOnEllipsoid, length));
// 矩阵计算
let modelMatrix = Cesium.Matrix4.multiplyByTranslation(
Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110, 26)),
new Cesium.Cartesian3(0.0, 0.0, length * 0.5), new Cesium.Matrix4()
);
let geometry = new Cesium.CylinderGeometry({
length,
topRadius: 0.0,
bottomRadius: length * 0.3,
vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat
});
// 创建GeometryInstance
let geometryInstances = new Cesium.GeometryInstance({
geometry,
modelMatrix,
});
// 创建雷达图Primitive
let radar = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances,
appearance: new Cesium.MaterialAppearance({
material: new Cesium.Material({
fabric: {
uniforms: {
color: new Cesium.Color.fromCssColorString("rgba(238, 85, 34, 1)"),
rep: 15,
offset: 0,
thickness: 0.8,
},
source: `
uniform vec4 color;
uniform float rep;
uniform float offset;
uniform float thickness;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
float sp = 1.0/rep;
vec2 st = materialInput.st;
float dis = distance(st, vec2(0.5));
float m = mod(dis + offset, sp);
float a = step(sp*(1.0-thickness), m);
material.diffuse = color.rgb;
material.alpha = a * color.a * dis * 1.2;
return material;
}
`
},
translucent: false
}),
faceForward: false,
closed: true
}),
}));
// 动态修改雷达材质中的offset变量,实现动态效果。
viewer.scene.preUpdate.addEventListener(function () {
let offset = radar.appearance.material.uniforms.offset;
// 控制雷达波运动速度
offset -= 0.001;
if (offset > 1.0) {
offset = 0.0;
}
radar.appearance.material.uniforms.offset = offset;
});
},