Document.md 38 KB

目录

[TOC]

轻量化模型加载原理

1.建模人员将Revt模型文件或者FBX格式的模型文件通过轻量化程序生成对应的二进制文件然后上传到后台服务器中生成模型服务

2.通过本程序将模型服务中的二进制文件下载解析并与前端传入的bimID对应从而找到所有需要加载的模型并使用Three.js加载

3.场景加载完毕之后前端通过传递JSON格式的消息这种方式进行控制3D场景

前端使用方式

1.前端开发人员需要显示3D场景的页面或者组件中通过程序提供的VueViewController类初始化一个控制类,改控制类会自动接收指令实现加载场景卸载场景的任务

2.控制器初始化完毕之后就可以根据具体的场景业务通过PEMessage类型来发送各种JSON格式的控制指令

集成方式 (VUE)

1.安装依赖库

npm install persagy_web3d

2.在需要显示的页面或者组件中创建一个用于渲染3D场景的Div容器以及初始化一个帮助类

  • 在模板中初始一个div作为3d渲染的容器
    <!-- 3D渲染容器 -->
    <div id="CanvasRoot"></div>
  • 在vue对象data中添加ViewList属性用于将用户自定义的vue组件渲染到3D场景中
export default {
  data: function () {
    return {
      ViewList:[]
    };
  },
}
<template>
  <div id="BIMRootView">
    <!-- 动态初始化DOM元素用于在3D场景中显示Vue组件 -->
    <template>
      <div
        style="display: inline-block; width: auto; height: auto"
        v-for="item in ViewList"
        :key="item.id"
        :id="item.id"
      >
        <component :is="item.name" :Param="item.data"></component>
      </div>
    </template>
  </div>
</template>
  • 初始化Vue场景渲染帮助类 VueViewController
import WEB3D from 'persagy_web3d'

//初始化3D场景
this.sceneConroller =new WEB3D.VueViewController(this);
//设置宣绒容器
this.sceneConroller.loadSceneView("CanvasRoot");
  • 组件释放的时候需要通知控制器卸载场景
destroyed: function () {
  //在组件卸载之前通知3D场景对象卸载场景
  this.sceneConroller.destroyed();
  this.sceneConroller = null;
}

样例:BIMView.vue 可直接粘贴使用

<template>
  <div id="BIMRootView">
    <!-- 3D渲染容器 -->
    <div id="CanvasRoot"></div>
    <!-- 动态初始化DOM元素用于在3D场景中显示Vue组件 -->
    <template>
      <div
        style="display: inline-block; width: auto; height: auto"
        v-for="item in ViewList"
        :key="item.id"
        :id="item.id"
      >
        <component :is="item.name" :Param="item.data"></component>
      </div>
    </template>
  </div>
</template>

<script>

//引用3D类库
import WEB3D from 'persagy_web3d'


export default {
  data: function () {
    return {
      ViewList:[]
    };
  },
  components: {
  },
  created: function () {
  },
  mounted: function () {
    //初始化3D场景
    this.sceneConroller =new WEB3D.VueViewController(this);
    //设置宣绒容器
    this.sceneConroller.loadSceneView("CanvasRoot");
  },
  methods: {
   
  },
  destroyed: function () {
    //在组件卸载之前通知3D场景对象卸载场景
    this.sceneConroller.destroyed();
    this.sceneConroller = null;
  },
};
</script>

<style scoped>
#BIMRootView {
  height: 100%;
}
#CanvasRoot {
  width: 100%;
  height: 100%;
}

</style>

通信

通信方式

Web与3D场景所有的通信必须通过通用消息或者自定义消息、自定义事件等形式进行通信,不能直接互相调用

消息固定格式

{
        "CmdName": "PEChengScene",//消息名称
        "Time": "",//消息的时间戳
        "Platform": "",//发送消息的平台 WEB IOS ANDROID
        "CmdParams": {//消息参数

        },
        "OrderList": [{//指令列表
                "OrderName": "PELoadScene",//需要执行的指令名称
                "OrderParams": {//执行指令需要的参数
                }
            }
        ]

    }

消息的执行方式

并行

