使用vue进行对bimface模型的加载显示以及一些简单操作

最新推荐文章于 2024-04-13 06:56:33 发布
最新推荐文章于 2024-04-13 06:56:33 发布
阅读量2.4k 收藏 2
点赞数 2
分类专栏： bimface 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li__shuai/article/details/108783887
版权 

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first BIMFACE app</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      html, body {
        height: 100%;
      }
      #domId {
        height: 100%;
      }
	  
	  html,
	  body {
	      height: 100%;
	  }
	  
	  .main {
	      display: flex;
	      flex-direction: column;
	      overflow: hidden;
	      height: 100%;
	      width: 100%;
	  }
	  
	  .model {
	      flex: 1;
	  }
	  .buttons {
	    font-size: 0;
	  }
    </style>
	 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
  </head>
  <body>
	 <!-- 模态框1 -->
	 <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	   <div class="modal-dialog" role="document">
	     <div class="modal-content">
	       <div class="modal-header">
	         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	         <h4 class="modal-title" id="myModalLabel">火警详情</h4>
	       </div>
	       <div class="modal-body">
	         <table class="table table-hover">
	           <tr>
	 			  <th>名称</th>
	 			  <th>信息</th>
	 		  </tr>
	 		  
	 		  <tr>
	 			  <td>传感器Id</td>
	 			  <td>168</td>
	 		  </tr>
	 		  <tr>
	 			  <td>传感器名称</td>
	 			  <td>火灾消防</td>
	 		  </tr>
	 		  <tr>
	 			  <td>监测值</td>
	 			  <td>345</td>
	 		  </tr>
	         </table>
	       </div>
	     </div>
	   </div>
	 </div>
	 
	 <!-- 模态框2 -->
	 <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	   <div class="modal-dialog" role="document">
	     <div class="modal-content">
	       <div class="modal-header">
	         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	         <h4 class="modal-title" id="myModalLabel">室内CO详情</h4>
	       </div>
	       <div class="modal-body">
	         <table class="table table-hover">
	           <tr>
	         	  <th>名称</th>
	         	  <th>信息</th>
	           </tr>
	           
	           <tr>
	         	  <td>传感器Id</td>
	         	  <td>167</td>
	           </tr>
	           <tr>
	         	  <td>传感器名称</td>
	         	  <td>CO浓度检测</td>
	           </tr>
	           <tr>
	         	  <td>监测值</td>
	         	  <td>305</td>
	           </tr>
	         </table>
	       </div>
	     </div>
	   </div>
	 </div>
	 
	 <!-- 模态框3 -->
	 <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	   <div class="modal-dialog" role="document">
	     <div class="modal-content">
	       <div class="modal-header">
	         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	         <h4 class="modal-title" id="myModalLabel">室内CO2详情</h4>
	       </div>
	       <div class="modal-body">
	         <table class="table table-hover">
	           <tr>
	         	  <th>名称</th>
	         	  <th>信息</th>
	           </tr>
	           
	           <tr>
	         	  <td>传感器Id</td>
	         	  <td>166</td>
	           </tr>
	           <tr>
	         	  <td>传感器名称</td>
	         	  <td>CO浓度检测</td>
	           </tr>
	           <tr>
	         	  <td>监测值</td>
	         	  <td>300</td>
	           </tr>
	         </table>
	       </div>
	     </div>
	   </div>
	 </div>
	 
	 <div class='main'>
	 	<!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
	 	  <div class='main' id="bimface">
	 	    <div class='buttons'>
	 	      <button type="button" class="btn btn-primary" id="btnOverrideComponentsColorByObjectId"
	 	        @click="overrideComponentsColorById()">给传感器着色</button>&nbsp;
	 	       <button class="btn btn-primary" id="btnBlink" @click="blink()">传感器闪烁</button>
	 	       <button type="button" class="btn btn-primary" id="btnHideComponentsByObjectId"
	 	        @click="hideComponentsById()">隐藏传感器</button>
	 	    </div>
	     <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
	     <div class='model' id="domId"></div>
	 
	 </div>
	 
	
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
    <script>
		
		 var vm = new  Vue({
			el:'#bimface',
			data:{
				viewer3D:'',
				app:null,
				cameraState:'{"name":"persp","position":{"x":-15290.504153609158,"y":-11705.98598911822,"z":6547.152792941356},"target":{"x":35869.08012166626,"y":23950.30963410126,"z":-9486.25721153848},"up":{"x":0,"y":-0.0000036732050934432307,"z":0.9999999999932538},"fov":45,"version":1}',
				viewToken: '5d71e07f75bf44108b797fbc21f55a4c',
				loaderConfig:new BimfaceSDKLoaderConfig(),
				isOverrideComponentsColorByIdActivated:false,
				isHideComponentsByIdActivated:false,
				isBlinkComponentsActivated:false
			},
			created:function(){
				  const _this = this;
				  _this.loaderConfig.viewToken = _this.viewToken;
				  BimfaceSDKLoader.load(_this.loaderConfig, _this.successCallback,_this.failureCallback);
			},
			methods:{
                  successCallback:function(viewMetaData) {
				  const _this = this;
				  if (viewMetaData.viewType == "3DView") {
					  // ======== 判断是否为3D模型 ========        
					  // 获取DOM元素
					  var dom4Show = document.getElementById('domId');
					  var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
					  webAppConfig.domElement = dom4Show;
					  // 创建WebApplication
					  var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
					  // 添加待显示的模型
					  app.addView(viewMetaData.viewToken);
					  // 从WebApplication获取viewer3D对象
					  var viewer3D = app.getViewer();
					   _this.viewer3D = viewer3D;
					  // 监听添加view完成的事件
					   _this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
							 _this.setCameraStatus(); 
				  
						  //自适应屏幕大小
						  window.onresize = function () {
							   _this.viewer3D.resize(document.documentElement.clientWidth, document.documentElement
								  .clientHeight);
						  }
					  });
					// 添加view点击构件的监听事件
					_this.viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, _this.getData);
				  }
				},
				
				 failureCallback:function(error) {
				  console.log(error);
				},
				
				setCameraStatus:function() {
					    const _this = this;
						_this.viewer3D.setCameraStatus(_this.cameraState);
				},
				
				//********************根据Id给构件着色*********************
				overrideComponentsColorById:function() {
					const _this = this;
					 var color = new Glodon.Web.Graphics.Color("#EE799F", 0.8);
					 if (!_this.isOverrideComponentsColorByIdActivated) {
					   // 根据Id修改构件颜色及透明度
					   _this.viewer3D.overrideComponentsColorById(["168", "162", "156", "166","160","154","167","161","155","169","163","157","170","164","171","165","159","158"], color);
					   // 根据Id修改构件透明度
					   // viewer3D.overrideComponentsOpacityById(["307240"], 0.8);
					   _this.viewer3D.render();
					   _this.setButtonText("btnOverrideComponentsColorByObjectId", "恢复颜色");
					 } else {
					   //恢复颜色
					   _this.viewer3D.restoreComponentsColorById(["307240", "168", "162", "156", "166","160","154","167","161","155","169","163","157","170","164","171","165","159","158"]);
					   _this.viewer3D.render();
					   _this.setButtonText("btnOverrideComponentsColorByObjectId", "给传感器着色");
					 }
					 _this.isOverrideComponentsColorByIdActivated = !_this.isOverrideComponentsColorByIdActivated;
				   },
				   
				   // *********************** 按钮文字 ***********************
						setButtonText:function(btnId, text) {
						 var dom = document.getElementById(btnId);
						 if (dom != null && dom.nodeName == "BUTTON") {
						   dom.innerText = text;
						 }
					   },
					   
					 //********************根据Id隐藏构件*********************
						hideComponentsById:function() {
						  const _this = this;
						  if (!_this.isHideComponentsByIdActivated) {
							_this.viewer3D.hideComponentsById(["168", "162", "156", "166","160","154","167","161","155","169","163","157","170","164","171","165","159","158"]);
							_this.viewer3D.render();
							_this.setButtonText("btnHideComponentsByObjectId", "显示构件");
						  } else {
							//取消隐藏
							_this.viewer3D.showComponentsById(["168", "162", "156", "166","160","154","167","161","155","169","163","157","170","164","171","165","159","158"]);
							_this.viewer3D.render();
							_this.setButtonText("btnHideComponentsByObjectId", "隐藏构件");
						  }
						  _this.isHideComponentsByIdActivated = !_this.isHideComponentsByIdActivated;
						},
						
						 // *************** 根据Id闪烁 ***************
				
							blink:function(){
								const _this = this;
								if (!_this.isBlinkComponentsActivated) {
									// 构件闪烁                
									_this.viewer3D.addBlinkComponentsById(["168", "162", "156", "166","160","154","167","161","155","169","163","157","170","164","171","165","159","158"]);
									_this.viewer3D.setBlinkColor(new Glodon.Web.Graphics.Color("#32D3A6", 0.8));
									_this.viewer3D.enableBlinkComponents(true);
									_this.viewer3D.setBlinkIntervalTime(500);
									_this.viewer3D.render();
									_this.setButtonText("btnBlink", "关闭闪烁效果");
								} else {
									// 取消闪烁
									_this.viewer3D.clearAllBlinkComponents();
									_this.viewer3D.render();
									_this.setButtonText("btnBlink", "传感器闪烁");
								}
								_this.isBlinkComponentsActivated = !_this.isBlinkComponentsActivated;
							},
							
								 
							getData:function(data) {
								 const _this = this;
								//获取构件属性
								 // var Data = JSON.stringify(data);
								 if(data.objectId=="168"){
								 $("#myModal1").modal({
									   backdrop: "static"
								 });				 
								 }
								 
								 if(data.objectId=="162"){
								 $("#myModal2").modal({
									   backdrop: "static"
								 });				 
								 }
								 
								 if(data.objectId=="156"){
								 $("#myModal3").modal({
									   backdrop: "static"
								 });				 
								 }
								
							}
	   
				}
		}) 
    </script>
  </body>
