博客

Cesium基础知识-添加云特效

  • Post author:
  • Post category:其他


  1. //加载云特效
  2. function LoadClouds() {
  3. const worldRectangle1 = viewer.scene.primitives.add(new Cesium.Primitive({
  4. geometryInstances: new Cesium.GeometryInstance({
  5. geometry: new Cesium.RectangleGeometry({
  6. rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
  7. vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  8. })
  9. }),
  10. appearance: new Cesium.EllipsoidSurfaceAppearance({
  11. material: new Cesium.Material({
  12. fabric: {
  13. type: ‘Image’,
  14. uniforms: {
  15. image: ‘../../img/clouds.png’,
  16. radians: 0,
  17. },
  18. //shader
  19. source: `
  20. #define M_PI 3.1415926535897932384626433832795
  22. uniform sampler2D image;
  23. uniform float radians;
  25. czm_material czm_getMaterial(czm_materialInput materialInput)
  26. {
  27. czm_material material = czm_getDefaultMaterial(materialInput);
  28. vec2 st = vec2(materialInput.st.x – 0.5, materialInput.st.y – 0.5);
  29. float alpha = 1.3 – st.x – 0.5;
  30. float current_radians = atan(st.y, st.x);
  31. float radius = sqrt(st.x * st.x + st.y * st.y);
  32. if (radius < 0.50) {
  33. current_radians = current_radians – radians;
  34. st = vec2(cos(current_radians) * radius, sin(current_radians) * radius);
  35. st = vec2(st.x + 0.5, st.y + 0.5);
  36. vec4 colorImage = texture2D(image, st);
  37. material.diffuse = colorImage.rgb;
  38. material.alpha = colorImage.a * alpha;
  39. } else {
  40. material.alpha = 0.0;
  41. }
  43. return material;
  44. }
  45. `
  46. }
  47. }),
  49. aboveGround: true
  50. }),
  51. show: true
  52. }))
  53. var radians = 0
  54. viewer.scene.postRender.addEventListener(() => {
  55. radians += Math.PI / 50000;
  56. worldRectangle1.appearance.material.uniforms.radians = radians;
  57. });
  58. }
  59. LoadClouds();


版权声明：本文为QQhelphelp原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。