收到一个消息指令会立刻执行不考虑是否有其他消息正在执行或者消息之间是否存在关联或者需要等待,需要根据具体的业务场景决定是否并行

串行

3D场景收到一个消息列表之后会在每个消息体中添加一个名为EndBlock的回调函数,只有该回调函数调用之后才会继续执行下一个消息,如果还有正在执行的消息则整个消息列表会进入等待

通用消息类型

切换场景

加载场景

卸载场景

该消息会将Configs列表中的所有配置文件从后往前依次合并得到该场景最终的配置文件

类库中默认内置了一个通用的场景对象 PublicScene


{
        "CmdName": "PEChengScene",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PELoadScene",//--必填-- 加载场景 
                "OrderParams": {
                    "SceneName": "PublicScene",//--必填-- 需要加载的场景名称
                    "Url": {//指定该场景中加载Mesh的地址,如果不指定则使用配置文件中配置的URL地址
                        "burl": "",
                        "rurl": ""
                    },
                    "Configs": [//该场景需要定制的配置文件
                        "JsonConfig/PorjectConfig.json"
                    ],
                    "SceneParam":{//向指定场景文件传入初始化参数,根据业务场景自定义

                    }
                }
            },
            {
                "OrderName": "PERemoveScene"//--必填-- 卸载场景
            }
        ]

    }

将web面板加载到3D场景中

加载WebView

卸载WebView

WebView更新数据

WebView刷新频率设置

该消息用于将自定义的Vue组件显示到3D场景中

  • 自定义Vue组件接收参数问题

    自定义组件需要声明名为Param的属性用于接收传入组件的参数

        export default {
            props:{
                Param:Object
            },
            data:function () {
                return {
                        
                }
            }
        }
    
  • 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即可,场景中对应的SourceID显示的组件会自动刷新数据,也可以通过PEUpdateData指令修改更新数据,其他平台则必须通过PEUpdateData执行更新View组件的数据信息

{
        "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的默认缩放系数
                        }
                    }]
                }
            },
            {
                "OrderName": "PERemoveWebView",//卸载View组件
                "OrderParams": {
                    "ViewList": [//--必填-- 需要卸载的SourceID列表
                        ""
                    ]
                }
            },
            {
                "OrderName": "PEUpdateData",//更新数据
                "OrderParams": {
                    "IDList": [{//--必填-- 需要更新的SourceID列表
                        "ObjectID": "",//--必填-- SourceID
                        "ViewParam": {//--必填-- 需要更新的数据

                        }
                    }]
                }
            },
            {
                "OrderName": "PEUpdateType",//设置View刷新的模式
                "OrderParams": {
                    "Type": 0,//0 表示 每一帧 固定时间间隔去计算一次 1 表示只有在鼠标结束操作之后才会去计算一次view
                    "TimeOut": 500//刷新的时间间隔
                }
            }
        ]

    }

相机定位

模型定位

相机位置还原/移动到指定位置

将相机以动画的形式定位到具体的设备或者空间

{
        "CmdName": "PECameraLookAtFor3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [
            {
            "OrderName": "PELookAt",//--必填-- 相机定位
            "OrderParams": {
                "ObjectID": "",//--必填-- SourceID
                "Angle": 45,//相机距离目标所在水平面的的仰角
                "Scale": 20,//相机距离目标包围盒的距离
                "Time": {//相机定位动画时间控制
                      "PositionTime": 1000,//默认1000毫秒
                      "TargetTime": 500//中心点变更的时间 默认500毫秒
                },
                "Position": {//自定义相机位移到的目标坐标
                    "x": 100,
                    "y": 100,
                    "z": 100
                }
            }
        },
        {
                "OrderName": "PELookAtPosition",//相机运动到指定的位置
                "OrderParams": {
                    "CustomPosition": {//自定义相机位置信息 如果不填写表示自动返回到场景初始化的默认位置
                        "Position": {//相机位置
                            "x": 100,
                            "y": 100,
                            "z": 100
                        },
                        "Rotation": {//相机角度
                            "x": 100,
                            "y": 100,
                            "z": 100
                        },
                        "Target": {//场景的中心点
                            "x": 100,
                            "y": 100,
                            "z": 100
                        }
                    },
                    "Time": {//动画时间
                        "PositionTime": 1000,//平移位置的动画时间
                        "RotationTime": 1000,//平移角度的动画时间
                        "TargetTime": 1000//中心点变更的时间
                    }
                }
        }
    ]

}

