cesium 使用primitive 加载glb文件,200个在不同的位置
时间: 2025-06-27 17:17:34 浏览: 15
### 使用Cesium Primitive加载多个GLB文件并在不同位置显示的最佳实践
为了在不同的位置上使用`Primitive`加载多个GLB文件,可以创建多个实体并将它们放置在所需的位置。下面是一个详细的例子来说明这一过程。
#### 创建和配置Viewer实例
首先初始化一个`viewer`对象作为场景的基础容器[^1]:
```javascript
const viewer = new Cesium.Viewer('cesiumContainer');
```
#### 加载第一个GLB模型
定义第一个GLB模型的位置和其他属性,并将其添加到场景中[^4]:
```javascript
// 定义第一个GLB模型及其参数
const firstModelPosition = Cesium.Cartesian3.fromDegrees(120.14046454, 30.27415039);
const firstModelEntity = viewer.entities.add({
name: "First GLB Model",
position: firstModelPosition,
model: {
uri: '../data/model/first_car.glb',
minimumPixelSize: 256,
maximumScale: 20000,
},
});
```
#### 加载第二个GLB模型
对于第二个GLB模型,在指定的不同坐标处重复上述操作:
```javascript
// 定义第二个GLB模型及其参数
const secondModelPosition = Cesium.Cartesian3.fromDegrees(121.14046454, 30.27415039); // 不同于第一个模型的位置
const secondModelEntity = viewer.entities.add({
name: "Second GLB Model",
position: secondModelPosition,
model: {
uri: '../data/model/second_car.glb',
minimumPixelSize: 256,
maximumScale: 20000,
},
});
```
#### 将这些模型转换成Primitives形式
如果希望利用更底层的API即`Primitive`而非高层级的`entities`接口,则可以通过以下方式实现[^2]:
```javascript
function createGlbPrimitive(modelUri, cartographicPosition) {
const cartesianPosition = Cesium.Cartesian3.fromDegrees(cartographicPosition.longitude, cartographicPosition.latitude);
return new Cesium.ModelGraphics({
uri: modelUri,
scale: 1.0,
minimumPixelSize: 256,
maximumScale: 20000,
show: true,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
silhouetteColor: Cesium.Color.BLACK.withAlpha(0.5),
silhouetteSize: 2.0,
shadows: Cesium.ShadowMode.DISABLED,
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(cartesianPosition)
});
}
// 应用函数创建两个primitive类型的GLB模型
let primitives = viewer.scene.primitives;
primitives.add(new Cesium.Primitive({
geometryInstances: [],
appearance: new Cesium.PerInstanceColorAppearance(),
}));
const firstCarPrimitive = createGlbPrimitive('../data/model/first_car.glb', {longitude: 120.14046454, latitude: 30.27415039});
const secondCarPrimitive = createGlbPrimitive('../data/model/second_car.glb', {longitude: 121.14046454, latitude: 30.27415039});
primitives.add(firstCarPrimitive);
primitives.add(secondCarPrimitive);
```
通过这种方式可以在Cesium环境中有效地管理和展示来自不同源的数据集以及复杂的三维几何体,同时保持良好的性能表现。
阅读全文
相关推荐


















