概述

3D Tiles 如何与着色器结合使用。

const viewer = new Cesium.Viewer('cesiumContainer')

const osmBuildingsTileset = await Cesium.createOsmBuildingsAsync()
viewer.scene.primitives.add(osmBuildingsTileset)

osmBuildingsTileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [["true", "color('rgb(51, 153, 255)',1)"]],
  },
})

const customShader = new Cesium.CustomShader({
  lightingModel: Cesium.LightingModel.UNLIT,
  fragmentShaderText: `
    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
    {
        float scanHeightRange = 300.0;

        // 模型空间高度
        float modelHeight = fsInput.attributes.positionMC.z;

        // 时间扫描相位（0~1 循环）
        float scanPhase = fract(czm_frameNumber / 360.0);

        // 高度归一化
        float normalizedHeight = clamp(modelHeight / scanHeightRange, 0.0, 1.0);

        // 生成往返扫描波形
        scanPhase = abs(scanPhase - 0.5) * 2.0;

        // 是否命中扫描线（0 = 命中，1 = 未命中）
        float scanMask = step(0.005, abs(normalizedHeight - scanPhase));

        // 扫描线提亮
        material.diffuse += material.diffuse * (1.0 - scanMask);
    }
  `
})
osmBuildingsTileset.customShader = customShader

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(121.47, 31.23, 10000000),
  orientation: {
    heading: Cesium.Math.toRadians(0),
    pitch: Cesium.Math.toRadians(-90),
    roll: Cesium.Math.toRadians(0),
  }
})