MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 加载GLB模型

加载GLB模型

模型压缩（windows示例）：

第一步：本地安装Node.js环境

第二步：全局安装gltf-transform工具包

打开 PowerShell / CMD 执行：

npm install -g @gltf-transform/cli

安装完成后任意目录都可以直接使用gltf-transform命令。

第三步：验证是否安装成功

gltf-transform --version

输出版本号即安装完成。

第四步：执行命令

在打开 PowerShell / CMD 中执行：

gltf-transform optimize bz.glb bz_optimized_fulltree.glb --no-join --no-prune --no-flatten --texture-compress webp --compress meshopt

命令详解：

  1. gltf-transform optimize 输入文件 输出文件 [参数]
  2. optimize：核心子命令，一站式模型轻量化优化
  3. bz.glb：原始未优化模型
  4. bz_optimized_fulltree.glb：优化后输出新模型（不会覆盖原文件）
  5. --no-join：默认 optimize 会自动合并「材质相同」的多个网格 Mesh；--no-join 关闭合并，每个设备部件保持独立 Mesh / Node，保证点击单独拾取子模型正常。如果你去掉这个参数，所有同材质零件会合并成一个整体，无法单点选中设备。
  6. --no-prune：默认会自动删除「不含 Mesh、不含贴图、无数据的空中间父节点」；CAD 导出模型大量层级都是空父节点，用来承载完整层级路径；--no-prune 禁止删除空父节点，保留完整原始层级链路，拾取时能拿到完整路径。缺点：层级嵌套深度不变，依然有栈溢出风险，只能保证层级完整。
  7. --no-flatten：禁止展平节点树，不会把多层父子结构强制拉成单层；和 --flatten true 完全相反，保护原始父子层级关系。
  8. --texture-compress webp：将模型内所有贴图纹理压缩为 WebP 格式；优势：体积比 PNG/JPG 小很多，Cesium 浏览器完美支持，大幅降低模型加载体积。
  9. --compress meshopt：使用 Meshopt 无损顶点缓冲压缩；仅压缩坐标、法线、UV 等几何二进制数据，不修改节点、层级、Mesh 结构，压缩率高、Cesium 原生支持，不会破坏拾取功能。

注：如需使用点击查看物体轮廓功能，请使用以下方式进行压缩（使用时请自行更改输入、输出文件名）：

第一步：修剪、清理无用数据

gltf-transform prune bz.glb bz_prune_only.glb

第二步：去重、合并重复资源数据

gltf-transform dedup bz_prune_only.glb bz_dedup.glb

第三步：压缩（若第二步成功后文件大小合适，此步骤可省略）

gltf-transform draco bz_dedup.glb bz_draco.glb

关键引入文件：

第一步：引入框架地图关键文件

https://mhc.ixiera.com/mhc/main_min.js

https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js

https://mhc.ixiera.com/mhc/Cesium3DTile.js

第二步：引入加载GLB模型API文件

js/renderGLBmodel.min.js

 

  1. 初始化

const glbModel = new GLBModel(viewer);

实例代码：

const glbModel = new GLBModel(viewer);

glbModel.load(url, {
          longitude: lng,
          latitude: lat,
         altitude: alt,
 });

 

  1. 参数说明

viewer：创建的view实例。

url：文件路径。

longitude基础点 - 经度。

latitude基础点 - 维度。

altitude基础点 - 海拔高度。

option自定义配置项（非必填）

options.scale:{Number} 模型缩放比例，默认值10；

options.fClick: {Boolean} 是否开启（左）点击事件(返回拾取信息) - 默认触发显示信息窗；

 

  1. show显示/hide隐藏

glbModel.show();

glbModel.hide();

 

  1. destroy销毁 

glbModel.destroy();

 

  1. updatePosition更新模型GLB位置

实例：

glbModel.updatePosition( lng,  lat,  alt);

 

  1. updateModelUrl更新GLB模型文件

实例：

glbModel.updateModelUrl(newUrl);

 

  1. 完整代码实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>加载GLB模型</title>
        <script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
        <script src="js/renderGLBmodel.min.js"></script>
        <style type="text/css">
            body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
            .cesium-viewer, 
            .cesium-viewer-cesiumWidgetContainer, 
            .cesium-widget, 
            .cesium-widget canvas{width: 100%;height: 100%;}
            .btns-row{position: absolute; top: 15px;left: 15px;}
            .btns-row button{padding: 5px 15px;border-radius: 2px;margin-right: 15px;font-size: 12px;}
        </style>
    </head>
    <body>
        <div id="container" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
        <div class="btns-row">
            <button onclick="test()">加载模型</button>
            <button onclick="toPosition()">更新位置</button>
            <button onclick="toGLBUrl()">更新GLB模型</button>
            <button onclick="toHide()">隐藏</button>
            <button onclick="toShow()">显示</button>
            <button onclick="toDestroy()">销毁</button>
        </div>

        <script type="text/javascript">
            const view3D = MchCesium.init('container', true);
            const viewer = MchCesium.viewer;
            
            // 初始化
            const glbModel = new GLBModel(viewer);
            
            const lng = 116.391275;
            const lat = 39.9075;
            const alt = 300;
            const url = "source/moxin_draco.glb";
            
            async function test(){
                await glbModel.load(url, {
                    longitude: lng,
                    latitude: lat,
                    altitude: alt,
                });
                console.log(glbModel)
            }
            // 隐藏 - GLB模型
            function toHide(){
                if(glbModel) glbModel.hide()
            }
            // 显示 - GLB模型
            function toShow(){
                if(glbModel) glbModel.show()
            }
            // 销毁 - GLB模型
            function toDestroy(){
                if(glbModel) glbModel.destroy()
            }
            // 更新 - GLB模型 - 位置
            function toPosition(){
                if(glbModel) glbModel.updatePosition(lng+0.04, lat+0.001,  alt)
            }
            // 更新 - GLB模型 - 文件
            function toGLBUrl(){
                let n_url = 'source/CesiumDrone.glb';
                if(glbModel) glbModel.updateModelUrl(n_url);
            }
            
        </script>
    </body>
</html>

 

  1. 效果展示

Demo地址：https://mhc.ixiera.com/mhc/mchmap/bimModelGLB/index.html

 

本文档来自—MCHMAP 丨 地图引擎平台