按需加载

有些BIM模型的体量很大,有些场景下无需加载完整的BIM模型,按照场景加载其局部模型即可。这样既可以大大降低加载模型的时间,又能提升用户浏览模型的流畅体验。

教程内容

  • 按需加载的前置条件
  • 前端如何设置按需加载的内容

按需加载功能说明

1. 按需加载的前置条件
  • 按需加载只适用于集成文件,不适用于单文件;
  • 按需加载目前只支持rvt文件和igms文件;
  • 发起集成模型时添加两个config参数;
{"loadOnDemand":true,
 "fileType":"rvt"
}
  • 按需加载会按专业和楼层两个维度拆分整个集成模型,故集成时必须设置每个文件的专业和楼层信息;如果单模型本身自带楼层信息(如rvt文件),可选择不设置楼层信息,如设置则以手动设置的为准。
{"fileId" : 1726549013407200,
"specialty": "建筑",
"floor":"1F"},

{"fileId" : 1726549064041984,
"specialty": "结构",
"floor":"1F"},

{"fileId" : 1726548910065120,
"specialty": "暖通",
"floor":"2F"},

{"fileId" : 1726548962330112,
"specialty": "机电",
"floor":"2F"}
2. 前端如何设置按需加载的内容

对于按需加载的集成模型,默认打开时是不展示任何模型的,此时需要调用以下接口:

showExclusiveComponentsByObjectData(conditions, progressCallback, finishCallback)

根据筛选条件显示构件,其余全部隐藏
Parameters:

Name Type Description
conditions Array 多个condition的数组,如[{"specialty":"建筑"},{"levelName":"1F"}]
progressCallback function 加载的进度,可不写
finishCallback function 加载完成,可不写

完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>My first BIMFACE app</title>
    </head>
<body>
    <div id="domId" style="width:800px; height:600px"></div>
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
    <script>
        var viewer3D;
        var app;
        var viewToken = '<yourViewToken>';
        var loaderConfig = new BimfaceSDKLoaderConfig();
            loaderConfig.viewToken = viewToken;
        BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
            function successCallback(viewMetaData) {
                var domShow = document.getElementById('domId');
                var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
                    webAppConfig.domElement = domShow;    
                app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);    
                app.addView(viewToken);
                viewer3D = app.getViewer();
                // 按需加载代码
                viewer3D.showExclusiveComponentsByObjectData([{"specialty":"结构"},{"floorName":"1F"}]);
            };
            
            function failureCallback(error) {
                console.log(error);
            };
    </script>
</body>
</html>