你将学到什么

3D Tiles 与 glTF Entity 两种加载方式
viewer.scene.primitives.add(tileset) vs viewer.entities.add
经纬高坐标转换与 贴地偏移 原理

效果说明

加载倾斜摄影 3D Tiles 建筑白膜，在其包围球中心放置一辆 glTF 汽车模型，并将 tileset 整体贴地。

核心概念

Cesium 有两套主要渲染 API：

API	适用	加载方式
Primitive	3D Tiles、地形、大批量静态几何	`scene.primitives.add()`
Entity	点线面、模型、标签等高层对象	`viewer.entities.add()`

3D Tiles

const tileset = await Cesium.Cesium3DTileset.fromUrl(url);
viewer.scene.primitives.add(tileset);
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0));

3D Tiles 是 流式 LOD 格式，适合城市级倾斜摄影、点云、人工模型库。

Entity glTF

viewer.entities.add({
    position: tileset.boundingSphere.center,
    model: {
        uri: 'car.glb',
        minimumPixelSize: 128,  // 远距离最小像素，保证可见
        maximumScale: 200,
    }
});

贴地偏移 adjust3dtilesPosition

倾斜摄影数据常 悬浮或陷入地下，需计算高度偏移：

1. boundingSphere.center → Cartographic（经纬高）
2. 取椭球面高度 0 的表面点 surface
3. offset = surface - center
4. tileset.modelMatrix 应用平移

涉及 Cesium 空间数学：Cartographic.fromCartesian → Cartesian3.fromRadians → Matrix4.fromTranslation。

实现步骤

new Cesium.Viewer() 精简 UI，配置 ArcGIS 影像底图
await Cesium3DTileset.fromUrl() 加载 tileset
adjust3dtilesPosition(tileset) 贴地
viewBoundingSphere 飞到模型
Entity 加载 glTF 到 tileset 中心

代码要点

import * as Cesium from 'cesium'

const box = document.getElementById('box')

const viewer = new Cesium.Viewer(box, {

    animation: false,//是否创建动画小器件，左下角仪表    

    baseLayerPicker: false,//是否显示图层选择器，右上角图层选择按钮

    baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer')),

    fullscreenButton: false,//是否显示全屏按钮，右下角全屏选择按钮

    timeline: false,//是否显示时间轴    

    infoBox: false,//是否显示信息框   

})

// 3dtiles 模型
const tileset = await Cesium.Cesium3DTileset.fromUrl(FILE_HOST + '3dtiles/test/tileset.json')

viewer.scene.primitives.add(tileset)

adjust3dtilesPosition(tileset)

// 设置视角
viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 0))

// gltf 模型 放到 3dtiles 模型中心
viewer.entities.add({

    name: 'gltf',

    position: tileset.boundingSphere.center,

    model: {

        uri: HOST + '/files/model/car.glb',

        minimumPixelSize: 128,

        maximumScale: 200,

    }

})

// 贴地
function adjust3dtilesPosition(tileset) {

    const boundingSphere = tileset.boundingSphere

    const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center) // 获取中心点

    const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0) // 获取表面点

    const offset = Cesium.Cartesian3.subtract(surface, boundingSphere.center, new Cesium.Cartesian3()) // 计算偏移

    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(offset) // 设置偏移

}

完整源码：GitHub

小结

大场景建筑 → 3D Tiles；单个可交互模型 → Entity.model
相关：Cesium 相机 · 3D Tiles 着色

基础功能 · Cesium.js