wl-bim-viewer
一個用於在瀏覽器上展示bim模型的vue插件，可以預覽轉化後的CAD文件。
基於vue和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>
文檔
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區 |
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
