|
|
@@ -0,0 +1,608 @@
|
|
|
+import {
|
|
|
+ Message
|
|
|
+} from 'element-ui'
|
|
|
+class bimView {
|
|
|
+ constructor(arg) {
|
|
|
+ let viewToken, dom, app, viewer3D, model3D, viewerGIS, renderSuccess, index = 0,
|
|
|
+ click, hover, roomSaved, change, marker3D, roomManager, layerMng, layerId, walk, elementColor, type,
|
|
|
+ map, background, extObjIds = [],
|
|
|
+ elementObject = {
|
|
|
+ fileId: '',
|
|
|
+ objectId: ''
|
|
|
+ },
|
|
|
+ extObjMng, roomEditorToolbar, bimIntegrateId, roamAngle, wallEffect;
|
|
|
+ dom = arg.dom
|
|
|
+ viewToken = arg.viewToken;
|
|
|
+ renderSuccess = arg.renderSuccess;
|
|
|
+ click = arg.click;
|
|
|
+ change = arg.change;
|
|
|
+ hover = arg.hover;
|
|
|
+ roomSaved = arg.roomSaved;
|
|
|
+ bimIntegrateId = arg.bimIntegrateId;
|
|
|
+ roamAngle = arg.roamAngle;
|
|
|
+ type = arg.type;
|
|
|
+ background = arg.background;
|
|
|
+ this.init = () => {
|
|
|
+ //初始化
|
|
|
+ let options = new BimfaceSDKLoaderConfig();
|
|
|
+ options.viewToken = viewToken;
|
|
|
+ BimfaceSDKLoader.load(options, (viewMetaData) => {
|
|
|
+ this.succrssCallback(viewMetaData)
|
|
|
+ }, () => {
|
|
|
+ this.failureCallback()
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.succrssCallback = (viewMetaData) => {
|
|
|
+ if (viewMetaData.viewType == "3DView") this.View3DRender();
|
|
|
+ if (viewMetaData.viewType == "gisView") this.gisRender();
|
|
|
+ }
|
|
|
+ this.failureCallback = () => {
|
|
|
+ console.error('加载失败');
|
|
|
+ }
|
|
|
+ this.getCamera = () => {
|
|
|
+ return viewer3D.getCamera();
|
|
|
+ }
|
|
|
+ this.View3DRender = () => {
|
|
|
+ let webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
|
|
|
+ webAppConfig.domElement = dom;
|
|
|
+ webAppConfig.effectMode = 'fluency';
|
|
|
+ let bgcolor = !background ? new Glodon.Web.Graphics.Color(30, 36, 48, 1) : new Glodon.Web.Graphics
|
|
|
+ .Color(20, 26, 36, 1);
|
|
|
+ webAppConfig.backgroundColor = [{
|
|
|
+ color: bgcolor,
|
|
|
+ stop: "100%"
|
|
|
+ }]
|
|
|
+ // 设置全局单位
|
|
|
+ webAppConfig.globalUnit = Glodon.Bimface.Common.Units.LengthUnits.Millimeter;
|
|
|
+ // 创建WebApplication
|
|
|
+ app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
|
|
|
+ // 添加待显示的模型
|
|
|
+ app.addView(viewToken);
|
|
|
+
|
|
|
+ // 从WebApplication获取viewer3D对象
|
|
|
+ viewer3D = app.getViewer();
|
|
|
+ viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, data => {
|
|
|
+ console.log(data);
|
|
|
+ if (data.eventType == 'Click') { //左击
|
|
|
+ if (click) click(data);
|
|
|
+ } else {
|
|
|
+ if (!elementObject.objectId) return;
|
|
|
+ setTimeout(() => {
|
|
|
+ if ($('.bf-menu.bf-menu-right .bf-menu-item')[0]) $(
|
|
|
+ '.bf-menu.bf-menu-right .bf-menu-item')[0].onclick = this
|
|
|
+ .bimAttribute;
|
|
|
+ if ($('.bf-menu.bf-menu-left .bf-menu-item')[0]) $(
|
|
|
+ '.bf-menu.bf-menu-left .bf-menu-item')[0].onclick = this
|
|
|
+ .bimAttribute;
|
|
|
+ }, 0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.Hover, data => {
|
|
|
+ if (hover) hover(data);
|
|
|
+ })
|
|
|
+ viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, () => {
|
|
|
+ model3D = viewer3D.getModel();
|
|
|
+ this.setCamera({
|
|
|
+ isPan: true,
|
|
|
+ isRotate: true,
|
|
|
+ isZoom: true
|
|
|
+ })
|
|
|
+ app.getToolbar('MainToolbar').hide();
|
|
|
+ window.CLOUD.MaterialUtil.getDefaultSelectedMaterial = function() {
|
|
|
+ if (!elementColor) elementColor = new window.CLOUD
|
|
|
+ .MeshBasicClipMaterial({
|
|
|
+ color: '#3669b8',
|
|
|
+ opacity: 0.7,
|
|
|
+ })
|
|
|
+ return elementColor;
|
|
|
+ }
|
|
|
+ // if ($('.gld-bf-properties')[0]) $('.gld-bf-properties')[0].onclick = this.bimAttribute;
|
|
|
+ // if ($('.gld-bf-firstperson')[0]) $('.gld-bf-firstperson')[0].onclick = this.walkStatus;
|
|
|
+ if (renderSuccess) renderSuccess();
|
|
|
+ })
|
|
|
+ viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.SelectionChanged, data => {
|
|
|
+ if (data.length == 1) {
|
|
|
+ let elementData = data[0].split('.');
|
|
|
+ elementObject.fileId = elementData.length == 2 ? elementData[0] : '';
|
|
|
+ elementObject.objectId = elementData.length == 2 ? elementData[1] : elementData[0];
|
|
|
+ } else {
|
|
|
+ elementObject = {
|
|
|
+ fileId: '',
|
|
|
+ objectId: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (change) change(elementObject);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.walkStatus = () => {
|
|
|
+ if (roamAngle) this.setStatus(roamAngle)
|
|
|
+ }
|
|
|
+ this.bimAttribute = () => {
|
|
|
+ if (type === 'model') return;
|
|
|
+ $('.bf-close').click();
|
|
|
+ if (!elementObject.objectId) return Message({
|
|
|
+ message: '请选择一个构件',
|
|
|
+ type: 'warning',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ model.show({
|
|
|
+ bimIntegrateId: bimIntegrateId,
|
|
|
+ fileId: elementObject.fileId,
|
|
|
+ objectId: elementObject.objectId
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.setToolbars = (isShow) => {
|
|
|
+ isShow ? app.getToolbar('MainToolbar').show() : app.getToolbar('MainToolbar').hide();
|
|
|
+ }
|
|
|
+ this.gisRender = () => {
|
|
|
+ // 创建WebApplicationGISConfig
|
|
|
+ let webAppConfig = new Glodon.Bimface.Application.WebApplicationGISConfig();
|
|
|
+ // 设置创建WebApplicationGIS的dom对象
|
|
|
+ webAppConfig.domElement = dom;
|
|
|
+ // 创建WebApplicationGIS
|
|
|
+ app = new Glodon.Bimface.Application.WebApplicationGIS(webAppConfig);
|
|
|
+ // 加载待显示的场景
|
|
|
+ app.addScene(viewToken);
|
|
|
+ // 获取ViewerGIS对象
|
|
|
+ viewerGIS = app.getViewer();
|
|
|
+ viewerGIS.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SceneAdded, data => {
|
|
|
+ layerMng = viewerGIS.getLayerManager();
|
|
|
+ if (renderSuccess) renderSuccess();
|
|
|
+ });
|
|
|
+ viewerGIS.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.LayerAdded, function(data) {
|
|
|
+ layerId = data.layerId;
|
|
|
+ });
|
|
|
+ viewerGIS.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SelectedObjectsChanged, data => {});
|
|
|
+ }
|
|
|
+ this.getComponentProperty = (objectId, callback) => {
|
|
|
+ viewer3D.getModel().getComponentProperty(objectId, callback)
|
|
|
+ }
|
|
|
+ this.returnCamera = () => {
|
|
|
+ return viewer3D.getCamera()._cloudCamera;
|
|
|
+ }
|
|
|
+ this.addDrawable = (option, successCallback) => {
|
|
|
+ // 初始化DrawableContainer
|
|
|
+ let drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
|
|
|
+ drawableConfig.viewer = viewer3D;
|
|
|
+ let drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
|
|
|
+ // 创建自定义元素，可以是一个dom element，也可以是个字符串
|
|
|
+ let config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
|
|
|
+ config.content = option.html;
|
|
|
+ config.viewer = viewer3D;
|
|
|
+ config.worldPosition = option.position;
|
|
|
+ config.opacity = 1;
|
|
|
+ if (option.offsetY) config.offsetY = option.offsetY;
|
|
|
+ if (option.offsetX) config.offsetX = option.offsetX;
|
|
|
+ if (option.visibleDistance) config.visibleDistance = option.visibleDistance;
|
|
|
+ //生成customItem实例
|
|
|
+ let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
|
|
|
+ // customItem.hide();
|
|
|
+ // 添加自定义标签
|
|
|
+ drawableContainer.addItem(customItem);
|
|
|
+ // 开启标签的深度检测
|
|
|
+ // customItem.enableDepthTest(true);
|
|
|
+
|
|
|
+ // // 设置标签遮挡状态变化事件
|
|
|
+ // customItem.onObstructionChanged(function(data) {
|
|
|
+ // if (data) {
|
|
|
+ // // 被遮挡时隐藏标签
|
|
|
+ // customItem.hide();
|
|
|
+ // } else {
|
|
|
+ // // 未遮挡时显示标签
|
|
|
+ // customItem.show();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ customItem.onClick(successCallback);
|
|
|
+ }
|
|
|
+ this.setNavigationMode = () => {
|
|
|
+ viewer3D.setNavigationMode(Glodon.Bimface.Viewer.NavigationMode3D.Walk);
|
|
|
+ }
|
|
|
+ this.getWalkthroughData = () => {
|
|
|
+ let config = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
|
|
|
+ config.viewer = viewer3D;
|
|
|
+ let wt = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(config);
|
|
|
+ wt.addKeyFrame();
|
|
|
+ return wt.getKeyFrames()[0];
|
|
|
+ }
|
|
|
+ this.getBoundingBox = (fileId, callback) => {
|
|
|
+ model3D.getBoundingBox(fileId, callback)
|
|
|
+ }
|
|
|
+ this.isolateComponentsByObjectData = fileList => {
|
|
|
+ model3D.clearIsolation();
|
|
|
+ model3D.isolateComponentsByObjectData(fileList, Glodon.Bimface.Viewer.IsolateOption
|
|
|
+ .MakeOthersTranslucent);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.clearIsolation = () => {
|
|
|
+ model3D.clearIsolation();
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.isolateComponentsById = ids => {
|
|
|
+ model3D.clearIsolation();
|
|
|
+ model3D.isolateComponentsById(ids, Glodon.Bimface.Viewer.IsolateOption
|
|
|
+ .MakeOthersTranslucent);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.setMap = (elem, fn) => {
|
|
|
+ if (map) return;
|
|
|
+ let mapConfig = Glodon.Bimface.Plugins.Map.MapConfig();
|
|
|
+ mapConfig.domElement = elem; //页面的dom元素
|
|
|
+ mapConfig.viewer = viewer3D; //三维模型
|
|
|
+ map = new Glodon.Bimface.Plugins.Map.Map(mapConfig);
|
|
|
+ let list = map.getFloorList(); //获取楼层的小地图列表
|
|
|
+ if (fn) fn(list);
|
|
|
+ }
|
|
|
+ this.showMap = (id) => {
|
|
|
+ map.showFloorById(id);
|
|
|
+ }
|
|
|
+ this.addRecPlane = (data) => { //创建二维平面并贴图
|
|
|
+ //data = {type|image、canvas,obj|图片地址或者canvas,position|位置}
|
|
|
+ //pt1是位置 pt2是大小
|
|
|
+ let pt1 = {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ z: 0
|
|
|
+ },
|
|
|
+ pt2 = {
|
|
|
+ x: data.offset.width,
|
|
|
+ y: data.offset.height,
|
|
|
+ z: 200
|
|
|
+ };
|
|
|
+ let extObjId1 = this.createExternalObject(pt1, pt2, data); //正
|
|
|
+ let extObjId2 = this.createExternalObject(pt1, pt2, data); //反
|
|
|
+ let extObjId3 = this.createExternalObject(pt1, pt2, data); //正
|
|
|
+ let extObjId4 = this.createExternalObject(pt1, pt2, data); //反
|
|
|
+ return [extObjId1, extObjId3, extObjId2, extObjId4]
|
|
|
+ }
|
|
|
+ this.createExternalObject = (pt1, pt2, data) => { //创建外部构件
|
|
|
+ //添加外部构件
|
|
|
+ if (!extObjMng) extObjMng = new Glodon.Bimface.Plugins.ExternalObject.ExternalObjectManager(
|
|
|
+ viewer3D);
|
|
|
+ let recPlane = this.createPlane(pt1, pt2);
|
|
|
+ index++;
|
|
|
+ // 将平面对象添加为外部构件，并获取其ID
|
|
|
+ extObjMng.loadObject({
|
|
|
+ name: 'recPlane' + index,
|
|
|
+ object: recPlane
|
|
|
+ });
|
|
|
+ let extObjId = extObjMng.getObjectIdByName("recPlane" + index);
|
|
|
+ extObjIds.push(extObjId);
|
|
|
+ let position = {
|
|
|
+ "x": index % 2 == 0 ? (data.position.x - 200) : data.position.x,
|
|
|
+ "y": index % 2 == 0 ? (data.position.y - data.offset.width) : data.position.y,
|
|
|
+ "z": data.position.z
|
|
|
+ }
|
|
|
+ let rotateY = data.rotateY || Math.PI / 2;
|
|
|
+ extObjMng.offset(extObjId, position);
|
|
|
+ extObjMng.rotateX(extObjId, Math.PI / 2);
|
|
|
+ index % 2 == 0 ? extObjMng.rotateY(extObjId, rotateY) : extObjMng.rotateY(extObjId, -rotateY);
|
|
|
+ return extObjId;
|
|
|
+ }
|
|
|
+ this.createPlane = (pt1, pt2) => { // 构造矩形平面
|
|
|
+ //pt1是位置 pt2是大小
|
|
|
+ let rectanglePlane = new Glodon.Bimface.Plugins.Geometry.Plane({
|
|
|
+ type: 'rectangle',
|
|
|
+ points: [pt1, pt2]
|
|
|
+ });
|
|
|
+ return rectanglePlane;
|
|
|
+ }
|
|
|
+ this.clearALlPlane = () => {
|
|
|
+ if (extObjMng) extObjMng.clear();
|
|
|
+ }
|
|
|
+ this.setCanvasMaterial = (ids, data) => {
|
|
|
+ // 构造材质配置 materialConfig
|
|
|
+ let showIds = ids.filter((item, index) => data.updateColor ? index % 2 == 0 : index % 2 != 0);
|
|
|
+ let hideIds = ids.filter((item, index) => data.updateColor ? index % 2 != 0 : index % 2 == 0);
|
|
|
+ let materialConfig = new Glodon.Bimface.Plugins.Material.MaterialConfig();
|
|
|
+ materialConfig.transparent = true;
|
|
|
+ materialConfig.viewer = viewer3D;
|
|
|
+ if (data.type == 'canvas') {
|
|
|
+ materialConfig.canvas = data.obj;
|
|
|
+ } else {
|
|
|
+ materialConfig.src = data.obj;
|
|
|
+ }
|
|
|
+ materialConfig.callback = function() {
|
|
|
+ extObjMng.show({
|
|
|
+ ids: showIds
|
|
|
+ })
|
|
|
+ extObjMng.hide({
|
|
|
+ ids: hideIds
|
|
|
+ })
|
|
|
+ viewer3D.render();
|
|
|
+ };
|
|
|
+ materialConfig.transparent = true;
|
|
|
+ // 构造材质对象 material
|
|
|
+ let material = new Glodon.Bimface.Plugins.Material.Material(materialConfig);
|
|
|
+ // 将外部构件赋予材质
|
|
|
+ material.overrideComponentsMaterialById(showIds, viewer3D.getModel().id);
|
|
|
+
|
|
|
+ }
|
|
|
+ this.zoomToBoundingBox = (extObjId) => {
|
|
|
+ let boundingBox = viewer3D.getModel().getBoundingBoxById(extObjId);
|
|
|
+ viewer3D.zoomToBoundingBox(boundingBox);
|
|
|
+ }
|
|
|
+ this.zoomToSelectedComponents = (ids) => {
|
|
|
+ viewer3D.getModel().clearSelectedComponents();
|
|
|
+ viewer3D.getModel().setSelectedComponentsById(ids);
|
|
|
+ viewer3D.getModel().zoomToSelectedComponents();
|
|
|
+ }
|
|
|
+ this.walkthrough = () => { //固定路径漫游
|
|
|
+ let config = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
|
|
|
+ config.viewer = viewer3D;
|
|
|
+ let wt = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(config);
|
|
|
+ return wt;
|
|
|
+ }
|
|
|
+ this.insertRooms = (option) => {
|
|
|
+ if (!roomManager) roomManager = viewer3D.getRoomManager();
|
|
|
+ let roomConfig = new Glodon.Bimface.Plugins.Rooms.RoomConfig();
|
|
|
+ roomConfig.viewer = viewer3D;
|
|
|
+ roomConfig.roomId = option.id;
|
|
|
+ roomConfig.geometry = {
|
|
|
+ "type": "extrusion",
|
|
|
+ "boundary": option.boundary,
|
|
|
+ "height": option.height
|
|
|
+ };
|
|
|
+ if (typeof option.roomColor == 'object') {
|
|
|
+ roomConfig.roomColor = new Glodon.Web.Graphics.Color(option.roomColor.r, option.roomColor.g,
|
|
|
+ option.roomColor.b, option.roomColor.a);
|
|
|
+ } else {
|
|
|
+ roomConfig.roomColor = new Glodon.Web.Graphics.Color("#EE799F", 0.8);
|
|
|
+ }
|
|
|
+ if (typeof option.frameColor == 'object') {
|
|
|
+ roomConfig.frameColor = new Glodon.Web.Graphics.Color(option.frameColor.r, option.frameColor.g,
|
|
|
+ option.frameColor.b, option.frameColor.a);
|
|
|
+ } else {
|
|
|
+ roomConfig.frameColor = new Glodon.Web.Graphics.Color("#90EE90", 0.8);
|
|
|
+ }
|
|
|
+ roomManager.addRoom(new Glodon.Bimface.Plugins.Rooms.Room(roomConfig));
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.colorRoomById = (option) => {
|
|
|
+ if (!roomManager) return;
|
|
|
+ let room = roomManager.getRoomById(option.id);
|
|
|
+ if (typeof option.roomColor == 'object') {
|
|
|
+ room.setRoomColor(new Glodon.Web.Graphics.Color(option.roomColor.r, option.roomColor.g,
|
|
|
+ option.roomColor.b, option.roomColor.a));
|
|
|
+ room.setRoomFrameColor(new Glodon.Web.Graphics.Color("#90EE90", 0.8));
|
|
|
+ } else {
|
|
|
+ room.setRoomColor(new Glodon.Web.Graphics.Color("#EE799F", 0.8));
|
|
|
+ room.setRoomFrameColor(new Glodon.Web.Graphics.Color("#90EE90", 0.8));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.clearAllRooms = () => {
|
|
|
+ if (roomManager) roomManager.clearAllRooms();
|
|
|
+ }
|
|
|
+ this.add3DMaker = (markerType, position, imageSrc, clickFn) => {
|
|
|
+ if (!marker3D) {
|
|
|
+ let markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
|
|
|
+ markerConfig.viewer = viewer3D;
|
|
|
+ marker3D = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerConfig);
|
|
|
+ }
|
|
|
+ let marker3dConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();
|
|
|
+ if (markerType == 'image') {
|
|
|
+ marker3dConfig.src = imageSrc ||
|
|
|
+ "http://static.bimface.com/resources/3DMarker/warner/warner_red.png";
|
|
|
+ } else if (markerType == 'canvas') {};
|
|
|
+ marker3dConfig.worldPosition = position;
|
|
|
+ marker3dConfig.size = 60;
|
|
|
+ let marker3d = new Glodon.Bimface.Plugins.Marker3D.Marker3D(marker3dConfig);
|
|
|
+ if (clickFn) marker3d.onClick(clickFn)
|
|
|
+ marker3D.addItem(marker3d);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.clear3DMaker = () => {
|
|
|
+ if (marker3D) marker3D.clear();
|
|
|
+ }
|
|
|
+ this.set3DMaker = (imageSrc, position) => {
|
|
|
+ if (!marker3D) return this.add3DMaker('image', position, imageSrc);
|
|
|
+ let mark = marker3D.getAllItems()[0];
|
|
|
+ mark.setSrc(imageSrc || 'http://static.bimface.com/resources/3DMarker/warner/warner_red.png')
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.setCamera = option => {
|
|
|
+ console.log('setCamera');
|
|
|
+ viewer3D.enableTranslate(option.isPan)
|
|
|
+ viewer3D.enableOrbit(option.isRotate)
|
|
|
+ viewer3D.enableScale(option.isZoom)
|
|
|
+ }
|
|
|
+ this.colorElementById = (elementIds, option) => {
|
|
|
+ let color;
|
|
|
+ if (option) {
|
|
|
+ color = new Glodon.Web.Graphics.Color(option.r, option.g, option.b, option.a);
|
|
|
+ } else {
|
|
|
+ color = new Glodon.Web.Graphics.Color("#EE799F", 1);
|
|
|
+ }
|
|
|
+ viewer3D.getModel().overrideComponentsColorById(elementIds, color);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.overrideComponentsColorByObjectData = () => {
|
|
|
+ let color = new Glodon.Web.Graphics.Color("#9598a9", 0.5);
|
|
|
+ model3D.overrideAllComponentsColor(color);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.clearColorElementById = (elementIds) => {
|
|
|
+ viewer3D.getModel().restoreComponentsColorById(elementIds);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.clearOverrideColorComponents = () => {
|
|
|
+ viewer3D.getModel().clearOverrideColorComponents();
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.getAreas = (callback) => {
|
|
|
+ viewer3D.getAreas(callback)
|
|
|
+ }
|
|
|
+ this.setNavigationMode = () => {
|
|
|
+ viewer3D.setNavigationMode(Glodon.Bimface.Viewer.NavigationMode3D.ThirdPerson);
|
|
|
+ viewer3D.setFlySpeedRate(3);
|
|
|
+ }
|
|
|
+ this.setBlueSky = () => {
|
|
|
+ let skyBoxManagerConfig = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManagerConfig();
|
|
|
+ skyBoxManagerConfig.viewer = viewer3D;
|
|
|
+ skyBoxManagerConfig.style = Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.CloudySky;
|
|
|
+ let skyBoxManager = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManager(skyBoxManagerConfig);
|
|
|
+ skyBoxManager.setStyle(Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.CloudySky);
|
|
|
+ skyBoxManager.enableSkyBox(true);
|
|
|
+ }
|
|
|
+ this.setGalaxySky = () => {
|
|
|
+ let skyBoxManagerConfig = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManagerConfig();
|
|
|
+ skyBoxManagerConfig.viewer = viewer3D;
|
|
|
+ skyBoxManagerConfig.style = Glodon.Bimface.Plugins.SkyBox.SkyBoxStyle.DarkNight;
|
|
|
+ let skyBoxManager = new Glodon.Bimface.Plugins.SkyBox.SkyBoxManager(skyBoxManagerConfig);
|
|
|
+ skyBoxManager.enableSkyBox(true);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.getCameraState = () => {
|
|
|
+ return viewer3D.getCamera().getStatus();
|
|
|
+ }
|
|
|
+ this.setStatus = (value) => {
|
|
|
+ viewer3D.getCamera().setStatus(value);
|
|
|
+ }
|
|
|
+ this.setStatusValue = (val) => {
|
|
|
+ roamAngle = val;
|
|
|
+ }
|
|
|
+ this.setCameraAnimation = (val) => {
|
|
|
+ viewer3D.setCameraAnimation(val);
|
|
|
+ }
|
|
|
+ this.setCameraState = (state) => {
|
|
|
+ viewer3D.setCameraStatus(state);
|
|
|
+ }
|
|
|
+ this.enableHover = (isHover) => {
|
|
|
+ viewer3D.enableHover(isHover);
|
|
|
+ }
|
|
|
+ this.setGlowEffectById = (ids) => {
|
|
|
+ viewer3D.enableGlowEffect(true);
|
|
|
+ model3D.setGlowEffectById(ids, {
|
|
|
+ type: "body",
|
|
|
+ color: new Glodon.Web.Graphics.Color(255, 229, 89, 1),
|
|
|
+ intensity: 1,
|
|
|
+ spread: 3
|
|
|
+ })
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.setGlowEffectByQuery = query => {
|
|
|
+ //query array
|
|
|
+ model3D.getComponentsByConditions(query, data => {
|
|
|
+ this.setGlowEffectById(data);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ this.clearGlowEffect = () => {
|
|
|
+ model3D.clearGlowEffect();
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.showExclusiveComponentsByObjectData = conditions => {
|
|
|
+ //根据筛选条件显示构件，其余全部隐藏
|
|
|
+ model3D.showExclusiveComponentsByObjectData(conditions);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.getObjectDataById = objectId => {
|
|
|
+ return model3D.getObjectDataById(objectId);
|
|
|
+ }
|
|
|
+ this.lockAxis = () => {
|
|
|
+ viewer3D.lockAxis(Glodon.Bimface.Viewer.AxisOption.Z, [Math.PI / 12, Math.PI / 2])
|
|
|
+ }
|
|
|
+ this.setRotationCenter = point => {
|
|
|
+ viewer3D.setRotationCenter(new Glodon.Web.Geometry.Point3d(point.x, point.y, point.z))
|
|
|
+ }
|
|
|
+ this.getTreeList = callback => {
|
|
|
+ model3D.getModelTree(callback);
|
|
|
+ }
|
|
|
+ this.editRoom = option => {
|
|
|
+ // 创建房间编辑器工具条的配置
|
|
|
+ if (roomEditorToolbar) return;
|
|
|
+ let roomEditorToolbarConfig = new Glodon.Bimface.Plugins.Rooms.RoomEditorToolbarConfig();
|
|
|
+ roomEditorToolbarConfig.viewer = viewer3D;
|
|
|
+ roomEditorToolbarConfig.roomId = option.roomId;
|
|
|
+ // 创建房间编辑器工具条
|
|
|
+ roomEditorToolbar = new Glodon.Bimface.Plugins.Rooms.RoomEditorToolbar(roomEditorToolbarConfig);
|
|
|
+ // 注册房间编辑器工具条的监听事件
|
|
|
+ roomEditorToolbar.addEventListener(Glodon.Bimface.Plugins.Rooms.RoomEditorToolbarEvent.Saved,
|
|
|
+ data => {
|
|
|
+ if (roomSaved) {
|
|
|
+ roomSaved(data)
|
|
|
+ this.exitRoom();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ roomEditorToolbar.addEventListener(Glodon.Bimface.Plugins.Rooms.RoomEditorToolbarEvent.Cancelled,
|
|
|
+ data => {
|
|
|
+ this.exitRoom();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.exitRoom = () => {
|
|
|
+ if (roomEditorToolbar) {
|
|
|
+ roomEditorToolbar.exit();
|
|
|
+ roomEditorToolbar = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setGlowEffect = option => { //gis发光
|
|
|
+ if (!layerId || !layerMng) return;
|
|
|
+ viewerGIS.enableGlowEffect(true);
|
|
|
+ layerMng.getLayer(layerId).getComponentManager().setGlowEffectById(option.ids, option.type);
|
|
|
+ }
|
|
|
+ this.convertObject = (name, id) => {
|
|
|
+ //添加外部构件
|
|
|
+ if (!extObjMng) extObjMng = new Glodon.Bimface.Plugins.ExternalObject.ExternalObjectManager(
|
|
|
+ viewer3D);
|
|
|
+ if (extObjMng.getObjectIdByName(name)) return extObjMng.getObjectIdByName(name);
|
|
|
+ let obj = extObjMng.convert(id);
|
|
|
+ extObjMng.loadObject({
|
|
|
+ name: name,
|
|
|
+ object: obj
|
|
|
+ })
|
|
|
+ viewer3D.render();
|
|
|
+ return extObjMng.getObjectIdByName(name);
|
|
|
+ }
|
|
|
+ this.rotateObject = (extObjId, angle) => {
|
|
|
+ let animationId;
|
|
|
+ animate()
|
|
|
+
|
|
|
+ function animate() {
|
|
|
+ animationId = requestAnimationFrame(animate)
|
|
|
+ extObjMng.rotateOnBasePoint(extObjId, {
|
|
|
+ x: 46290.56403256581,
|
|
|
+ y: 35755.300171217226,
|
|
|
+ z: -7232.165669450452,
|
|
|
+ }, {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ z: 1
|
|
|
+ }, Math.PI / angle);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (animationId) cancelAnimationFrame(animationId);
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+ this.hideComponentsById = (ids) => {
|
|
|
+ model3D.hideComponentsById(ids);
|
|
|
+ viewer3D.render();
|
|
|
+ }
|
|
|
+ this.setRotationCenter = (point) => {
|
|
|
+ viewer3D.setRotationCenter(point)
|
|
|
+ }
|
|
|
+ this.createWallEffect = (option) => {
|
|
|
+ //创建电子围栏
|
|
|
+ // 构造电子围墙效果配置项
|
|
|
+ let wallEffectConfig = new Glodon.Bimface.Plugins.Animation.WallEffectConfig();
|
|
|
+ // 配置Viewer对象、方向、持续时间、路径、高度
|
|
|
+ wallEffectConfig.viewer = viewer3D;
|
|
|
+ wallEffectConfig.direction = {
|
|
|
+ type: "Tangent", // 运动方式为沿着路径的切线方向
|
|
|
+ reverse: false // 运动方向默认为逆时针
|
|
|
+ }
|
|
|
+ wallEffectConfig.duration = option.duration;
|
|
|
+ wallEffectConfig.height = option.height;
|
|
|
+ wallEffectConfig.stretch = true;
|
|
|
+ wallEffectConfig.path = option.path;
|
|
|
+ // 电子围墙颜色
|
|
|
+ wallEffectConfig.color = new Glodon.Web.Graphics.Color(50, 211, 166, 0.8);
|
|
|
+ // 构造电子围墙扫描效果对象
|
|
|
+ wallEffect = new Glodon.Bimface.Plugins.Animation.WallEffect(wallEffectConfig);
|
|
|
+ }
|
|
|
+ this.destroy = () => {
|
|
|
+ console.log('销毁场景');
|
|
|
+ viewer3D.destroy();
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+}
|
|
|
+export default bimView;
|
