在vue项目中使用bimface 模型的显示

最新推荐文章于 2024-09-13 12:44:08 发布

学习中的菜鸟_li

最新推荐文章于 2024-09-13 12:44:08 发布

阅读量1.8k

点赞数

分类专栏： bimface 文章标签： vue.js html javascript jquery

本文链接：https://blog.csdn.net/li__shuai/article/details/108756193

版权

bimface 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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%;
      }
    </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="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
  </head>
  <body>
    <div id="domId">
		
	</div>
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>
    <script>
		
		 var vm = new  Vue({
			el:'#domId',
			data:{
				viewToken: '7ee7273827b4439ca807b5cd0386ade3',
				loaderConfig:null
			},
			mounted:function(){
				  var that=this;
				  var options = new BimfaceSDKLoaderConfig();
				  options.viewToken = that.viewToken;
				  BimfaceSDKLoader.load( options, that.successCallback,that.failureCallback);
			},
			methods:{
				successCallback:function(viewMetaData) {
				  // 创建WebApplication，直接显示模型或图纸
				  var dom4Show = document.getElementById('domId');
				  new Glodon.Bimface.Application.WebApplicationDemo(viewMetaData, dom4Show); 
				},
				
				 failureCallback:function(error) {
				  console.log(error);
				} 
			}
		}) 
    </script>
  </body>
</html>