文档章节

一个用于在浏览器上展示bim模型的vue插件

春深
 春深
发布于 02/21 18:13
字数 794
阅读 464
收藏 0

wl-bim-viewer

一个用于在浏览器上展示bim模型的vue插件,可以预览转化后的BIM、CAD文件。
基于vue和autodesk forge viewer写成。
目前支持单模型加载及多模型顺序加载。
其他特性正在扩展中。

传送门:Github & autodesk forge viewer文档

在线访问

快速上手

npm i wl-bim-viewer -S

import wlBimViewer from "wl-bim-viewer";`
import "wl-bim-viewer/lib/wl-bim-viewer.css"
Vue.use(wlBimViewer);
<wl-bim-viewer 
    multiple 
    :docs="bims" 
    class="wl-viewer">
</wl-bim-viewer>

重要更新

1.1.0 减少组件包体积,将js依赖cdn;请勿使用低于1.1.0版本

文档

Attributes

序号 参数 说明 类型 默认值
1 docs 模型数据数组,元素为对象且至少需要一个path字段(模型文件路径,可配置) Array -
2 props 配置项,详见下 Object -
3 multiple 是否开启多模型顺序加载 Boolean false

props

序号 参数 说明 默认字段 字段值类型
1 path 用于配置docs参数内的模型文件路径字段,必填 path String
2 options 用于loadModel时的自定义模型配置项,可配置模型角度、位置等。此字段应是一个对象 options Object
3 name 用于docs参数内模型的名称字段,选填 name String

Events

序号 事件名称 说明 回调参数
1 init viewer初始化事件,此时模型还未加载,可进行配置或注册事件操作 function(viewer) 依次为当前viewer对象
2 partSelect 构件点击事件 function(selections, event, info) 以此为当前选择构件、当前点击对象、构件信息
3 cameraMove 摄像头移动事件 function(rvt) 依次为当前rvt对象
4 successAll 多模型时,全部加载完毕事件 function(result) 依次为全部模型对象数组
5 errorAll 多模型时,全部加载失败事件 function(result) 依次为失败信息
6 success 模型加载成功回调 function(result) 依次为当前模型信息
7 loaded 模型渲染完毕回调 function(evt) 依次为当前模型信息
8 error 模型加载失败回调 function(name, code) 依次为当前模型docs参数name字段、错误码

Form Methods

序号 方法名 说明 参数
1 clearColor 清空模型构件上色 -
2 viewerFiting 聚焦摄像头 function(ids, focal) 依次为需要聚焦至的构件id、焦距
3 unloadModel 卸载model模型 function(model) 依次为需要卸载的模型model,无则默认为当前model
4 uploadViewer 卸载viewer -
5 getModelInfo 获取模型信息 function(viewer, models) 依次为viewer对象、已加载的model对象

Slot

序号 name 说明
1 - 位于模型dom下的自定义dom区

版本记录

1.1.0 减少组件包体积,将js依赖cdn

1.0.0 因国外cdn时间波动太大,将js依赖本地化,并优化初始化事件防止init错误

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

© 著作权归作者所有

春深
粉丝 0
博文 12
码字总数 22011
作品 0
开封
前端工程师
私信 提问
加载中

评论(0)

Vue UI:Vue开发者必不可少的工具

译者按: Vue.js相关的开发工具越来与好用! 原文: Vue UI: A First Look 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 随着最新的...

Fundebug
2018/07/30
0
0
前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例

一、前端MVC概要 1.1、库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Vue是框架而jQuery则是库。 1.2、AMD与CMD 在...

张果
2017/12/25
0
0
Vue Router的手写实现

为什么需要前端路由 在前后端分离的现在,大部分应用的展示方式都变成了 SPA(单页面应用 Single Page Application)的模式。为什么会选择 SPA 呢?原因在于: 用户的所有操作都在同一个页面...

猴哥别瞎说
03/01
0
0
Vue学习笔记(一)------脚手架vue cli

脚手架vue-cli(3.x) vue-cli是一个基于vue.js进行快速开发的完整系统,提供下面几个功能: 通过 搭建交互式的项目脚手架。 通过 + 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-serv...

静水流深酱
2019/04/17
0
0
vue预渲染之prerender-spa-plugin插件应用

背景 前几天应需求做了一个网页测速小工具,经过考虑,进行了一些选型,由于在公司一直用react搬砖,所以这次决定提高全方面能力,接触并使用vue构建一个小型项目,vue用gizp压缩后仅有约33K...

menglinlun
2018/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

结束数据库会话期间(踢出用户)

--可以使用这堆,查询出正在使用的会话期间,然后结束某个会话idUSE mastergoSELECT * from sysprocesses where dbid in (select dbid from sysdatabases where name='hbposv10_branch......

ethanleellj
8分钟前
14
0
TMS320C28x系列TMS320F2837x开发板的蜂鸣器、直流电机和步进电机接口

处理器 TI TMS320F2837x单/双核具有200MHz的高速处理能力,双核拥有多达12路的PWM输出。以下分别是TMS320F2837x单/双核CPU资源框图: 蜂鸣器 本开发板搭载有无源蜂鸣器,可以发出不同频率的声...

Tronlong创龙
8分钟前
16
0
Python3 撸代码窍门,怎样用 Map, Filter, Reduce 代替 For 循环.

感谢作者分享-http://bjbsair.com/2020-04-07/tech-info/30736.html 你是否有过这样的经历,你查看自己写的代码并看到满眼的 for 循环?你发现你必须斜着你的眼睛,并将脑袋前倾到你的显示器...

曹长卿
9分钟前
17
0
vscode插件

1、vetur 强大的vue开发插件 等待更新!!!!

米依若兮
9分钟前
7
0
服务器批量管理软件排名 批量管理vps

远程桌面是微软公司为了便于网络管理员管理维护服务器推出的一项服务。从windows 2000 server版本开始引入,网络管理员时候远程桌面连接器连接到网络任意一台开启了远程桌面控制功能的计算机...

09网络2
11分钟前
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部