Cesium 加载模型教程

加载模型 ·Load Model· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么3D Tiles与glTF Entity两种加载方式viewer.scene.primitives.add(tileset)vsviewer.entities.add经纬高坐标转换与贴地偏移原理效果说明加载倾斜摄影3D Tiles建筑白膜在其包围球中心放置一辆glTF 汽车模型并将 tileset 整体贴地。核心概念Cesium 有两套主要渲染 API| API | 适用 | 加载方式 | |-----|------|---------| |Primitive| 3D Tiles、地形、大批量静态几何 |scene.primitives.add()| |Entity| 点线面、模型、标签等高层对象 |viewer.entities.add()|3D Tilesconst 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 glTFviewer.entities.add({position: tileset.boundingSphere.center, model: { uri: car.glb, minimumPixelSize: 128, // 远距离最小像素保证可见 maximumScale: 200, } });贴地偏移 adjust3dtilesPosition倾斜摄影数据常悬浮或陷入地下需计算高度偏移1. boundingSphere.center → Cartographic经纬高取椭球面高度 0 的表面点 surfaceoffset surface - centertileset.modelMatrix 应用平移涉及 Cesium 空间数学Cartographic.fromCartesian→Cartesian3.fromRadians→Matrix4.fromTranslation。实现步骤new Cesium.Viewer()精简 UI配置 ArcGIS 影像底图await Cesium3DTileset.fromUrl()加载 tilesetadjust3dtilesPosition(tileset)贴地viewBoundingSphere飞到模型Entity 加载 glTF 到 tileset 中心代码要点import * as Cesium from cesiumconst 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.boundingSphereconst 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