Cesium加载GLB和GLTF模型文件踩坑实录

草海花龙

已于 2024-06-27 14:59:41 修改

阅读量7.4k

点赞数 8

分类专栏： cesium 文章标签： javascript vue

于 2021-08-10 11:55:34 首次发布

本文链接：https://blog.csdn.net/qq_37536520/article/details/119566604

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文记录了在Cesium中加载GLB和GLTF模型文件时遇到的困难。通过搜索引擎未找到有效解决方案，最后在专家指导下发现模型文件需放在Public目录下才能成功加载。以下是实现代码。

摘要由CSDN通过智能技术生成

此条记录被CSDN自动改为只能VIP才能查阅，本着前人栽树，后人乘凉的大义，故经过查阅相关资料得知，可改为关注后免费查阅此文章。此举实属无奈查，阅完可取消关注

遇到问题各种搜索引擎走了一波都只简单的说了相同的加载方法，可以想象有多少人看了后心里暗骂一句这XX不都是相同的文章吗，有意思吗？
最终在大佬的帮助下解决了加载模型的问题
要想加载在cesium中加载本地的glb和gltf格式等相关的模型文件需要将模型文件放在Public下
在这里插入图片描述

代码贴上：

 // 加载放在阿里云上的kml文件
      var kml = Cesium.KmlDataSource.load(
//      你自己的文件URL
        'http://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.kml',
        {
          camera: viewer.scene.camera,
          canvas: viewer.scene.canvas,
          clampToGround: true // 开启贴地
        }
      )
      viewer.dataSources.add(kml).then(function (dataSource) {
        var entities = dataSource.entities.values
        for (var i = 0; i < entities.length; i++) {
          var entity = entities[i] // 设置每个entity的样式
          entity.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY // 去掉地形遮挡
          entity.billboard.color = Cesium.Color.WHITE
          entity.billboard.image =
          //贴图URL
            'http://xxxxxxxxxxxxxxxxxxxxxxxx.svg'
        }
      })
      
    
      加载gltf格式数据到cesium
      var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(103.59730016, 28.303110843, 0)
      )

      // gltf数据加载位置
      scene.primitives.add(
        Cesium.Model.fromGltf({
          url: 'XJ27.glb', // 本地文件
          modelMatrix: modelMatrix,
          scale: 1 // 放大倍数
        })
      )