上一节我们学习了:cesium修改着色器实现酷炫地图颜色今天我们要学习的是cesium编写着色器实现建筑物渐变特效。

实例代码

// 导入 Cesium 对象
import * as Cesium from "cesium";

// 定义并导出一个函数 modifyBuild，接受一个 viewer 参数。
export default function modifyBuild(viewer) {

  // 使用 Cesium 的 createOsmBuildings 函数来添加 3D 建筑模型。
  let tiles3d = new Cesium.createOsmBuildings();

  // 将 3D 建筑添加到 viewer 场景中，并获取该对象的引用。
  const osmBuildings = viewer.scene.primitives.add(tiles3d);

  // 添加一个事件监听器，监听瓦片是否可见（即被加载进来）。
  tiles3d.tileVisible.addEventListener(function (tile) {

    // 获取瓦片内容。
    const cesium3DTileCon = tile.content;

    // 获取瓦片内部的特征（features）数量。
    const featuresLength = cesium3DTileCon.featuresLength;

    // 循环遍历所有的特征。
    for (let i = 0; i < featuresLength; i++) {

      // 获取单个特征（例如，一个建筑）并访问其模型内容。
      const model = cesium3DTileCon.getFeature(i).content._model;

      // 修改该模型的片元着色器。
      const fragmentShaderSource =
          (model._rendererResources.sourceShaders[1] = `
              varying vec3 v_positionEC;
              void main()
              {
                  czm_materialInput materialInput;
                  // 转换模型的位置信息到视图坐标。
                  vec4 position = czm_inverseModelView * vec4(v_positionEC, 1.0);
                  // 根据高度设置渐变颜色。
                  float  strength = position.z/200.0;
                  gl_FragColor = vec4(strength,0.3*strength,strength, 1.0);
              }
          `);

      // 片元着色器已被修改，设置标志以便重新生成着色器。
      model._shouldRegenerateShaders = true;
    }
  });
}

实例演示地址

cesium编写着色器实现建筑物渐变特效

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesium 编写着色器实现建筑物渐变特效-实践的学习笔记

实例代码下载

代码运行环境：vue3 + vite + js nodejs 14