显示隐藏模型

显示模型

隐藏模型


{
        "CmdName": "PEShowOrHidden3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PEShowObject",//--必填-- 显示模型
                "OrderParams": {
                    "ObjectID": []//--必填-- SourceID列表
                }
            },
            {
                "OrderName": "PEHiddenObject",//--必填-- 隐藏模型
                "OrderParams": {
                    "ObjectID": []//--必填-- SourceID列表
                }
            }
        ]

    }

修改模型显示状态样式

设置模型状态

1.可以自定义Mesh的显示效果或者通过GroupKey执行配置文件中已经定义好的通用的显示效果,例如报警样式等配置信息

2.如果不传入GroupKey以及Style属性则表示自动将模型返回到初始化时候的状态

{
        "CmdName": "PEChengState3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
            "OrderName": "PEChengState",//--必填-- 修改模型样式
            "OrderParams": {
                "ObjectID": [],//--必填-- SourceID列表
                "GroupKey": "",//配置文件中定义的编组名称
                "Style": {//自定义样式  style中的样式会覆盖GroupKye中相同的设置
                    "color": "0xFFFFFF",
                    "opacity":0.5
                }
            }
        }]

    }

设置场景后期效果

添加外轮廓

删除外轮廓

说明 后期效果对想能损耗比较明显,但是目前代码逻辑并没有对前端做任何限制,所以需要根据具体业务场景酌情使用 一:轮廓效果 1.逻辑说明 当收到PEAddOutLine一个指令之后会根据ObjectID列表对应的Config配置信息做判断是否需要重新初始一个新的后期对象用于显示轮廓,例如两个配置不同的ObjectList会初始化两个对象,如果配置相同则使用同一个对象显示这些ObjectList的轮廓,初始对象越多性能越差,所以需要尽力避免使用不同的配置效果。


{
        "CmdName": "PESetMeshEspecially",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PEAddOutLine",//为模型添加外轮廓
                "OrderParams": {
                    "ObjectID": [],//--必填-- SourceID列表
                    "Config":{//轮廓的默认配置参数
                        "edgeStrength": 10,//轮廓边缘强度 可以认为是轮廓粗细
                        "edgeGlow": 0,//轮廓泛光强度 
                        "edgeThickness": 2,//轮廓泛光浓度
                        "pulsePeriod": 0,//轮廓闪烁频率 默认0 表示不闪烁
                        "visibleEdgeColor": "#010793",//没有遮挡区域的轮廓显示颜色
                        "hiddenEdgeColor": "#010793"//遮挡轮廓的显示颜色
                    }
                }
            },
            {
                "OrderName": "PERemoveOutLine",//删除外轮廓
                "OrderParams": {
                    "ObjectID": []//--必填--
                }
            }
        ]
    }

控制3D场景

2D控制场景平移旋转缩放

控制场景是否禁用

客户端通过虚拟摇杆等交互行为控制3D场景

  • 客户端控制方式:以一个二维坐标系作为控制坐标系,x取值为-1到1 y取值为-1到1 x向右为正 y向上为正

  • 平移旋转需要发送x,y的偏移系数

  • 缩放只需要发送y的偏移系数

  • 平移 默认偏移量为10个单位*Value设置的X,Y系数

  • 旋转 默认偏移量为0.1*Value设置的X,Y系数

  • 缩放 默认缩放为1*Value设置的Y系数

{
        "CmdName": "PEController3dScene",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
            "OrderName": "PEController",//--必填-- 客户端通过虚拟摇杆等交互行为控制3D场景
            "OrderParams": {
                "Mode":0,//--必填-- 控制模型 0 平移 1 旋转 2 缩放
                "Value": {//--必填-- 控制速度系数
                    "x": 1,
                    "y": 1
                }
            }
        }]

    }

鼠标控制行为

设置SourceID点击对应的响应事件