</html>

效果图
在这里插入图片描述

学习中的菜鸟_li
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 中使用 bimface
csdn姚宏波
11-04 2567
整个过程分为如下几个步骤 1、安装 vue 脚手架 2、创建项目 3、引入 bimface 响应的文件 4、修改 App.vue 文件，实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令，全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之后，可以通过安装 nrm ，来切换镜像源，也可以直接进行下一步 2. 创建项目 找一个合适的目录，打开 cmd 或者 powshell，键入如下命令，创建名为 bimface-.
vue使用bimface完整展现模型
kaixinvz的博客
07-22 1033
vue bimface
Vue 之webpack BIMFACE（JavaScript 转 Vue） 搭建工程
最新发布
2401_84094725的博客
04-13 596
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
vue项目中使用bimface
weixin_40997505的博客
04-08 499
文章目录在index.html中引入js使用window调用函数 因为引入的js的变量和函数都会挂载到window这个对象下面，所以可以使用window.[函数名称]来使用这个函数。 在index.html中引入js <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
vue 项目中使用bimface
wzwzwz555的博客
06-01 8324
在vue项目中使用bimface 模型的方法 效果图 点击加载地图后 在vue项目的根目录下找到 在里面加入<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script> 如图 然后在我们的vue页面里面如图修改 结构 样式 行为 代码 <template> <di
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
基于vue的三维模型加载插件
05-11
安装：npm install vue-model-view -S 组件安装：import ModelView from 'vue-model-view' Vue.use(ModelView)
vue3中使用threejs加载fbx模型.zip
07-04
vue3中使用threejs加载fbx模型， 首先需要npm install three， 并且threejs场景正常
vue使用 BIMFACE demo
大家好，我是 ed.
04-20 740
vue使用 BIMFACE demo 一个小案例 首先在 index.html 文件引入 js 文件 <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script> 然后在相应的页面编写 bim 代码。其实官网给的demo都是js的，只要把它转成vue语法就可以了。 https://bimface.com/developer-jsde
bimface开发实战-vue版
书读百遍，其义自见
01-07 902
效果 演示地址 框架 bimface + vue3.0 代码地址 gitee地址 使用 yarn install yarn serve 觉得好点个赞吧！
vue3+ts+vite中使用BimFace
FWarriorJnaos的博客
06-29 784
广联达bimface没有提供可通过npm安装的依赖包，所以只能通过script标签引入script标签引入后，在vue文件中直接调用bimface的类和方法，在vscode中编辑时会有报错提示，但是不影响编译结果，解决办法（暂无）###更新由于以上报错会导致打包失败，所以尝试导入bimface第三方依赖包安装成功后，尝试在页面中import引入需要导入的bimfaec类或方法，发现有报错报错原因是未找到bimfacesdkloader的声明文件。
在vue项目中使用bimface 模型的显示
li__shuai的博客
09-23 1753
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first BIMFACE app</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { hei
BIMFACE之Walkthrough。
weixin_44164824的博客
04-30 391
路径漫游管理器 <script> //路径漫游的配置项 var walkthroughConfig = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig(); walkthroughConfig.stopCallback; // 属性为回调函数 walkthroughConfig.time; // 漫游...
vue指令模式 添加埋点
risingfine的博客
05-29 1402
埋点也叫浏览足迹，有多种类型，如浏览页面、点击、搜索等等。 我使用Vue的自定义指令来添加埋点，使用起来比较简单方便，下面是我的代码 Dom代码： <div class="main" v-track="{act:'browse'}"> </div> <el-button v-track="{act:'click'}">Test</el-button> 指令代码： import Vue from 'vue' // 埋点指令 Vue.direct
BIMFACE之Marker3DContainer。
weixin_44164824的博客
04-30 388
在viewer3D视图上添加三维标签时，首先要创建一个三维标签的容器,用以添加，删除各种三维标签。 目前只有RVT RVT集成模型 SKP IFC IGMS可用。 <script> // 三维标签的配置项 var marker3DContainerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerCon...
vue2+three.js实现页面引入3d模型并进行简单模型控制
weixin_42477308的博客
05-13 3294
创建材质代码段解释：此时的方法是将一个图片转换为一个材质，并将该材质贴到3d电脑模型的屏幕上，（具体怎么精确贴到模型屏幕上，下面代码做有解释）例2：控制模型某一部位（如vr模型驾驶，点击车门，车门打开，进入查看驾驶室）可以在控制台打印出模型位置name，一般建模时会声明出来模型位置name。当拿到模型某一位置名字时，可以直接进行更换此位置颜色。此时就将上面所转换的图片精准的贴在模型的屏幕上。上面仅为自身理解，如有错误请大佬指正！七、渲染模型之后想进行控制模型的某一位置。五、创建场景、相机、地面、材质。
vue使用 BIMFACE demo，2024年最新前端开发知识点
m0_57541068的博客
04-10 366
/ 创建WebApplication3D，用以显示模型。// 设置WebApplication3D的配置项。// 增加加载完成监听事件。// 设置模型载入的基点。// 加载失败回调函数。// 添加构件嵌套关系。// 构造地图配置项。
使用vue2的threejs加载stl模型
06-08
加载STL模型可以使用Three.js库中的STLLoader。而在Vue2中使用Three.js需要先安装Three.js和STLLoader库。 安装Three.js和STLLoader： ``` npm install three stl-loader ``` 在Vue组件中引入Three.js和STLLoader...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值