• Stars
    star
    131
  • Rank 275,867 (Top 6 %)
  • Language Vue
  • License
    Apache License 2.0
  • Created almost 5 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

用于vue框架的bim三维模型预览插件。Bim 3D model preview plugin for vue framework.

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
4 changeClean 是否开启当docs变化,清理之前的模型然后重新加载新模型 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

More Repositories

1

tree-transfer

一个基于vue和element-ui的树形穿梭框及邮件通讯录。A tree shaped shuttle box assembly based on Vue and element-ui. Vuecli3版本见https://github.com/hql7/wl-tree-transfer 示例见->
Vue
600
star
2

wl-micro-frontends

Micro front end practical project tutorial. 微前端项目实战vue项目。基于vue3.0&qiankun2.0进阶版:https://github.com/wl-ui/wl-mfe
Vue
506
star
3

wl-gantt

wl-gantt:一个简单易用且高度可配置的甘特图进度计划项目管理插件。An easy-to-use gantt plug-in for the vue framework.
JavaScript
474
star
4

wl-tree-table

a tree table based on vue and element-ui,一个基于vue和element-ui的树形表格
Vue
47
star
5

wl-admin

用于vue项目的框架主体结构,后台管理系统项目模板。Framework main structure for vue project, background management system project template
JavaScript
38
star
6

wl-tree-transfer

A tree shaped shuttle box assembly based on Vue and element-ui 一个基于vue.js和element-ui的树形穿梭框,也可用于邮件通讯录。vuecli2版本https://github.com/hql7/tree-transfer 示例见->
JavaScript
37
star
7

wl-vue-select

用于vue框架的树形下拉框及带全选的普通下拉框。 Tree drop-down box for vue framework and ordinary drop-down box with select all
JavaScript
24
star
8

app.lara-shop

刚入行写的一个小项目,一个基于vue的app商城项目,不可思议的简洁卡片式风格
Vue
10
star
9

wl-address

一个基于vue和element-ui的省市县三级地址联动插件,使用本地化数据,Level 3 Linkage Address Plug-in, Using Localized Data
JavaScript
10
star
10

wl-workflow

用于vue框架的前端工作流流程图插件。Front-end workflow flowchart plugin for vue framework.
Vue
9
star
11

webpack4-html-demo

一个普通html项目的打包方案
JavaScript
6
star
12

nw-vue-demo

使用nwjs将vue项目打包为支持在xp上运行的桌面程序
Inno Setup
5
star
13

wl-cad-viewer-demo

在浏览器离线预览转化后的cad、bim等模型,并进行一些测试性研究
JavaScript
4
star
14

wl-mapper

一个js对象映射类,尝试解决前后端分离大量字段名不对应问题
JavaScript
4
star
15

wl-cli

vue 探索wlui最佳工程实践脚手架
JavaScript
3
star
16

root.lara-shop

laravel+vue商城后台管理系统
Vue
2
star
17

cad-to-web

通过aurodesk服务将cad文件转化为可以在web浏览器预览的文件
JavaScript
2
star
18

video-demo

一个结合阿里云的直播小例子
HTML
1
star
19

web-docker-demo

前端使用docker部署demo
Vue
1
star
20

xcx.lara-shop

单商家版商城小程序
JavaScript
1
star
21

wl-template-vue

vue的最佳工程结构模板
Vue
1
star