原文链接及内容

效果如下图:

示例代码如下:

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
const viewer = new Cesium.Viewer("cesiumContainer", {
geocoder: false,
sceneModePicker: false,
homeButton: false,
navigationHelpButton: false,
baseLayerPicker: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
timeline: false,
fullscreenButton: false,
selectionIndicator: false,
skyBox: false,
shouldAnimate: true,
});
const scene = viewer.scene;

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

// 高亮显示所选模型。
const fragmentShaderSource = `
uniform sampler2D colorTexture;
in vec2 v_textureCoordinates;
uniform vec4 highlight;
void main() {
vec4 color = texture(colorTexture, v_textureCoordinates);
if (czm_selected()) {
vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;
out_FragColor = vec4(highlighted, 1.0);
} else {
out_FragColor = color;
}
}
`;

const stage = scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
uniforms: {
highlight: function () {
return new Cesium.Color(1.0, 0.0, 0.0, 0.5);//半透明红色,grba各个通道范围都为0~1.0
},
},
})
);

stage.selected = [];

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
const pickedObject = viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
stage.selected = [pickedObject.primitive];
} else {
stage.selected = [];
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);