{
        "CmdName": "PEMouseController3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {},
        "OrderList": [
            {
                "OrderName": "PESourceIDClick",//--必填-- 设置SourceID点击的接收事件
                "OrderParams":{
                    "ObjectID":[//SourceID列表
                        ""
                    ],
                    "ClickEventName":[//事件列表 不允许重复注册
                        ""
                    ]
                }
            }
        ]
    }

加载卸载模型

按照管件类型加载模型

根据业务SourceID加载模型

卸载模型

  • PEInitObject指令中设置的URL会覆盖加载场景指令中设置的URL或者配置文件中配置的URL

  • PEInitObject指令中设置的Style会覆盖配置文件中该系统专业或者GroupKey定义的样式信息,具有最高优先级

  • 可以根据具体的业务场景设置EndEventName监听加载进入然后执行相应的消息指令 返回信息:

{
    "Type":1 //0 全部加载失败 1 全部加载完成
}
  • PEInitObject_V2加载逻辑

    首先根据参数rootpath请求并且解析某个项目某个楼层下所有的模型信息得到所有的模型对应的ID,然后根据AllNeedInitSourceID+AllNeedInitSaga排除不需要初始化的模型。 将设置的eq+sapce+saga中设置的ID显示出来,剩余的ID对应的模型进入隐藏状态

{
        "CmdName": "PEInitOrDelete3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [{
                "OrderName": "PEInitObject",//--必填-- 加载模型 方式1 按照Revit中类别进行加载模型组件
                "EndEventName": [//加载完成的事件列表 用于3D加载完成会主动通知前端 
                    ""
                ],
                "OrderParams": {
                    "URL": [{//--必填-- 加载的URL列表
                        "burl": "http://47.104.108.133:8080/",////加载地址 优先级最高
                        "rurl": "api/WebMeshProvider/",
                        "surl": "files/wanda/dikuaibai.FBX",
                        "rootpath": "wanda/F03",
                        "GroupKey": "",//自定义标签 会自动读取配置文件中该标签的定义配置信息来默认设置模型显示样式等行为 由3D开发人员事先定义好即可
                        "EndEventName": [//加载完成的事件列表 ----等FBX加载完成或者所有的系统专业都加载完成之后才会通知----
                            ""
                        ],
                        "Style": {//默认显示的样式,优先级最高 会覆盖GroupKey中的配置信息
                            "color": "0xFFFFFF",//颜色
                            "opacity": 0.1//透明度 0-1
                        },
                        "categories": [{//系统专业
                            "name": "OST_PipeCurves",//系统或者专业
                            "EndEventName": [//当前系统专业加载完成之后的通知事件
                                ""
                            ],
                            "Style": {//该系统专业的样式设置 优先级最高
                                "color": "0xFFFFFF",
                                "opacity": 0.1
                            }
                        }]
                    }]
                }
            },
            {
                "OrderName": "PEInitObject_V2",//--必填-- 加载模型 方式2 根据目前公司业务流程场景
                "EndEventName": [
                    ""
                ],
                "OrderParams": {
                    "URL": [{
                        "burl": "http://47.104.108.133:8080/",
                        "rurl": "api/WebMeshProvider/",
                        "surl": "files/wanda/dikuaibai.FBX",
                        "rootpath": "wanda/F03",//--必填--
                        "GroupKey": "",
                        "EndEventName": [
                            ""
                        ],
                        "Style": {
                            "color": "0xFFFFFF",
                            "opacity": 0.1
                        },
                        "Floor": {//需要加载的楼层的包围壳模型
                            "ID": "",//楼层ID
                            "GroupKey": "",//配置文件中的配置信息
                            "EndEventName": [//结束事件通知
                                ""
                            ],
                            "Style": {//楼层模型显示的样式
                                "color": "0xFFFFFF",
                                "opacity": 0.1
                            }
                        },
                        "AllNeedInitSourceID":[//整个楼层中需要所有需要初始化的设备 空间 的SourceID 具体根据业务场景设置
                            ""
                        ],
                        "AllNeedInitSaga":[//楼层中所有需要显示的管网列表
                            ""
                        ],
                        "Eq": [{//要显示的设备分组列表
                            "ID": [//ID列表
                                ""
                            ],
                            "GroupKey": "",//配置文件中的配置信息
                            "EndEventName": [//结束通知
                                ""
                            ],
                            "Style": {//样式
                                "color": "0xFFFFFF",
                                "opacity": 0.1
                            }
                        }],
                        "Space": [{//要显示的空间分组列表
                            "ID": [//空间ID列表
                                ""
                            ],
                            "GroupKey": "",//配置文件中的配置信息
                            "EndEventName": [//结束事件通知
                                ""
                            ],
                            "Style": {//样式
                                "color": "0xFFFFFF",
                                "opacity": 0.1
                            }
                        }],
                        "Saga": [{//要显示的官网列表
                            "name": "",//管网名称
                            "GroupKey": "",//配置文件中的配置信息
                            "EndEventName": [//管网加载完成的事件通知
                                ""
                            ],
                            "Style": {//管网显示的样式
                                "color": "0xFFFFFF"
                            }
                        }]
                    }]
                }
            },
            {
                "OrderName": "PEDeleteObject",//从内存中卸载模型
                "OrderParams": {
                    "ObjectID": [//SourceID列表
                        ""
                    ],
                    "SystemType":[//所属系统专业
                        ""
                    ],
                    "GroupKey":[//自定义分组
                        ""
                    ]
                }
            }
        ]

    }

