路径漫游、批注、二维标签、三维标签、房间应用、外部构件、监听事件

<template><!-- 1 --><div class="hello" ref="bfContainer"><!-- 添加关键帧 --><button class="button" ref="addKeyFrameRef" @click="addKeyFrame">添加关键帧</button><!-- 播放路径漫游 --><button class="button" ref="playWalkThroughRef" @click="playWalkThrough">播放路径漫游</button><!--  开始绘制批注--><button class="button" ref="drawAnnotationReg" @click="drawAnnotation">开始绘制批注</button><!-- 恢复批注 --><buttonclass="button"ref="restoreAnnotationRef"@click="restoreAnnotation">恢复批注</button><!-- 开始放置二维标签 检查点 --><button class="button" ref="taggingRef" @click="addCustomTag">开始放置二维标签</button><!-- 开始放置三维标签 报警点 --><button class="button" ref="addMarkerRef" @click="addMarker">放置三维标签</button><!-- 创建房间 --><button class="button" ref="createRoomRef" @click="createMyRoom">创建房间</button><!-- 隐藏房间 --><button class="button" ref="hideRoomRef" @click="hideRoom([roomId])">隐藏房间</button><!-- 添加外部构件 --><button class="button" ref="addObjectRef" @click="addExternalObject">添加外部构件</button><!-- 旋转外部构件 --><button class="button" ref="rotateObjectRef" @click="rotateObject">旋转外部构件</button><!-- 移动外部构件 --><button class="button" ref="movebject" @click="moveObject">移动外部构件</button></div>
</template><script>
// 2
import {BimfaceSDKLoader,BimfaceSDKLoaderConfig,Glodon,
} from "bimfacesdkloader";
let viewer3D;
let app;
export default {name: "HelloWorld",props: {msg: String,},data() {return {walkThrough: null, //漫游路径//二维annotationToolbar: null, //批注工具条annotationState: null, //批注状态isDrawAnnotationActivated: false, //是否开始绘制cunstomItemContainer: null, //标签容器isAddCustomTagActivated: false, //是否开始放置标签//三维is3DMarkerPlaced: false, //是否放置isRoomCreated: false, //房间是否创建roomId: null, //房间号isHideRoomActivated: false, //房间是否隐藏isExternalObjectAdded: false, //是否有外部构件extObjMng: null,extObjId: null,};},async mounted() {//3const dom = this.$refs.bfContainer;let viewToken = "8420e7051b0248eca873d8ed2443275e";//let viewToken = "6311378ab1ef4420bbde958092854e2c";// 初始化显示组件let options = new BimfaceSDKLoaderConfig();options.viewToken = viewToken;//options.language=BimfaceLanguageOption.en_GB;//英文版options.language = BimfaceLanguageOption.zh_CN;//5try {const viewMetaData = await BimfaceSDKLoader.load(options);if (viewMetaData.viewType == "3DView") {// ======== 判断是否为3D模型 ========// 获取DOM元素//let dom4Show = document.getElementById("domId");//创建webApplication3DConfiglet webAppConfig =new Glodon.Bimface.Application.WebApplication3DConfig();//4 设置webApplication3DConfig的dom元素值webAppConfig.domElement = dom;// 创建WebApplication3Dapp = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);// 添加待显示的模型app.addView(viewToken);// 从WebApplication获取viewer3D对象viewer3D = app.getViewer();// 监听添加view完成的事件viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,function () {//自适应屏幕大小window.onresize = function () {viewer3D.resize(document.documentElement.clientWidth,document.documentElement.clientHeight - 40);};// 调用viewer3D对象的Method，可以继续扩展功能// 渲染3D模型viewer3D.render();});} else {console.log("1");}} catch (err) {console.log(error);}},methods: {//按钮 添加关键帧addKeyFrame() {this.createWalkThrough();//添加关键帧this.walkThrough.addKeyFrame();},//创建漫游路径createWalkThrough() {if (this.walkThrough == null) {// 构造路径漫游配置wtConfiglet walkThroughConfig =new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();// 设置路径漫游配置匹配的viewer对象walkThroughConfig.viewer = viewer3D;// 构造路径漫游对象this.walkThrough = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(walkThroughConfig);}},//按钮 播放漫游路径playWalkThrough() {if (this.walkThrough != null) {// 设置播放时间为5秒this.walkThrough.setWalkthroughTime(2);// 设置关键帧事件this.walkThrough.setKeyFrameCallback(this.kfCallback);// 播放路径漫游this.walkThrough.play();} else {window.alert("Please add keyframes first.");}},//第二个关键帧kfCallback(idx) {console.log("kfCallback", idx);switch (idx) {case 0:break;case 1:console.log("Hello, BIM!");break;}},//按钮 开始绘制批注drawAnnotation() {// 创建批注工具条this.createAnnotationToolbar();if (!this.isDrawAnnotationActivated) {// 隐藏主工具条app.getToolbar("MainToolbar").hide();// 显示批注工具条this.annotationToolbar.show();// 修改批注的激活状态为truethis.isDrawAnnotationActivated = true;}},//批注工具条createAnnotationToolbar() {if (!this.annotationToolbar) {// 创建批注工具条的配置let config =new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig();config.viewer = viewer3D;// 创建批注工具条this.annotationToolbar =new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(config);// 注册批注工具条的监听事件this.annotationToolbar.addEventListener(Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Saved,this.onAnnotationSaved);this.annotationToolbar.addEventListener(Glodon.Bimface.Plugins.Annotation.AnnotationToolbarEvent.Cancelled,this.eixtAnnotation);}},// 保存批注并退出onAnnotationSaved() {this.annotationState = this.annotationToolbar.getAnnotationManager().getCurrentState();this.eixtAnnotation();},// 退出批注eixtAnnotation() {// 显示主工具条app.getToolbar("MainToolbar").show();this.annotationToolbar.getAnnotationManager().exit();// 批注的激活状态为falsethis.isDrawAnnotationActivated = false;},//按钮 恢复批注restoreAnnotation() {if (this.annotationState != null) {// 恢复批注this.annotationToolbar.getAnnotationManager().setState(this.annotationState);} else {window.alert("Please draw an annotation first.");}},//创建标签容器createCustomItemContainer() {if (!this.cunstomItemContainer) {// 创建标签容器配置let drawableContainerConfig =new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();// 设置容器配置匹配的对象drawableContainerConfig.viewer = viewer3D;// 创建标签容器this.cunstomItemContainer =new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableContainerConfig);}},//创建标签addCustomItem(object) {this.createCustomItemContainer();// 创建CustomItemConfiglet config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();let content = document.createElement("div");// 自定义样式，支持HTML的任意DOM元素// 设置标签的宽度和高度content.style.width = "80px";content.style.height = "32px";// 设置标签样式content.style.border = "solid";content.style.borderColor = "#FFFFFF";content.style.borderWidth = "2px";content.style.borderRadius = "5%";content.style.background = "#11DAB7";// 设置标签文字内容与样式content.innerText = "检查点";content.style.color = "#FFFFFF";content.style.textAlign = "center";content.style.lineHeight = "32px";// 设置自定义标签配置config.content = content;config.viewer = viewer3D;config.worldPosition = object.worldPosition;// 创建自定义标签对象let customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);// 将自定义标签添加至标签容器内this.cunstomItemContainer.addItem(customItem);},addCustomTag() {if (!this.isAddCustomTagActivated) {// 创建鼠标点击的监听事件viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,this.addCustomItem);this.setButtonText(this.$refs.taggingRef, "结束放置标签");} else {// 移除鼠标点击的监听事件viewer3D.removeEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,this.addCustomItem);this.setButtonText(this.$refs.taggingRef, "开始放置标签");}this.isAddCustomTagActivated = !this.isAddCustomTagActivated;},//创建三维容器addMarker() {if (this.is3DMarkerPlaced) {return;}// 构造三维标签容器配置markerContainerConfiglet markerContainerConfig =new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();// 设置markerContainerConfig匹配的viewer对象markerContainerConfig.viewer = viewer3D;// 构造三维标签容器markerContainerlet markerContainer =new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerContainerConfig);// 构造三维标签配置项let markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();// 为标签指定图片路径markerConfig.src ="http://static.bimface.com/resources/3DMarker/warner/warner_red.png";// 构造点位，并指定为标签的插入点let markerPos = {x: -5743.838548165086,y: -1667.12605781937,z: 12923.137945446013,};markerConfig.worldPosition = markerPos;// 指定标签大小markerConfig.size = 60;// 构造三维标签let marker = new Glodon.Bimface.Plugins.Marker3D.Marker3D(markerConfig);// 将三维标签添加至容器内markerContainer.addItem(marker);this.is3DMarkerPlaced = true;// 添加标签的点击事件marker.onClick(function () {window.alert("Warning!");});},//按钮 创建房间createMyRoom() {if (this.isRoomCreated) {return;}// 获取解析后的房间边界信息，这里要找到名称为“活动室 11”的对象，并创建房间viewer3D.getModel().getAreas((data) => {console.log(data);if (data) {data.map((ele) => {//data为数组 ele为数组中对象if (ele.rooms) {ele.rooms.map((roomInfo) => {//rooms为数组 roomInfo为数组中对象console.log(roomInfo.name);if (roomInfo.name == "活动室 11") {// 获取房间信息和idthis.roomId = "room-" + roomInfo.id;// 通过房间边界创建一个3350mm高的房间，并自定义房间idviewer3D.createRoom(roomInfo.boundary, 3350, this.roomId);// 将房间颜色设置为红色this.setRoomRed([this.roomId]);viewer3D.render();this.isRoomCreated = true;}});}});}});},//设置房间颜色为红色setRoomRed(ids) {console.log(ids);// 设置房间线框颜色let redColor1 = new Glodon.Web.Graphics.Color(255, 0, 0, 0.8);viewer3D.setRoomsFrameColorById(ids, redColor1);// 设置房间颜色let redColor2 = new Glodon.Web.Graphics.Color(255, 0, 0, 0.1);viewer3D.setRoomsColorById(ids, redColor2);},// 按钮 隐藏房间hideRoom(ids) {// 判断是否已经创建房间if (!this.isRoomCreated) {window.alert("Please create a room first!");return;}if (!this.isHideRoomActivated) {// 根据id隐藏房间viewer3D.hideRoomsById(ids);viewer3D.render();this.setButtonText(this.$refs.hideRoomRef, "显示房间");this.isHideRoomActivated = true;} else {// 根据id显示房间viewer3D.showRoomsById(ids);viewer3D.render();this.setButtonText(this.$refs.hideRoomRef, "隐藏房间");this.isHideRoomActivated = false;}},//按钮 添加外部构件addExternalObject() {if (this.isExternalObjectAdded) {return;}// 构造外部构件管理器this.extObjMng = new Glodon.Bimface.Viewer.ExternalObjectManager(viewer3D);let objUrl ="http://static.bimface.com/attach/6db9d5bcf88640f997b23be61e870ee8_%E6%B1%BD%E8%BD%A6.3DS";// 将3DS对象添加为外部构件this.extObjMng.loadObject({ name: "vehicle", url: { objectUrl: objUrl } },() => {this.isExternalObjectAdded = true;// 获取构件对象IDthis.extObjId = this.extObjMng.getObjectIdByName("vehicle");// 将构件移至初始位置this.extObjMng.translate(this.extObjId, {x: -7500,y: -15000,z: -450,});viewer3D.render();});},//按钮 旋转构件rotateObject() {if (!this.isExternalObjectAdded) {return;}// 绕逆时针旋转30°this.extObjMng.rotateZ(this.extObjId, Math.PI / 6);},//按钮 每次让车向前移动一米moveObject() {if (!this.isExternalObjectAdded) {return;}// 沿汽车前进方向移动1.0米this.extObjMng.offsetY(this.extObjId, -1000);},//切换按钮内容setButtonText(button, text) {button.innerText = text;},},//销毁场景beforeDestroy() {app && app.destroy();},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}.hello {height: 90vh;
}.button {margin: 5px 0 5px 5px;width: 120px;height: 30px;border-radius: 3px;border: none;background: #11dab7;color: #ffffff;
}
</style>