1、模袋引擎简介

Modelo是集美观与性能为一体、基于WebGL的三维轻量化BIM引擎。其中，Modelo API是Modelo所有产品的核心框架。基于Modelo API可以非常方便的创建功能丰富的BIM行业应用。 开发者只需专注在业务逻辑的开发，将数据存储、处理和显示等基础功能交给Modelo API完成。

2、将模袋引入Vue项目

一个开发者账号可以承载一个应用程序的开发，每一个应用程序都有相应的密钥，即App Token。这个密钥是访问此应用程序相关数据的口令。首先，我们需要登录模袋官网Modelo Build，点击dashboard左下角的用户头像，获取自己的应用程序密钥，如下图所示。

Modelo API所有功能以前端Javascript函数的方式提供，官方提供了一个Javascript包，只需要将这个包嵌入到应用程序的HTML5代码中就可以使用Modelo API的功能。官方推荐直接 链接到Modelo API的公开链接。这样开发的应用程序将自动得到最新的穩定代码，缺陷和错误修复。如果开发者希望自己保存modelo-2.8-lts.js，对于每次更新需要自己下载新的API 文件并且手动升级。

在Vue项目里，我们可以在index.html文件里面将下面两个script引入，如下图所示。

<script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapi-2.8-lts.js" type="text/javascript"></script>

<script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapiui-2.2-lts.js" type="text/javascript"></script>

接着，我们就可以在vue文件里面初始化Modelo，（比如我是在mounted周期里面初始化的），如下图所示。这里的appToken就是上面获取的App Token。

