cesium教程5-用primitive加载glb和gltf格式的小模型
primitive加载方法更底层,用起来更麻烦,但是效率更高。
完整示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cesium示例</title> <!-- 引用cesium的js和css,天地图的扩展js --> <script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script> <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css"/> <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script> <style type="text/css"> html, body, #tiandituContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } </style> </head> <body onload="loadData()"> <div id="tiandituContainer"> </div> <script> //Cesium官网注册后的授权token,没有token不能使用cesium在线的地形服务,这里需要改成自己的token Cesium.Ion.defaultAccessToken = ""; var viewer; function loadData() { //默认会调用微软virtualearth地图 viewer = new Cesium.Viewer('tiandituContainer',{ animation:false, //是否显示动画控件 homeButton:true, //是否显示home键 geocoder:true, //是否显示地名查找控件,如果设置为true,则无法查询 baseLayerPicker:true, //是否显示图层选择控件 timeline:false, //是否显示时间线控件 fullscreenButton:true, //是否全屏显示 infoBox:true, //是否显示点击要素之后显示的信息 sceneModePicker:true, //是否显示投影方式控件 三维/二维 navigationInstructionsInitiallyVisible:false, //导航指令 navigationHelpButton:false, //是否显示帮助信息控件 selectionIndicator:false, //是否显示指示器组件 }); //隐藏cesium的logo viewer._cesiumWidget._creditContainer.style.display = "none"; //默认的Cesium会加载一个bingMap底图,这个地图网络不太好,一般要先去掉这个默认的 viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); //arcgis在线影像地图 viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ name:"img_arcgis", url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" })); viewer.scene.globe.depthTestAgainstTerrain = true;//地形遮挡效果开关,打开后地形会遮挡看不到的区域 viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效果 //加载小模型 addModel("https://data.mars3d.cn/gltf/mars/feiji.glb",120.131292,30.471157,0); // 将三维球定位到模型 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(120.132072,30.471217, 2000), orientation: { heading : Cesium.Math.toRadians(348.4202942851978), pitch : Cesium.Math.toRadians(-89.74026687972041), roll : Cesium.Math.toRadians(0) }, complete:function callback() { // 定位完成之后的回调函数 } }); } function addModel(url,longitude,latitude,height) { var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(longitude, latitude, height) ); viewer.scene.primitives.add(Cesium.Model.fromGltf({//Gltf和glb模型都用fromGltf url: url, modelMatrix: modelMatrix, minimumPixelSize : 512, maximumScale : 200000, scale : 1, }) ); } </script> </body> </html>
分类:
cesium
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY