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;