Cesium GifPrimitive拓展

最新推荐文章于 2024-09-24 09:24:54 发布

原创最新推荐文章于 2024-09-24 09:24:54 发布 · 454 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #javascript

Cesium 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何利用Cesium库创建3D地理图形，包括矩形、圆形和墙状结构，并通过着色器控制透明度。示例代码展示了从经纬度定义几何形状、设置高度以及应用自定义着色器来改变颜色和透明度的方法。此外，还提到了使用libgif库进行动态图像处理，并提供了相应的npm依赖。

在这里插入图片描述
使用

    var rectangle = new Cesium.RectangleGeometry({
        rectangle: Cesium.Rectangle.fromDegrees(110.0, 29.0, 114.0, 32.0),
    });
    var circle = new Cesium.CircleGeometry({
        center: Cesium.Cartesian3.fromDegrees(115.59777, 30.03883),
        radius: 100000.0,
    });

    var len = 1.0;
    var longitude = 114;
    var latitude = 30;
    var positions = Cesium.Cartesian3.fromDegreesArray([
      longitude - len,
      latitude,
      longitude + len,
      latitude,
    ]);
    var maximumHeight = 300000;
    var minimumHeight = 0;
  
    var wall = Cesium.WallGeometry.fromConstantHeights({
      positions: positions,
      minimumHeight: minimumHeight,
      maximumHeight: maximumHeight,
    });

    var geometryInstances = [];
    geometryInstances.push(
      new Cesium.GeometryInstance({
        geometry: rectangle,
      })
    );
    geometryInstances.push(
        new Cesium.GeometryInstance({
          geometry: circle,
      })
    );
    geometryInstances.push(
        new Cesium.GeometryInstance({
          geometry: wall,
      })
    );

    var options = {
        geometryInstances: geometryInstances,
        appearance: new Cesium.MaterialAppearance({
          renderState: {
            depthTest: { enabled: true },
            depthMask: true,
            blending: Cesium.BlendingState.ALPHA_BLEND,
            cull: {
              enabled: false,
              face: Cesium.CullFace.FRONT,
            },
          },
          translucent: false,
        }),
        asynchronous: true,
    };

    var fs = "czm_material czm_getMaterial(czm_materialInput materialInput) { \n" +
    "    czm_material material = czm_getDefaultMaterial(materialInput); \n" +
    "    vec2 st = materialInput.st; \n" +
    "    vec4 color = texture2D(image, st); \n" +
    "    material.diffuse = color.rgb; \n" +
    "    material.alpha = 1.0 - min(color.r,min(color.g,color.b)); \n" +
    "    return material; \n" +
    "} \n";
  
    options.url = 'http://img6.cache.netease.com/game/2016/3/3/20160303135738201d6.gif';
    options.fragmentShaderSource = fs;
    
    var primitive = new GifPrimitive(options);
    viewer.scene.primitives.add(primitive);

加入着色器对比
可以通过加入着色器控制透明度

使用了libgif的canvas,编译需要npm引入

  "dependencies": {
    "libgif": "^0.0.3"
  }

GifPrimitive

Cesium GifPrimitive拓展

1 条评论