本地初始化模型

初始化模型

暂时不具备实际功能作用,目前只用来配合工具在3D场景中设定一个位置 再此位置上支板

{
        "CmdName": "PECreate3dObject",//初始化模型
        "Time": "",
        "Platform": "",
        "CmdParams": {},
        "OrderList": [
            {
                "OrderName": "PECreateObject",//--必填-- 初始化模型
                "OrderParams": {
                    "CustomObjectID": "",//--必填-- 自定义控制ID
                    "CustomPosition":{//自定义空间信息
                        "Position": {//位置
                            "x": 100,
                            "y": 100,
                            "z": 100
                        }
                    },
                    "Style":{//样式
                        "color":"#ffffff",
                        "opacity":0.0
                    }
                }
            }
        ]
    }

场景裁切

场景裁剪

隐藏裁剪

还原裁剪

取消裁剪状态

裁切场景 目前只支持以包围盒的形式进行裁切整个场景


{
        "CmdName": "PEClip3dObject",
        "Time": "",
        "Platform": "",
        "CmdParams": {
           
        },
        "OrderList": [{
                "OrderName": "PEClip",//场景裁切
                "OrderParams": {
                    "ClipStyle": {//裁切样式
                        "BorderColor": "#FFFFFF",//裁切面板边框样式
                        "ClipNormalColor": "#FFFFFF",//裁切面板默认显示颜色
                        "ClipNormalOpacity": 0.1,//裁切面板默认透明度
                        "ClipHighlightedColor": "#FFFFFF",//裁切面板高亮颜色
                        "ClipHighlightedOpacity": 0.1,//裁切面板高亮透明度
                        "MinClipSize": 100//最小裁切距离,当裁切包围盒每个面之间的距离小于100之后将不允许继续裁切
                    }
                }
            },
            {
                "OrderName": "PEVisible",//裁切面板显示隐藏
                "OrderParams":{
                    "Visible":true
                }
            },
            {
                "OrderName": "PERestitution"//还原裁切
            },
            {
                "OrderName": "PECancel"//取消裁切
            }
        ]

    }

3D信息查询

查询SourceID是否已经加载完成

查询初始化状态等信息

{
        "CmdName": "PEWeb3DCodeState",
        "Time": "",
        "Platform": "",
        "CmdParams": {},
        "OrderList": [
            {
                "OrderName": "PESourceIDIsInit",//--必填-- 查询要操作的SourceID是否已经完成
                "OrderParams": {
                    "ObjectID":[//--必填--SourceID列表
                        ""
                    ],
                    "EndEventName":[//--必填--查询结果回调事件列表
                        ""
                    ]
                }
            }
        ]
}

3D异常信息推送

发送异常日志

发送当前点击信息

负责3D场景向客户端推送消息信息

