Cesium Entity的polygon有纹理旋转的属性,但是动态改变的话,会闪烁。
纹理的旋转原理没什么好讲的,就是算一下三角函数,根据动态传入的uniform旋转角度。如果是用纯webgl写的话是很简单的事情,主要是写入到Cesium中有点麻烦。
primitive的定义
let primitive = new Cesium.Primitive({
geometryInstances: [instance],
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: new Cesium.Material({
fabric: {
type: 'Image',
uniforms: {
image: '图片路径',
radians: 0,
},
source: `
#define M_PI 3.1415926535897932384626433832795
uniform sampler2D image;
uniform float radians;
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = vec2(materialInput.st.x - 0.5, materialInput.st.y - 0.5);
float alpha = 1.3 - st.x - 0.5;
float current_radians = atan(st.y, st.x);
float radius = sqrt(st.x * st.x + st.y * st.y);
if (radius < 0.50) {
current_radians = current_radians - radians;
st = vec2(cos(current_radians) * radius, sin(current_radians) * radius);
st = vec2(st.x + 0.5, st.y + 0.5);
vec4 colorImage = texture2D(image, st);
material.diffuse = colorImage.rgb;
material.alpha = colorImage.a * alpha;
} else {
material.alpha = 0.0;
}
return material;
}
`
}
})
})
});
旋转参数的传入
viewer.scene.preUpdate.addEventListener(() => {
radians += Math.PI / 90;
primitive.appearance.material.uniforms.radians = radians;
});