原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Clamp%20Model%20to%20Ground.html&label=All

效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
<style>
  @import url(../templates/bucket.css);
  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

该示例验证了Cesium.HeightReference属性：

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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,
  terrain: Cesium.Terrain.fromWorldTerrain(),
  shadows: true,
});

viewer.cesiumWidget.creditContainer.style.display = "none";
viewer.scene.debugShowFramesPerSecond = true;

const scene = viewer.scene;
const clock = viewer.clock;

viewer.camera.setView({
  destination: Cesium.Cartesian3.fromRadians(
    -1.3193669086512454,
    0.698810888305128,
    220,
  ),
  orientation: {
    heading: -1.3,
    pitch: -0.6,
    roll: 0,
  },
  endTransform: Cesium.Matrix4.IDENTITY,
});

let tileset;
try {
  tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866, {
    enableCollision: true,
  });
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`加载tileset出错: ${error}`);
}

let entity, positionProperty;
try {
  const dataSource = await Cesium.CzmlDataSource.load(
    "../SampleData/ClampToGround.czml",
  );
  viewer.dataSources.add(dataSource);
  entity = dataSource.entities.getById("CesiumMilkTruck");
  positionProperty = entity.position;
  entity.orientation = new Cesium.VelocityOrientationProperty(positionProperty);
} catch (error) {
  console.log(`加载CZML出错: ${error}`);
}

clock.shouldAnimate = true;

const clampingOptions = [
  {
    text: "贴合地面",
    onselect: () => {
      entity.model.uri =
        "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb";
      entity.model.scale = 2.5;
      entity.model.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND;
    },
  },
  {
    text: "相对地面有一定高度",
    onselect: () => {
      entity.model.uri = "../SampleData/models/CesiumAir/Cesium_Air.glb";
      entity.model.scale = 1.0;
      entity.model.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND;
    },
  },
  {
    text: "仅贴合地形",
    onselect: () => {
      entity.model.uri =
        "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb";
      entity.model.scale = 2.5;
      entity.model.heightReference = Cesium.HeightReference.CLAMP_TO_TERRAIN;
    },
  },
  {
    text: "仅相对于地形有一定高度",
    onselect: () => {
      entity.model.uri = "../SampleData/models/CesiumAir/Cesium_Air.glb";
      entity.model.scale = 1.0;
      entity.model.heightReference = Cesium.HeightReference.RELATIVE_TO_TERRAIN;
    },
  },
  {
    text: "仅贴合在3D Tiles上",
    onselect: () => {
      entity.model.uri =
        "../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb";
      entity.model.scale = 1.0;
      entity.model.heightReference = Cesium.HeightReference.CLAMP_TO_3D_TILE;
    },
  },
  {
    text: "仅相对于3D Tiles有一定高度",
    onselect: () => {
      entity.model.uri = "../SampleData/models/CesiumAir/Cesium_Air.glb";
      entity.model.scale = 1.0;
      entity.model.heightReference = Cesium.HeightReference.RELATIVE_TO_3D_TILE;
    },
  },
  {
    text: "不贴合",
    onselect: () => {
      entity.model.uri = "../SampleData/models/CesiumDrone/CesiumDrone.glb";
      entity.model.scale = 2.5;
      entity.model.heightReference = Cesium.HeightReference.NONE;
    },
  },
];

Sandcastle.addDefaultToolbarMenu(clampingOptions);

Sandcastle.addToggleButton("显示3D tileset", tileset.show, (checked) => {
  tileset.show = checked;
});
Sandcastle.addToggleButton("显示地球", scene.globe.show, (checked) => {
  scene.globe.show = checked;
});
Sandcastle.addToggleButton(
  "启用实体追踪",
  Cesium.defined(viewer.trackedEntity),
  (checked) => {
    viewer.trackedEntity = checked ? entity : undefined;
  },
);