原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Per-Feature%20Post%20Processing.html&label=All

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
//初始化Viewer对象
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  shadows: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
const url = "../SampleData/models/CesiumMan/Cesium_Man.glb";
viewer.trackedEntity = viewer.entities.add({
  name: url,
  position: position,
  model: {
    uri: url,
  },
});

if (!Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
  window.alert("此浏览器不支持轮廓后期处理。");
}

//------------ 添加后处理效果 -----------
const stages = viewer.scene.postProcessStages;
//效果1：轮廓高亮效果
const silhouette = stages.add(
  Cesium.PostProcessStageLibrary.createSilhouetteStage(),
);
silhouette.uniforms.color = Cesium.Color.LIME;//亮绿色
//效果2：黑白效果
const blackAndWhite = stages.add(
  //创建一个黑白后处理阶段，将场景渲染为黑白图像。
  Cesium.PostProcessStageLibrary.createBlackAndWhiteStage(),
);
// 设置黑白效果的灰度级别（5.0 表示 5 个灰度级别，类似卡通渲染效果）。
blackAndWhite.uniforms.gradations = 5.0;

//------------ 鼠标交互处理 -----------
let handler;
function addMouseOver(stage) {
  handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function (movement) {
    //获取鼠标当前位置拾取的对象
    const pickedObject = viewer.scene.pick(movement.endPosition);
    if (Cesium.defined(pickedObject)) {
      // 如果拾取到对象，将其基元（pickedObject.primitive）设置为后处理阶段的选中对象
      stage.selected = [pickedObject.primitive];
    } else {
      stage.selected = [];
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

function removeMouseOver(stage) {
  handler = handler && handler.destroy();
  stage.selected = [];
}

Sandcastle.addToolbarMenu([
  {
    text: "Mouse-over Black and White(鼠标悬停黑白效果)",
    onselect: function () {
      blackAndWhite.enabled = true;//启用黑白效果
      silhouette.enabled = false;//禁用轮廓效果

      removeMouseOver(silhouette);//移除轮廓效果的鼠标事件
      addMouseOver(blackAndWhite);//添加黑白效果的鼠标事件
    },
  },
  {
    text: "Mouse-over Silhouette(鼠标悬停轮廓效果)",
    onselect: function () {
      // 与上面选项设置相反
      blackAndWhite.enabled = false;
      silhouette.enabled = true;

      removeMouseOver(blackAndWhite);
      addMouseOver(silhouette);
    },
  },
]);