bim技术revit系列涉及的软件（BIM应用开发4bimface自定义UI）
bim技术revit系列涉及的软件（BIM应用开发4bimface自定义UI）document.querySelector('.bf-tree-toolbar').style.display = 'none';3、自定义viewHouse的控制显示当场景加载完成之后，viewHouse才会被插入到view容器中来，因此执行隐藏viewHouse函数应该在场景加载完成之后进行。successCallback (viewMetaData) { if (viewMetaData.viewType == "3DView") { ... webAppConfig && (webAppConfig.Toolbars = [""]); ... } }使用设置样式隐藏显示的方法也可以。我们修改WebApplication3DConfig的配置项即可。successCallback (vi
上文讲到了离线环境下使用bimface，从实际项目出发，bimface的很多UI样式就变得不友好了，这篇文章讲的是怎么自定义UI。例如像loading样式、自定义工具栏的控制显示、自定义目录树的控制显示、自定义viewHouse的控制显示。
这是改造之前的效果：
再看看隐藏掉工具栏、改变loading、隐藏目录树、隐藏viewhouse看看效果：
这里的工具栏是指bimface默认UI样式中部下方的场景工具面板。面板中包含主视图、框选、测量、漫游模式、鹰眼地图、构建详情、设置、基本信息、全屏功能按钮。在项目中，为了整体UI的协调，这些工具栏肯定要隐藏掉。
我们修改WebApplication3DConfig的配置项即可。
successCallback (viewMetaData) {
if (viewMetaData.viewType == "3DView") {
...
webAppConfig && (webAppConfig.Toolbars = [""]);
...
}
}
其实使用API中的方法你会发现目录树和工具栏都会被隐藏掉，所以这个你看情况使用。
2、自定义目录树的控制显示目录树的隐藏和显示和工具栏一样的。
successCallback (viewMetaData) {
if (viewMetaData.viewType == "3DView") {
...
webAppConfig && (webAppConfig.Toolbars = [""]);
...
}
}
使用设置样式隐藏显示的方法也可以。
document.querySelector('.bf-tree-toolbar').style.display = 'none';3、自定义viewHouse的控制显示
当场景加载完成之后，viewHouse才会被插入到view容器中来，因此执行隐藏viewHouse函数应该在场景加载完成之后进行。
/**
* @descripttion: 场景初始化完成
* @param {*}
* @return {*}
*/
onViewAdded(){
// 隐藏viewhouse
this.viewer3D && this.viewer3D.hideViewHouse();
// 这个方法也阔以
document.querySelector('.bf-house').style.display = 'none';
}
4、loading样式修改
这个初始化的loading样式也是可以修改的。简单讲就是换一张gif图，改一下css样式。
/* loading.gif设置 */
.bf-loading .bf-loading-gif {
/* width: 40px;
height: 32px; */
width:112.5px;
height:114px;
display: block;
margin: 0 auto;
background-image: url(loading.gif);
background-size: 100% 100%;
}
.bf-loading .bf-loading-progress {
text-align: center;
/*margin-top: -70px;*/
/*taoxiang font-size:24px;*/
font-size:24px;
color: #0DABC9;
/*color:#19dcff;
opacity:0.7;*/
}5、背景样式的修改
先给整个场景容器一个背景。
#view{
width:100%;
height:100%;
margin:0px;
padding:0px;
background:url('../imgs/background.png') no-repeat;
background-size: 100% 100%;
修改了bf-container的样式。
.bf-container .bf-view {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background:transparent !important;
}
当然了，这里还可以实现天空背景效果，这里直接贴一下代码。
initSkyBox() {
const skyBoxManagerConfig = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManagerConfig();
skyBoxManagerConfig.viewer = this.viewer3D;
skyBoxManagerConfig.customizedImage = {
front: "https://static.bimface.com/attach/0d178c31584d432f93b3df90832d6ba1_EnvMap_posz.jpg"
back: "https://static.bimface.com/attach/c02b7114af6d4966b3f1fd7d483fcdd9_EnvMap_negz.jpg"
left: "https://static.bimface.com/attach/6c2f5045467b4c51a4e506524e74a65c_EnvMap_negx.jpg"
right: "https://static.bimface.com/attach/ec541f626f194a979d49ec5f52ca32bb_EnvMap_posx.jpg"
top: "https://static.bimface.com/attach/01700a9a6f7542af8df76bc923b065b9_EnvMap_posy.jpg"
bottom: "https://static.bimface.com/attach/031a2a1a51374fc88fe8acf1d490b7c0_EnvMap_negy.jpg"
};
const skyBoxManager = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManager(skyBoxManagerConfig);
skyBoxManager.setStyle(Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.Customized);
skyBoxManager.enableSkyBox(true);
}
