Cesium 渐变色柱子

最新推荐文章于 2024-07-01 15:20:16 发布

easyCesium

最新推荐文章于 2024-07-01 15:20:16 发布

阅读量1.6k

点赞数 1

分类专栏： Cesium基础 vue WebGL学习文章标签： cesium

本文链接：https://blog.csdn.net/caozl1132/article/details/127731699

版权

Cesium基础同时被 3 个专栏收录

53 篇文章 146 订阅

订阅专栏

WebGL学习

2 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

直接上代码吧：

// 自定义顶点着色器和片源着色器
  let appearance = new Cesium.MaterialAppearance({
    vertexShaderSource: `
                attribute vec3 position3DHigh;  
                attribute vec3 position3DLow;
                attribute float batchId;
                varying vec4 v_positionEC;

                attribute vec4 color;
                varying vec4 v_color;

                void main()
                {
                    v_color = color;
                    vec4 p = czm_computePosition(); // 获取模型相对于视点位置
                    vec4 eyePosition = czm_modelViewRelativeToEye * p; // 由模型坐标 得到视点坐标
                    v_positionEC =  czm_inverseModelView * eyePosition;   // 视点在 模型坐标系中的位置
                    gl_Position = czm_modelViewProjectionRelativeToEye * p;  // 视点坐标转为屏幕坐标
                }
                    `,
    fragmentShaderSource: `           
                varying vec4 v_positionEC;
                varying vec3 v_normalEC;
                varying vec4 v_color;
                void main() {
                  float l = sqrt(pow(v_positionEC.x,2.0) + pow(v_positionEC.y,2.0) + pow(v_positionEC.z,2.0)); // 距离模型坐标系原点的距离
                  float cy3 = fract((abs(l - 1000.0))/2000.0); 
                  float alpha = cy3;
                  gl_FragColor = vec4(v_color.rgb,alpha);
                }
                `,
  })



  let primitive = viewer.scene.primitives.add(
    new Cesium.Primitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: Cesium.BoxGeometry.fromDimensions({
          vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
          dimensions: new Cesium.Cartesian3(300.0, 300.0, 1000.0),
        }),
        modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(118.999861111111, 29, 500)
        ),
        attributes: {
          color: Cesium.ColorGeometryInstanceAttribute.fromColor(
            Cesium.Color.YELLOW.withAlpha(1)
          ),
        },
      }),
      appearance: appearance,
    })
  );