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

最新推荐文章于 2024-05-16 21:49:22 发布
最新推荐文章于 2024-05-16 21:49:22 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： bimface 文章标签： vue.js html javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li__shuai/article/details/108756193
版权 
<!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>

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

目录结构
在这里插入图片描述

学习中的菜鸟_li
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个用于在浏览器上展示bim模型的vue插件
qq_15390381的博客
02-21 5749
wl-bim-viewer 一个用于在浏览器上展示bim模型的vue插件，可以预览转化后的CAD文件。 基于vue和autodesk forge viewer写成。 目前支持单模型加载及多模型顺序加载。 其他特性正在扩展中。 在线访问 快速上手 npm i wl-bim-viewer -S import wlBimViewer from "wl-bim-viewer";` import "wl-b...
vue 使用 xbim/viewer进行BIM模型3D预览
FuSh1
02-19 2430
施工行业BIM模型使用XBIM进行预览安装XBIM创建vue组件 安装XBIM 使用 npm install @xbim/viewer --save 进行安装 创建vue组件 <canvas id="viewer" style="height: calc(50vh + 10px); width: 100%; z-index: 999; border-radius: 3px"> import { Viewer, NavigationCube, Grid, ViewType } from '
Web前端最全vue使用 BIMFACE demo，2024年最新字节跳动前端面试题解析
最新发布
2401_84619938的博客
05-16 460
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】// 设置WebApplication3D的配置项// 创建WebApplication3D，用以显示模型// 增加加载完成监听事件//自适应屏幕大小// 渲染场景});},// 加载失败回调函数},// 添加构件嵌套关系if (!return;if (!// 构造地图配置项// 设置模型载入的基点// 构造地图对象},
vue项目中使用bimface
weixin_40997505的博客
04-08 504
文章目录在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 8344
在vue项目中使用bimface 模型的方法 效果图 点击加载地图后 在vue项目的根目录下找到 在里面加入<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script> 如图 然后在我们的vue页面里面如图修改 结构 样式 行为 代码 <template> <di
vue使用 BIMFACE demo
大家好，我是 ed.
04-20 746
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
在Vue项目中使用Typescript的实现
10-15
在实际操作中，由于Vue 3.0正式版的推迟发布，开发者在Vue 2.x项目中使用Typescript时，需要手动配置Webpack来处理TS和TSX文件。首先，我们需要在`webpack.config.js`中进行如下配置： 1. 设置入口文件（entry）和...
详解vue在项目中使用百度地图
10-17
主要介绍了vue在项目中使用百度地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue项目中优雅的使用SVG的方法实例详解
10-17
本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例给大家介绍在vue项目中优雅的使用SVG的方法，需要的朋友参考下吧
在vue3项目中使用tinymce编辑器
01-22
以上就是在Vue3项目中使用带有汉化包的TinyMCE编辑器的详细步骤。通过灵活的配置和丰富的插件系统，你可以进一步定制编辑器功能，以适应不同项目的需求。同时，确保在开发过程中遵循最佳实践，以保证项目的可维护性...
vue项目中使用Svg的方法
10-17
本文主要以 vue-cli3 搭建的项目为例，来聊一下如何在项目中更优雅的使用 svg 。感兴趣的朋友跟随小编一起看看吧
vue使用bimface完整展现模型
kaixinvz的博客
07-22 1048
vue bimface
vue 中使用 bimface
csdn姚宏波
11-04 2598
整个过程分为如下几个步骤 1、安装 vue 脚手架 2、创建项目 3、引入 bimface 响应的文件 4、修改 App.vue 文件，实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令，全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之后，可以通过安装 nrm ，来切换镜像源，也可以直接进行下一步 2. 创建项目 找一个合适的目录，打开 cmd 或者 powshell，键入如下命令，创建名为 bimface-.
bimface开发实战-vue版
书读百遍，其义自见
01-07 906
效果 演示地址 框架 bimface + vue3.0 代码地址 gitee地址 使用 yarn install yarn serve 觉得好点个赞吧！
vue3+ts+vite中使用BimFace
FWarriorJnaos的博客
06-29 806
广联达bimface没有提供可通过npm安装的依赖包，所以只能通过script标签引入script标签引入后，在vue文件中直接调用bimface的类和方法，在vscode中编辑时会有报错提示，但是不影响编译结果，解决办法（暂无）###更新由于以上报错会导致打包失败，所以尝试导入bimface第三方依赖包安装成功后，尝试在页面中import引入需要导入的bimfaec类或方法，发现有报错报错原因是未找到bimfacesdkloader的声明文件。
vue使用 BIMFACE demo，面试经历分享
m0_61040489的博客
03-28 344
/ 创建WebApplication3D，用以显示模型。// 设置WebApplication3D的配置项。// 增加加载完成监听事件。// 设置模型载入的基点。// 加载成功回调函数。// 加载失败回调函数。// 添加构件嵌套关系。// 构造地图配置项。
Vue 之webpack BIMFACE（JavaScript 转 Vue） 搭建工程
程序员猫爪
03-08 1614
1、Vue 之 BIMFACE 搭建工程 在webpack当中执行如下语句 npm i bimfacesdkloader 2、原本案例的JS代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <.
使用vue进行对bimface模型的加载显示以及一些简单操作
li__shuai的博客
09-24 2444
```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 { .
BIMFACE之Walkthrough。
weixin_44164824的博客
04-30 391
路径漫游管理器 <script> //路径漫游的配置项 var walkthroughConfig = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig(); walkthroughConfig.stopCallback; // 属性为回调函数 walkthroughConfig.time; // 漫游...
我如何在vue项目中使用vue-embed
07-22
要在Vue项目中使用vue-embed插件，您可以按照以下步骤进行操作： 1. 安装vue-embed插件：在终端中，导航到Vue项目的根目录，并运行以下命令来安装vue-embed插件： ```bash npm install vue-embed ``` 2. 导入和注册vue-embed插件：在需要使用vue-embed的Vue组件中，通过import语句将vue-embed插件导入，并使用Vue.use()方法进行注册。例如： ```javascript import VueEmbed from 'vue-embed'; export default { // ... mounted() { this.$embed.register('vue-embed', VueEmbed); }, // ... }; ``` 3. 在模板中使用vue-embed：在Vue组件的模板中，您可以使用`<vue-embed>`标签来嵌入外部网页。例如： ```html <template> <div> <vue-embed src="https://example.com"></vue-embed> </div> </template> ``` 4. 配置vue-embed：您可以根据需要配置vue-embed的属性。例如，您可以设置iframe的高度，使用`:height`属性来设置高度值。 ```html <template> <div> <vue-embed src="https://example.com" :height="500"></vue-embed> </div> </template> ``` 这样就可以在Vue项目中使用vue-embed插件来嵌入外部网页了。请确保在使用插件时遵循其文档和最佳实践，并处理好可能的安全和隐私问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值