import { BimfaceSDKLoader, BimfaceSDKLoaderConfig, Glodon } from 'bimfacesdkloader';
|
import eventBus from './eventBus';
|
import * as echarts from 'echarts';
|
import * as $ from 'jquery';
|
import loadVueComponent from './loadVueComponent';
|
|
class bfHelper {
|
app; viewer; drawableContainer; clickHandler; extObjMng; videoManager; anchorMng;
|
constructor() {
|
|
}
|
// 加载模型
|
loadModel = (viewToken, domElement, callback) => {
|
const config = new BimfaceSDKLoaderConfig();
|
config.viewToken = viewToken;
|
BimfaceSDKLoader.load(config).then((viewMetaData) => {
|
if (viewMetaData.viewType == "3DView") {
|
// ======== 判断是否为3D模型 ========
|
// 获取DOM元素
|
let webAppConfig =
|
new Glodon.Bimface.Application.WebApplication3DConfig();
|
webAppConfig.domElement = domElement;
|
// 允许爆炸
|
webAppConfig.enableExplosion = true;
|
//允许材质替换
|
webAppConfig.enableReplaceMaterial = true;
|
// 创建WebApplication
|
this.app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
|
// 从WebApplication获取viewer3D对象
|
this.viewer = this.app.getViewer();
|
// 添加待显示的模型
|
this.viewer.loadModel({
|
// 待加载模型的浏览凭证
|
viewToken: viewToken,
|
});
|
|
this.viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
|
let drawableContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
|
drawableContainerConfig.viewer = this.viewer;
|
this.drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);
|
this.extObjMng = new Glodon.Bimface.Plugins.ExternalObject.ExternalObjectManager(this.viewer);
|
let videoManagerConfig = new Glodon.Bimface.Plugins.Videos.VideoManagerConfig()
|
videoManagerConfig.viewer = this.viewer;
|
this.videoManager = new Glodon.Bimface.Plugins.Videos.VideoManager(videoManagerConfig);
|
let anchorMngConfig = new Glodon.Bimface.Plugins.Anchor.AnchorManagerConfig();
|
anchorMngConfig.viewer = this.viewer;
|
this.anchorMng = new Glodon.Bimface.Plugins.Anchor.AnchorManager(anchorMngConfig);
|
if (callback && typeof callback == "function") callback();
|
})
|
|
// window.viewer = this.viewer;
|
}
|
});
|
}
|
|
// 恢复全部状态
|
resetStatus = () => {
|
if (!this.viewer) return;
|
floorExploded && this.viewer.getModel().clearFloorExplosion();
|
this.drawableContainer && this.drawableContainer.clear();
|
progressAnimation && cancelAnimationFrame(progressAnimation);
|
elevationAnimation && cancelAnimationFrame(elevationAnimation);
|
sectionPlane && sectionPlane.exit();
|
this.extObjMng && this.extObjMng.clear();
|
this.videoManager && this.videoManager.clear();
|
this.anchorMng && this.anchorMng.clear();
|
this.viewer.showAllComponents();
|
this.viewer.clearAllRooms();
|
this.viewer.restoreAllDefault();
|
this.viewer.getModel().clearAllBlinkComponents();
|
this.viewer.getModel().clearGlowEffect();
|
this.viewer.render();
|
onClick(() => { });
|
eventBus.trigger('reset');
|
}
|
|
// 设置相机视角
|
setCameraStatus = (status) => {
|
return new Promise((resolve) => {
|
this.viewer.setCameraStatus(status, resolve);
|
});
|
}
|
|
// 绑定模型点击事件
|
onClick = (fn) => {
|
if (this.clickHandler) {
|
this.viewer.removeEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, this.clickHandler);
|
}
|
this.clickHandler = fn;
|
this.viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, this.clickHandler);
|
}
|
|
|
|
// 添加引线标签
|
// 引线标签Demo https://bimface.com/developer-jsdemo#830
|
addLeadLabel = (config, onClick) => {
|
let leadLabelConfig = new Glodon.Bimface.Plugins.Drawable.LeadLabelConfig();
|
let leadLabel = new Glodon.Bimface.Plugins.Drawable.LeadLabel({ ...leadLabelConfig, ...config });
|
onClick && leadLabel.onClick(onClick);
|
this.drawableContainer.addItem(leadLabel);
|
}
|
|
// 添加自定义标签
|
// 自定义标签Demo https://bimface.com/developer-jsdemo#828
|
addCustomItem = (config, onClick, callback) => {
|
let customItemConfig = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
|
let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem({ ...customItemConfig, ...config });
|
onClick && customItem.onClick(onClick);
|
this.drawableContainer.addItem(customItem);
|
if (callback && typeof callback == "function") callback(customItem);
|
}
|
|
// 删除自定义标签通过id
|
deleteCustomItemById = (id) => {
|
this.drawableContainer.removeItemById(id);
|
}
|
// 显示自定义标签通过ids
|
showCustomItemById = (ids) => {
|
this.drawableContainer.showItemsById(ids);
|
this.viewer.render();
|
}
|
// 隐藏自定义标签通过ids
|
hideCustomItemById = (ids) => {
|
this.drawableContainer.hideItemsById(ids)
|
this.viewer.render();
|
}
|
|
CustomItemUpdate=()=>{
|
this.drawableContainer.update()
|
|
}
|
|
// 添加图片标签
|
addImage = (config, onClick) => {
|
let imageConfig = new Glodon.Bimface.Plugins.Drawable.ImageConfig();
|
let image = new Glodon.Bimface.Plugins.Drawable.Image({ ...imageConfig, ...config });
|
onClick && image.onClick(onClick);
|
this.drawableContainer.addItem(image);
|
}
|
|
// 封装自定义标签的容器
|
getCustomContainer = () => {
|
const setCss = (dom, css) => {
|
Object.entries(css).forEach(([key, value]) => {
|
dom.style[key] = value;
|
})
|
}
|
const div = document.createElement('div');
|
setCss(div, {
|
background: '#fff',
|
borderRadius: '5px',
|
border: '2px solid rgb(31, 147, 255)',
|
position: 'relative',
|
boxShadow: '0 0 10px #333'
|
});
|
|
const leadLine = document.createElement('div');
|
setCss(leadLine, {
|
background: 'rgb(31, 147, 255)',
|
width: '50px',
|
height: '1px',
|
position: 'absolute',
|
top: '20px',
|
left: '-50px',
|
borderTop: '1px solid rgb(31, 147, 255)',
|
borderBottom: '1px solid rgb(31, 147, 255)',
|
});
|
|
const leadLine2 = document.createElement('div');
|
setCss(leadLine2, {
|
background: 'rgb(31, 147, 255)',
|
width: '50px',
|
height: '1px',
|
position: 'absolute',
|
top: '32px',
|
left: '-96px',
|
border: '1px solid rgb(31, 147, 255)',
|
borderRight: 'none',
|
transform: 'rotate(-30deg)',
|
borderRadius: '5px 0 0 5px'
|
});
|
div.appendChild(leadLine);
|
div.appendChild(leadLine2);
|
return div;
|
}
|
|
// 隐藏外墙
|
hideOutWall = () => {
|
this.viewer.getModel().hideComponentsByObjectData([{ categoryId: '-2000170' }, { categoryId: '-2000171' }, { categoryId: '-2000151' }, { categoryId: '-2000014' }, { familyType: 'Exterior - Insulation on Masonry' }, { familyType: 'Generic - 200mm' }]);
|
}
|
|
//设置构建透明根据构建id
|
setTransparentComponentsById = (ids) => {
|
this.viewer.transparentComponentsById(ids);
|
this.viewer.render();
|
}
|
|
//取消构建设置半透明状态通过构建id
|
setOpaqueComponentsById = (ids) => {
|
this.viewer.transparentComponentsById(ids);
|
this.viewer.render();
|
}
|
|
|
|
// 发光效果
|
// 发光效果Demo https://bimface.com/developer-jsdemo#1114
|
glowSelection = () => {
|
resetStatus();
|
this.viewer.enableGlowEffect(true);
|
onClick((data) => {
|
this.viewer.getModel().clearGlowEffect();
|
if (this.viewer.getModel().getSelectedComponents().length > 0) {
|
this.viewer.getModel().setGlowEffectById([data.objectId], { type: "outline", color: new Glodon.Web.Graphics.Color(255, 255, 190, 1), intensity: 0.3, spread: 4 });
|
}
|
this.viewer.render();
|
})
|
}
|
|
|
|
// 闪烁效果
|
// 闪烁效果Demo https://bimface.com/developer-jsdemo#993
|
blinkSelection = () => {
|
resetStatus();
|
this.viewer.enableBlinkComponents(true);
|
onClick((data) => {
|
this.viewer.getModel().clearAllBlinkComponents();
|
if (this.viewer.getModel().getSelectedComponents().length > 0) {
|
this.viewer.getModel().addBlinkComponentsById([data.objectId]);
|
}
|
this.viewer.render();
|
})
|
}
|
|
// 锚点效果
|
// 锚点效果Demo https://bimface.com/developer-jsdemo#1117
|
anchorSelection = () => {
|
resetStatus();
|
onClick((data) => {
|
this.anchorMng.clear();
|
if (this.viewer.getModel().getSelectedComponents().length > 0) {
|
|
let prismPointConfig = new Glodon.Bimface.Plugins.Anchor.PrismPointConfig();
|
prismPointConfig.position = data.worldPosition;
|
const boundingBox = this.viewer.getModel().getBoundingBoxById("140056");
|
if (boundingBox) {
|
prismPointConfig.position.z = boundingBox.max.z;
|
}
|
prismPointConfig.duration = 1500;
|
prismPointConfig.size = 3000;
|
const prismPoint = new Glodon.Bimface.Plugins.Anchor.PrismPoint(prismPointConfig);
|
this.anchorMng.addItem(prismPoint);
|
}
|
})
|
}
|
|
//设置默认UI隐藏
|
setUIHide = (data) => {
|
data.forEach(item => {
|
let node = document.querySelector(item);
|
if (node && node.style) {
|
node.style.display = "none";
|
}
|
})
|
}
|
|
//添加自定义按钮
|
addCustomButton = (obj) => {
|
if (!obj) return;
|
var btnConfig = new Glodon.Bimface.UI.Button.ButtonConfig();
|
btnConfig.title = obj.title ? obj.title : "";
|
var btn = new Glodon.Bimface.UI.Button.Button(btnConfig);
|
btn.setHtml(obj.iconHtml ? obj.iconHtml : '');
|
if (obj.defaultChecked) {
|
btn.addClassName('bf-checked');
|
}
|
if (obj.className) btn.addClassName(obj.className);
|
btn.addEventListener('Click', function () {
|
if ($(this).hasClass("bf-checked")) {
|
$(this).removeClass("bf-checked");
|
if (obj.unchecked && typeof obj.unchecked == "function") obj.unchecked();
|
} else {
|
$(this).addClass("bf-checked");
|
if (obj.checked && typeof obj.checked == "function") obj.checked();
|
}
|
});
|
|
var toolbar = this.app.getToolbar('MainToolbar');
|
toolbar.insertControl(toolbar._controls.length, btn);
|
}
|
|
//给构建设置颜色
|
setOverrideComponentsColorById = (ids, color) => {
|
this.viewer.enableGlowEffect(true);
|
this.viewer.overrideComponentsColorById(ids, color);
|
this.viewer.render();
|
}
|
|
// 销毁场景
|
destroyViewer = () => {
|
this.app && this.app.destroy();
|
}
|
}
|
|
export default bfHelper;
|