{
        "CmdName": "PESend3dLog",
        "Time": "",
        "Platform": "",
        "CmdParams": {

        },
        "OrderList": [
            {
                "OrderName": "PEError",//发送3D场景产生的异常,日志等信息
                "OrderParams": {
                    "Content": "",
                    "Data": {}
                }
            },
            {
                "OrderName": "PEClick",//3D场景点击事件
                "OrderParams": {
                    "SourceID": ""//点击产生的SourceID
                }
            }
        ]

    }

工具类

PEMessage

说明

负责订阅事件通知 组件从内存中释放的时候记得调用off函数注销监听事件

核心函数

#### on 注册事件

/**
 *UI注册事件
 *
 * @param {*} type
 * @param {*} block (data)=>{}
 * @memberof PEMessage
 */
on(type, block) {}

//eg: data的内容
this.message.on('**',(data)=>{
    //....
})

onMerge 注册一组事件 只有监听的事件全都执行完成才会执行回调函数

/**
 *监听一组事件 只有事件全都执行完成才会执行回调函数
 *
 * @param {*} typeList
 * @param {*} event (dic)=>{} dic {type:data}
 * @memberof PEMessage
 */
onMerge(typeList,event){}

onMergeAny 监听一组事件 其中任意一个执行完成就开始回调通知

/**
 *监听一组事件 只有事件全都执行完成才会执行回调函数
 *
 * @param {*} typeList
 * @param {*} event (dic)=>{} dic {type:data}
 * @memberof PEMessage
 */
onMergeAny(typeList,event){}

emit 给3D发送事件

 /**
 *发送事件
 *
 * @param {*} type
 * @param {*} data
 * @memberof PEMessage
 */
emit(type, data) {}

static emitMessage 发送消息 通过该函数发送的消息会立刻执行,不管当前是否还有正在执行的消息列表

/**
 *向3D发送消息
 *
 * @static
 * @param {*} message
 * @memberof PEMessage
 */
 static emitMessage(message){}

static emitMessageList 发送消息列表

/**
 *向3D发送消息列表
 *
 * @param {*} messageList
 * @memberof PEMessage
 */
static emitMessageList(messageList) {}

off 注销当前对象注册的所有事件通知

 /**
 *注销事件
 *
 * @memberof PEMessage
 */
off() {}

addMiddleware 注册消息过滤的中间件

VueViewController帮助类

说明

改控制类在初始化之后会自动订阅事件然后用于控制场景的加载以及卸载行为

loadSceneView 加载场景订阅事件

/**
 *初始化3D容器
 *
 * @param {*} domID
 * @memberof VueHelpClass
 */
loadSceneView(domID) {}

3D场景的配置文件

通过配置文件可以快速定义3D场景的基本信息 例如背景色 相机的默认位置 角度等信息

配置文件结构 说明请参阅工程配置说明

模板:PorjectConfig.json 可直接粘贴使用