然后我们就可以开始新建各种viewer实例、使用各种Modelo API了。举个例子，我们现在要开发一个模型视窗，按以下四步就能基本实现：①登录官网后点击示例跳转到M.Build API Samples页面，②点击“模型视窗|model-viewer”，③再点击页面右下角的“View source”按钮，就可以看见github上的示例代码。如下图所示。④由于前面已经初始化了Modelo，所以这里只需从var viewer=new Modelo.View.Viewer3D(“modelo”,{这行到末尾部分复制粘贴到项目中相应的方法内就行。至此，我们已经成功把模袋引入vue项目中并开发使用。

3、模袋开发过程中遇到的问题及解决方法

由于官方文档实在不够完善，有时候还会有bug，所以我们开发时会遇到一些问题不能自己解决，只能与模袋工程师沟通。下面是我开发过程中遇到的问题及解决方法汇总，希望能对大伙有帮助。

①我们是web端开发为主，这里的isMobile可以写成isMobile：false，也可以直接去掉，像这样var modelViewer = new Modelo.View.Viewer3D("model")。

当然还可以动态判断当前运行设备类型，并进行开关控制，如下图。

有些移动端操作行为还是需要用移动端模袋viewer支持。需要注意的是：模袋移动端使用的是WebGL1.0版本，没有完全兼容到最新版本所有api，遇到问题可以试着关闭isMobile，暂时用web端模袋viewer。

②不能同时初始化两个及以上相同的viewer，我们想要重新初始化一个viewer时需要先调用viewer对象的destroy方法把它注销。在Vue项目中我们可以将Modelo对象和viewer实例定义成全局的，这样就可以直接调用，在typescript下也避免了许多格式问题。最重要的是能解决页面切换或路由跳转时把已初始化的Modelo对象或已实例化的viewer马上销毁问题。

③“模型对比视窗|model-compare-viewer”功能主要用于对比两个相似的模型，如果两边加载的模型差异太大可能会导致初始视角偏离问题、渲染炸裂问题等等。

④“相机控制|camera-manipulation”功能之前只支持前后左右上下控制，不支持自由控制相机视角。但是现在模袋在后台已经开放了通过键盘控制相机视角移动，并且可以通过viewer.getCamera().core.eye来获取当前相机位置。我们只需要在创建viewer实例后加上键盘监听功能。

⑤“html标签定位|html-labels”功能是通过实时监听并控制一个html标签的位置来实现定位的，由于 window.viewer.getCamera().project()不支持传多个点的三维坐标并计算返回对应的二维坐标，所以我们只能用循环来同时计算改变多个标记的二维坐标。

除此而外，我们添加标记的时候可以像下图这样用自定义文字和图片。

⑥“相机漫游|camera-navigator”功能可以通过cameraNavigator.setSpeed(0.5)来设置漫游速度，但不能在漫游过程中设置，不然会导致漫游进度突然回退或直接到达终点的情况发生。一个比较好的交互是：设置新的漫游速度后重新开始漫游。另外，模袋现在也不提供api获取漫游进度。默认的相机视角是与点重合的，在某些场景下可能体验就不好，比如漫游点选在地面时漫游就会卡在地中间，这时可以通过给z坐标加上一个值（单位是米）来抬高相机视角，如下图。相机漫游还有一个地方需要注意，官方示例代码中修改了模型的渲染，会导致模型看上去比较模糊，我们可以自定义修改回来。

⑦“动态流线|animating-ribbon”功能可以用来实现划线等。我们会用ribbon.setParameter("platteTexture", "./warm.png")来设置流线的背景图片，这里的图片资源可以在data里面直接声明，然后调用就行。可以不用require方式，如下图所示。

⑧“BIM信息树|bim-tree”功能，该功能是模袋内置功能，不对外开放api，需要我们自己拼接信息树。首先我们通过Modelo.BIM.getTreeInfo()获取模型信息，如下图，总共分为6层，从父级到子级分别是"models"、"levels"、"categories"、"families"、"types"、"elements"。前五层每层中都有下一层的数组，最后一层“elements”展开是构件元素信息。使用递归算法可以拼接好整个模型的信息树，也可以选择异步加载等方式。

⑨“备注卡片|comments”功能可以用来保存当前模型浏览视角，以及任意字符串信息，我们可以先巧妙保存一个对象字符串、数组字符串等等，再在需要的时候处理为我们想要的类型。需要注意的是这里保存的模型浏览视角是自动随着comments保存，如果我们想单独保存视角信息，需要另外写接口保存。

10“剖面|section”功能需要注意的是在剖切时，剖面1、2、3的鼠标移动方向和剖面移动方向不尽相同。在1时是同向的，在2时是反向的，在3时是按横向进度条方式来拖动的。且该剖切方式固定，无法自定义修改。

11“改变构件材质|change-elements-material”功能只在想要改变模型构件材质的构件本身有默认材质的条件下生效。如果构件本身没有材质也就不存在改变一说了，只能改变其颜色。

12“截屏|dump-screen”功能会截取当前Viewer视图，返回的是base64图片流，可以挂在img标签的src属性或a标签的href属性上直接使用。需要注意的是截屏背景颜色默认是light gray，如果想要其它背景颜色需要在dumpScreen()方法中传入rgb数组作为第三个参数。还有Viewer的宽高和dumpScreen()方法中设置的宽高需要一致才能保证“所见即所截”。

13“自动旋转|camera-auto-rotation”功能会让模型一直围绕中心轴逆时针旋转，适合一些模型自动展示场景。这里的rotate()方法第一个参数为每次旋转的角度theta，第二个参数为每次旋转的角度phi。requestAnimationFrame()方法会返回一个非零值，可以传这个值给cancelAnimationFrame()方法以暂停自动旋转功能。

14“离线加载模型”功能可以通过本地模型文件直接加载模型。我们需要将convertedUrls数组中每个文件都下载保存到本地同一个文件夹下。需要注意的是：下载的模型文件中存在的后缀为gz的文件， 是模型在上传转换中进行了变更；需要将这些文件的gz后缀去除。还有使用离线加载功能时，调用progress时会直接返回完成度1，不能返回实时加载的进度。

然后在调用loadModel()方法时将倒数第二个参数设置为true，最后一个参数设置为模型文件存放地址，就能离线加载该模型了。

15“二三维联动|2D-3D”功能使用场景很多，它可以给用户更直观的图模查看体验。要实现该功能除了前端调用api外，还需要通过插件处理、上传模型时勾选平面图信息（处理后的svg平面图带有模型对应的构件ID，这样才能实现两者间互选）。

目前模袋只支持revit模型的插件处理，即只能查看revit等模型的二三维联动。由于现在revit插件勾选平面图信息后上传模型成功率较低，并且上传后的模型不能直接下载，只能在本地目录获取，所以不是一个稳定可用的功能，还需要等待模袋优化后开发使用。

16“轨迹|trail”功能由于很久没有人维护，所以不推荐使用，可以用动态流线代替。

17使用update()方法修改模型名称不会修改构件中模型的名称，也就是说修改后通过Modelo.BIM.getTreeInfo()获取的模型信息中名称还是没变。

18使用selectElementTool.setClearselectEnabled(false) 可以让鼠标点击模型空白处时不会取消构件选中状态。

19使用SelectElements.setClearselectEnabled(true)和SelectElements.pick([],false)可以实现取消选中构件。

20使用upload API上传模型，返回的downloadUrl(下载链接)不是永久有效的，需要调用Modelo.Model.get()获取ModelData，得到最新的downloadUrl。

4、总结

以上就是我目前模袋开发中遇到的一些主要问题及解决方法。还有一些小问题就不一一列举了，相信随着官方文档的完善，我们的开发过程会更加顺利。个人建议开发时可以选择加载轻便的模型，这样能省去很多等待模型加载的时间，在功能开发时体验也更加顺畅。