Tooltip面板.md 8.5 KB
Tooltip面板
::: details 目录 [[toc]] :::
指令说明
目前对模型添加Tooltip面板的方式只有一种 就是前端自定义一个Vue组件,然后引擎获取组件实例,并将其显示到3D场景中的特定位置,后续会支持Canvas方式添加Tooltip
添加面板
::: details 完整结构
{
"CmdName": "PEChengWebView",
"Time": "",
"Platform": "",
"CmdParams": {
},
"OrderList": [{
"OrderName": "PELoadWebView",//--必填-- 加载VUE组件
"OrderParams": {
"ViewList": [{//--必填-- 需要显示web面板的SourceID
"ObjectID": "",//--必填-- SourceID
"ViewName": "",//--必填-- Vue组件名称
"ViewParam": {},//--必填-- 需要传递给Vue组件的参数对象
"IsLimit": true,//该View是否需要需要常驻显示在场景中 默认为True
"Matrix": {//面板的默认显示参数
"ScalePosition": {//View的缩放逻辑
"MinScalePosition": 0,//最小缩放距离
"MaxScalePosition": 0//最大缩放距离
},
"Translate": {//View距离Mesh的偏移量
"x": 100,
"y": 100,
"z": 100
},
"DefaultScale": 0.2//View的默认缩放系数
}
}]
}
}
]
}
:::
原理说明
引擎根据ObjectID找到对应的模型,然后计算出包围盒的大小,在根据ViewName从UI上获取该Vue组件的的Dom实例,将该Dom元素显示到模型正上方默认的位置
参数说明
::: details ObjectID 模型对应的SourceID :::
::: details ViewName 自定义Vue组件的名称,该组件必须现在BimView.vue中注册过 :::
::: details ViewParam 需要显示ToolTip面板的数据源 :::
::: details IsLimit 由于每一个ToolTip面板都是一个Dom实例,如果一次性显示太多面板会造成卡顿,所以引擎会自动根据当前场景中面板的数量,自动进行添加删除,例如一共显示50个面板,那么引擎会自动删除二十个,只显示距离相机最近的30个面板,但是如果希望某个面板一直显示在场景中,则设置IsLimit为false即可。 :::
::: details ScalePosition Vue组件添加到场景中后会默认设置为DefaultScale设置的缩放系数,该缩放系数是前端与美术一起商定的默认显示大小,然后再MinScalePosition与MinScalePosition距离范围内随着相机拉远View自动放大,相机拉近自动缩小,小于MinScalePosition或者大于MinScalePosition不进行缩放控制 :::
::: details Translate 面板默认显示的位置是模型包围盒的正上方,如果默认位置并不符合需求,则可以通过该属性设置X,Y,Z三个方向上的偏移量 :::
::: details DefaultScale 因为UI中的单位是像素,但是在3D中并没有像素的概念,所以UI中看到的大小并不是3D中看到的大小,所以需要通过该属性调整面板显示大小。 :::
使用说明
::: details 简单例子 1.编写自定义的Vue组件 例如名字叫:HelloWorld.vue
<template>
<div id="SpaceView">
<div id="BottomBox" class="Space">{{Param.content}}</div>
</div>
</template>
<script>
export default {
props:{
Param:Object
},
data:function () {
return {
}
}
}
</script>
<style scoped>
#SpaceView{
width: 206px;
height: 45px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.Space{
width: 206px;
height: 45px;
border: 1px solid;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
#BottomBox{
border: yellow;
background-color: #FE5E86;
}
</style>
2.在BIMView.vue中声明注册自定义组件
3.发送显示Tooltip面板指令
{
"CmdName": "PEChengWebView",
"Time": "",
"Platform": "",
"CmdParams": {
},
"OrderList": [{
"OrderName": "PELoadWebView",
"OrderParams": {
"ViewList": [{
"ObjectID": "*******",
"ViewName": "HelloWorld",
"ViewParam": {
"content": "动态面板模拟数据源"
},
"IsLimit": true,
"Matrix": {
"ScalePosition": {
"MinScalePosition": 0,
"MaxScalePosition": 0
},
"Translate": {
"x": 100,
"y": 100,
"z": 100
},
"DefaultScale": 0.2
}
}]
}
}
]
}
:::
卸载面板
::: details 完整结构
{
"CmdName": "PEChengWebView",
"Time": "",
"Platform": "",
"CmdParams": {
},
"OrderList": [
{
"OrderName": "PERemoveWebView",//卸载View组件
"OrderParams": {
"ViewList": [//--必填-- 需要卸载的SourceID列表
""
]
}
}
]
}
:::
更新面板数据源
::: details 完整结构
{
"CmdName": "PEChengWebView",
"Time": "",
"Platform": "",
"CmdParams": {
},
"OrderList": [
{
"OrderName": "PEUpdateData",//更新数据
"OrderParams": {
"IDList": [{//--必填-- 需要更新的SourceID列表
"ObjectID": "",//--必填-- SourceID
"ViewParam": {//--必填-- 需要更新的数据
}
}]
}
}
]
}
:::
面板刷新频率设置
::: details 完整结构
{
"CmdName": "PEChengWebView",
"Time": "",
"Platform": "",
"CmdParams": {
},
"OrderList": [
{
"OrderName": "PEUpdateType",//设置View刷新的模式
"OrderParams": {
"Type": 0,//0 表示 每一帧 固定时间间隔去计算一次 1 表示只有在鼠标结束操作之后才会去计算一次view
"TimeOut": 500//刷新的时间间隔
}
}
]
}
:::
指令常见问题说明
View的显示逻辑
如果场景中添加同时添加太多的view会导致性能消耗严重,而相同的dom元素又无法复用，所以在配置文件中MaxViewNumber属性设置了场景中同时存在View的数量限制
默认再相机视野范围内并且距离场景中心点最近的30个View才会显示
IsLimit控制是否接受限制,如果等于false不受限制则只要view出现在相机视野范围内就会一直常驻显示
View的刷新逻辑
刷新方式1：在鼠标操作场景过程中每500毫秒修改一次View的位置缩放等信息
刷新方式2：再鼠标操作场景结束之后500毫秒修改一次View的位置缩放等信息
默认方式为刷新方式1
View的缩放逻辑
View添加到场景中后回默认设置为DefaultScale设置的缩放系数,该缩放系数是前端与美术一起商定的默认显示大小,然后再MinScalePosition与MinScalePosition距离范围内随着相机拉远View自动放大,相机拉近自动缩小,小于MinScalePosition或者大于MinScalePosition不进行缩放控制
View的显示位置控制
View默认显示为Mesh包围盒的正上方10单位的位置,然后以此为原点进行Translate设置的偏移量
View组件数据刷新
Web平台直接修改PELoadWebView指令传入的ViewParam也可以修改面板中的数据源,但是强烈建议都通过PEUpdateData指令去进行修改数据源,因为直接修改会造成如果更新数据源出现bug很难浮现出问题。通过指令修改可以有效追踪数据是如何呗修改的。