云服务器内容精选

华为云首页用户手册

应用资产

ISDP-煤矿3D模型应用:如何使用资产

如何使用资产订购并安装部署煤矿3D模型应用资产到对应的开发环境。相关操作请参见如何订购&部署资产。创建应用。在开发环境首页的“项目”页签单击“行业应用”，再单击“创建行业应用”。如图1所示，输入标签和名称，选择分类，单击“创建”，创建后，页面跳转到应用开发页面。图1 创建行业应用创建高级页面并引用组件。在应用的开发页面，如图2所示，单击应用右侧的，选择“目录”。图2 创建目录在弹出的“添加目录”页面，如图3所示，输入目录名称（Page），单击“保存”。图3 添加目录如图4所示，单击规划存放页面目录Page右侧的，选择“高级页面”。图4 创建高级页面在弹出的“添加高级页面”页面，如图5所示，选择“空白”模板，输入页面的“标签”为“test”，“名称”为“test”，单击“添加”。图5 添加高级页面页面创建完成后，自动进入编辑页面，如图6所示。图6 编辑页面如图7所示，查找到组件“煤矿3D模型库”，拖入到页面内容区域。图7 选择组件如图8所示，在页面内容区域，选中组件，右侧展示该组件的属性设置区域，在“组件属性配置”的“属性”页签，设置组件的基本信息，如组件标题、组件名称、位置、边框、背景等信息。图8 设置“属性” 配置模型。支持使用内置模型或自定义模型。使用内置模型如图9所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，选择内置的模型。图9 选择内置模型如果配置了自定义模型，则内置模型失效。使用自定义模型将模型文件（支持gltf, glb, obj, 3mf格式）上传到OBS桶。在右侧该组件的属性设置区域的“数据”页签下，配置获取3D模型的API桥接器, 通过该接口获取对应的模型。图10 配置模型API 接口出参的格式要求如图11所示。图11 接口出参的格式如图9所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，选择自定义模型的格式。图12 选择模型格式拾取部件与坐标。（可选，解决跨域请求问题，如果涉及到跨越问题，请执行该操作）修改站点域名。如图13所示，修改站点域名为当前环境的域名。图13 修改站点域名如图14所示，在右侧该组件的属性设置区域的“属性”页签下的“组件参数”区域，勾选“显示辅助面板”（辅助鼠标拾取）。图14 勾选“显示辅助面板” 如图15所示，保存并发布页面。图15 保存并发布如图16所示，预览页面。图16 预览如图17所示，在预览页面，鼠标单击部件获取部件名称（Part），以及单击位置的3D坐标（Point）。只有单击模型或地板，才能拾取到坐标。图17 拾取部件与坐标配置TIPs与部件颜色。如图18所示，在右侧该组件的属性设置区域的“事件”页签下，单击“组件加载”对应的设置按钮。图18 组件加载在弹出的“事件编辑”页面中，如图19所示，新建自定义动作。图19 新建自定义动作如图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}。单击“确定”，完成配置。保存发布并预览，效果如图21所示。图21 预览效果

ISDP 应用资产