{
  "Url": {
    "burl": "http://192.168.18.111:8000/",
    "rurl": "api/WebMeshProvider/"
  },
  "Other": {
    "WebView": {
      "MaxViewNumber": 30
    },
    "CameraMove": {
      "Angle": 45,
      "Scale": 20
    }
  },
  "Scene": {
    "background": "#151c2a"
  },
  "SceneShowConfig":{
    "IsShowHellp":false,
    "IsSaveBgFileContent":false
  },
  "Camera": {
    "set_position": [100, 100, 100],
    "set_rotation": [0, 0, 0],
    "set_up": [0, 0, 1]
  },
  "Controls": {
    "set_target": [0, 0, 0],
    "minDistance": 0,
    "maxDistance": 100000,
    "minPolarAngle": 3,
    "maxPolarAngle": 89,
    "enableDamping":false,
    "dampingFactor":0.05
  },
  "Light": {
    "DirectionalLight": {
      "set_position": [1, -1, 4],
      "color": "#ffffff"
    },
    "AmbientLight": {
      "color": "#777777"
    }
  },
  "Material": {
    "DefaultMaterial": {
      "matType": "MeshPhongMaterial",
      "color": "#C2C2C2",
      "transparent": true
    },
    "System": {

    },
    "CustomGroup": {
      
    }
  },
  "Matrix": {
    "CustomGroup": {
      "BaoJingWebPanel": {
        "contentMessage": "所有报警设备面板默认位置以及缩放系数",
        "translate": {
          "y": 10
        },
        "scale": {
          "x": 1,
          "y": 1,
          "z": 1
        }
      }
    }
  },
  "Load_OST": [{
      "name": "OST_MechanicalEquipment",
      "CName": "机械设备"
    },
    {
      "name": "OST_PipeFitting",
      "CName": "管件"
    },
    {
      "name": "OST_PipeAccessory",
      "CName": "管道附件"
    },
    {
      "name": "OST_PipeCurves",
      "CName": "管道"
    },
    {
      "name": "OST_CableTray",
      "CName": "电缆桥架"
    },
    {
      "name": "OST_CableTrayFitting",
      "CName": "电缆桥架配件"
    },
    {
      "name": "OST_DuctFitting",
      "CName": "风管管件"
    },
    {
      "name": "OST_DuctCurves",
      "CName": "风管"
    },
    {
      "name": "OST_DuctAccessory",
      "CName": "风管附件"
    },
    {
      "name": "OST_DuctTerminal",
      "CName": "风道末端"
    },
    {
      "name": "OST_ElectricalEquipment",
      "CName": "电气设备"
    },
    {
      "name": "OST_ElectricalFixtures",
      "CName": "电气装置"
    },
    {
      "name": "OST_FireAlarmDevices",
      "CName": "火警设备"
    },
    {
      "name": "OST_LightingFixtures",
      "CName": "照明设备"
    },
    {
      "name": "OST_SecurityDevices",
      "CName": "安全设备"
    },
    {
      "name": "OST_SpecialityEquipment",
      "CName": "专用设备"
    },
    {
      "name": "OST_FlexPipeCurves",
      "CName": "软管"
    },
    {
      "name": "OST_FlexDuctCurves",
      "CName": "软风管"
    },
    {
      "name": "OST_FabricationParts",
      "CName": "预制零件"
    },
    {
      "name": "OST_GenericModel",
      "CName": "常规模型"
    },
    {
      "name": "OST_Walls",
      "CName": "墙"
    },
    {
      "name": "OST_Ceilings",
      "CName": "天花板"
    },
    {
      "name": "OST_Floors",
      "CName": "楼板"
    },
    {
      "name": "OST_Roofs",
      "CName": "屋顶"
    },
    {
      "name": "OST_Doors",
      "CName": "门"
    },
    {
      "name": "OST_Windows",
      "CName": "窗"
    },
    {
      "name": "OST_Columns",
      "CName": "柱"
    },
    {
      "name": "OST_StructuralStiffener",
      "CName": "结构加强板"
    },
    {
      "name": "OST_AreaRein",
      "CName": "结构区域钢筋"
    },
    {
      "name": "OST_StructuralFoundation",
      "CName": "结构基础"
    },
    {
      "name": "OST_StructuralColumns",
      "CName": "结构柱"
    },
    {
      "name": "OST_StructuralTruss",
      "CName": "结构桁架"
    },
    {
      "name": "OST_StructuralFraming",
      "CName": "结构框架"
    },
    {
      "name": "OST_Stairs",
      "CName": "楼梯"
    },
    {
      "name": "OST_CurtainWallPanels",
      "CName": "幕墙嵌板"
    },
    {
      "name": "OST_CurtainWallMullions",
      "CName": "幕墙竖梃"
    },
    {
      "name": "OST_CurtaSystem",
      "CName": "幕墙系统"
    },
    {
      "name": "OST_Topography",
      "CName": "地形"
    },
    {
      "name": "OST_Site",
      "CName": "场地"
    },
    {
      "name": "OST_Ramps",
      "CName": "坡道"
    },
    {
      "name": "OST_HVAC_Zones",
      "CName": "HVAC 区"
    },
    {
      "name": "OST_Mass",
      "CName": "体量"
    },
    {
      "name": "OST_Parking",
      "CName": "停车场"
    },
    {
      "name": "OST_RasterImages",
      "CName": "光栅图像"
    },
    {
      "name": "OST_PlumbingFixtures",
      "CName": "卫浴装置"
    },
    {
      "name": "OST_Sprinklers",
      "CName": "喷头"
    },
    {
      "name": "OST_Furniture",
      "CName": "家具"
    },
    {
      "name": "OST_FurnitureSystems",
      "CName": "家具系统"
    },
    {
      "name": "OST_Wire",
      "CName": "导线"
    },
    {
      "name": "OST_Rooms",
      "CName": "房间"
    },
    {
      "name": "OST_NurseCallDevices",
      "CName": "护理呼叫设备"
    },
    {
      "name": "OST_DataDevices",
      "CName": "数据设备"
    },
    {
      "name": "OST_StairsRailing",
      "CName": "栏杆扶手"
    },
    {
      "name": "OST_Planting",
      "CName": "植物"
    },
    {
      "name": "OST_Casework",
      "CName": "橱柜"
    },
    {
      "name": "OST_LightingDevices",
      "CName": "灯具"
    },
    {
      "name": "OST_TelephoneDevices",
      "CName": "电话设备"
    },
    {
      "name": "OST_MEPSpaces",
      "CName": "空间"
    },
    {
      "name": "OST_PipeInsulations",
      "CName": "管道隔热层"
    },
    {
      "name": "OST_Entourage",
      "CName": "环境"
    },
    {
      "name": "OST_DetailComponents",
      "CName": "详图项目"
    },
    {
      "name": "OST_CommunicationDevices",
      "CName": "通讯设备"
    },
    {
      "name": "OST_Roads",
      "CName": "道路"
    },
    {
      "name": "OST_Areas",
      "CName": "面积"
    },
    {
      "name": "OST_DuctLinings",
      "CName": "风管内衬"
    },
    {
      "name": "OST_PlaceHolderDucts",
      "CName": "风管占位符"
    },
    {
      "name": "OST_DuctInsulations",
      "CName": "风管隔热层"
    },
    {
      "name": "OST_PlaceHolderPipes",
      "CName": "管道占位符"
    },
    {
      "name": "OST_Lines",
      "CName": "线"
    },
    {
      "name": "OST_Conduit",
      "CName": "线管"
    },
    {
      "name": "OST_ConduitFitting",
      "CName": "线管配件"
    },
    {
      "name": "OST_Parts",
      "CName": "组成部分"
    },
    {
      "name": "OST_StructuralFramingSystem",
      "CName": "结构梁系统"
    },
    {
      "name": "OST_PathRein",
      "CName": "结构路径钢筋"
    },
    {
      "name": "OST_StructConnections",
      "CName": "结构连接"
    },
    {
      "name": "OST_Rebar",
      "CName": "结构钢筋"
    },
    {
      "name": "OST_FabricReinforcement",
      "CName": "结构钢筋网"
    },
    {
      "name": "OST_FabricAreas",
      "CName": "结构钢筋网区域"
    },
    {
      "name": "OST_ShaftOpening",
      "CName": "竖井洞口"
    }
  ]
}

调试工具函数

获取相机位置信息

/**
 *获取当前相机的位置角度等信息
 *
 * @memberof PEHelpClass
 */
window.UI.PEGetCameraContent();

获取Mesh距离相机的当前距离

/**
 *获取某个mesh距离相机的当前距离
 *
 * @param {*} sourceID
 * @memberof PEHelpClass
 */
window.UI.PEGetDistance(sourceid);

获取场景中任意一点的位置信息

调用此函数之后会自动再场景的世界坐标中心点生成一个2 * 2 * 2的立方体,可以用鼠标拖动该立方体到自己想要的位置上,停止拖放时会在控制台打印该立方体的世界坐标信息。

/**
 *获取自定义场景坐标
 *
 * @memberof PEHelpClass
 */
window.UI.PECreateCustomPosition()

常见问题

自定义View面板

自定义vue组件作为3D场景中显示的说明面板,记得再BIMView组件中注册组件 如果dom元素中需要响应点击事件需要同时响应click以及touchstart,同时需要在响应函数中组织冒泡 否则会与模型的点击拖拽行为冲突

例如:

<div class="Back" @touchstart="BackClick" @click="BackClick">返回</div>

 BackClick: function () {
      event.stopPropagation();
 }