煤矿3D模型应用

描述

煤矿3D模型应用提供了煤矿领域设备3D模型，可以基于此快速开发3D模型，在大屏或应用中展示。

开放能力

煤矿3D模型应用提供了煤矿领域设备3D模型，应用中内置模型，可以直接使用内置的模型进行定制，也支持通过模型API接口，自定义模型。

内置模型：护盾式掘进机、挖煤机、掘进机、防爆运输车、设备列车、水泵设备、刮板运输机、转载运输机；自定义模型使用说明请参见如何使用资产中4的说明。

如果配置了自定义模型，则内置模型失效。

如何使用资产

1. 订购并安装部署煤矿3D模型应用资产到对应的开发环境。

   相关操作请参见如何订购&部署资产。

2. 创建应用。
   1. 在开发环境首页的“项目”页签单击“行业应用”，再单击“创建行业应用”。
   2. 如图1所示，输入标签和名称，选择分类，单击“创建”，创建后，页面跳转到应用开发页面。
      图1 创建行业应用
      

3. 创建高级页面并引用组件。
   1. 在应用的开发页面，如图2所示，单击应用右侧的，选择“目录”。
      图2 创建目录
      
   2. 在弹出的“添加目录”页面，如图3所示，输入目录名称（Page），单击“保存”。
      图3 添加目录
      
   3. 如图4所示，单击规划存放页面目录Page右侧的，选择“高级页面”。
      图4 创建高级页面
      
   4. 在弹出的“添加高级页面”页面，如图5所示，选择“空白”模板，输入页面的“标签”为“test”，“名称”为“test”，单击“添加”。
      图5 添加高级页面
      

      页面创建完成后，自动进入编辑页面，如图6所示。

      图6 编辑页面
      
   5. 如图7所示，查找到组件“煤矿3D模型库”，拖入到页面内容区域。
      图7 选择组件
      
   6. 如图8所示，在页面内容区域，选中组件，右侧展示该组件的属性设置区域，在“组件属性配置”的“属性”页签，设置组件的基本信息，如组件标题、组件名称、位置、边框、背景等信息。
      图8 设置“属性”
      

4. 配置模型。

   支持使用内置模型或自定义模型。

   • 使用内置模型
     1. 如图9所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，选择内置的模型。
        图9 选择内置模型
        
        

        如果配置了自定义模型，则内置模型失效。

   • 使用自定义模型
     1. 将模型文件（支持gltf, glb, obj, 3mf格式）上传到OBS桶。
     2. 在右侧该组件的属性设置区域的“数据”页签下，配置获取3D模型的API桥接器, 通过该接口获取对应的模型。
        图10 配置模型API
        

        接口出参的格式要求如图11所示。

        图11 接口出参的格式
        
     3. 如图9所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，选择自定义模型的格式。
        图12 选择模型格式
        

5. 拾取部件与坐标。
   1. （可选，解决跨域请求问题，如果涉及到跨越问题，请执行该操作）修改站点域名。
      如图13所示，修改站点域名为当前环境的域名。

      图13 修改站点域名
      
   2. 如图14所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，勾选“显示辅助面板”（辅助鼠标拾取）。
      图14 勾选“显示辅助面板”
      
   3. 如图15所示，保存并发布页面。
      图15 保存并发布
      
   4. 如图16所示，预览页面。
      图16 预览
      
   5. 如图17所示，在预览页面，鼠标单击部件获取部件名称（Part），以及单击位置的3D坐标（Point）。
      

      只有单击模型或地板，才能拾取到坐标。

      图17 拾取部件与坐标
      

6. 配置TIPs与部件颜色。
   1. 如图18所示，在右侧该组件的属性设置区域的“事件”页签下，单击“组件加载”对应的设置按钮。
      图18 组件加载
      
   2. 在弹出的“事件编辑”页面中，如图19所示，新建自定义动作。
      图19 新建自定义动作
      
   3. 如图20所示，编辑自定义动作，单击“确定”。
      图20 自定义动作
      
      • 监听“3d-rendered”组件渲染完毕事件

        var _ref = eval('{widgetName}').el || [], $ctn = _ref[0];
        function onStatusChg(event) {
          if (event.status !== ‘3d-rendered') {
            return;
          }
          $ctn.removeEventListener (‘change-cesium-map-status-{widgetName}’, onStatusChg);  //  一定要注销事件
           // todo
        }
         if ($ctn) {
          $ctn.addEventListener('change-cesium-map-status-{widgetName}', onStatusChg);
        }

        

        使用组件的widgeName替代{widgetName}。

      • 配置部件颜色

        function onStatusChg(event) {
           …
          var options = event.options;   // 获取组件的当前配置
          var highlights = [
            {
              name: /^立方体\.3-0$/,    // 使用正则表达式匹配部件的名称，凡是能匹配的部件都使用该颜色着色
              color: 0x62b0f7,
            },
          ].concat(options.highlights || []);
         // todo
        }

      • 配置TIPs

        function onStatusChg(event) {
           …
          var tips = [{
                id: ‘main’,     // 支持多个tips，但id不要重复
                path: [        // 构建tips虚线的顶点，坐标可以通过鼠标拾取
                  [-1.5530501109036654, 9.980578575048225, 0.322040379966708],
                  [-1.5530501109036654, 11.980578575048225, 0.322040379966708],
                ],
                values: [ {      // tips表格内的数据
                    label: '截割电机功率’,      
                    value: '260kW',
                  }, {
                    label: '截割头转速',
                    value: '37r/min',
                  }, {
                    label: '油泵电机功率',
                    value: '132kW',
                  }], 
               }];
            // todo
        }

      • 触发修改组件配置事件

        function onStatusChg(event) {
           …
        
          threeUi.eventBus.$emit('change-three-models-props-{widgetName}', {
            highlights: highlights,
            tips: tips，
          });
        }

        

        使用组件的widgeName替代{widgetName}。

   4. 单击“确定”，完成配置。

7. 保存发布并预览，效果如图21所示。
   图21 预览效果