vue?中使用?bimface詳情
整個過程分為如下幾個步驟:
- 1、安裝
vue腳手架 - 2、創(chuàng)建項目
- 3、引入
bimface響應的文件 - 4、修改
App.vue文件，實現(xiàn)頁面渲染
1. 安裝 vue 腳手架
這里還是使用 Vue CLI
通過如下命令，全局安裝 vue 腳手架工具
npm install -g @vue/cli
安裝好之后，可以通過安裝 nrm ，來切換鏡像源，也可以直接進行下一步
2. 創(chuàng)建項目
找一個合適的目錄，打開 cmd 或者 powshell，鍵入如下命令，創(chuàng)建名為 bimface-demo 的項目
vue create bimface-demo
接下來，就是一系列選擇了，通過截圖的方式演示
通過上下箭頭選擇 Manually select features ，表示不適用默認配置，而是要自己配置 vue 項目，然后敲擊回車
下面詢問，是否將上面的選擇保存為模板，下次創(chuàng)建 vue 項目時可以直接使用次模板，我們這里輸入 n，然后回車，等待創(chuàng)建項目完成
3.1 運行項目
首先運行一下項目，看看項目創(chuàng)建的是否成功
使用 vs cde（建議使用 vs code，而不是 webstorm 等） 打開剛剛創(chuàng)建的項目 bimface-demo
打開方式是，在 vs cde 的菜單欄，選擇文件->打開文件夾，然后選擇 bimface-demo 文件夾，然后點擊 選擇文件夾 即可
打開之后，在編輯器左側“資源管理器”中，右鍵單擊空白處，選擇“在繼承終端中打開”，或者使用快捷鍵 ctrl+`(就是 TAB 鍵上面的那個鍵)，也可以在編輯器中打開終端，這是一個類似于 cmd 的命令行工具，我們可以在這里鍵入一些命令，而不用專門開啟 cmd 或者 Powshell
在終端中鍵入如下命令，然后回車，啟動服務
npm run serve
當出現(xiàn)如下界面，表示啟動成功
3.2 引入 bimface 文件
上面都是一些準備工作，下面開始真正的編寫代碼
因為 廣聯(lián)達 沒有提供 bimface 的相關包，如 BimfaceSDKLoader，所以無法通過 npm 的方式在 vue 項目中安裝 BimfaceSDKLoader，所以只能通過傳統(tǒng)方式引入了
在項目目錄中，找到 public 目錄中的 index.html，打開
將 demo 中引入的幾個 css 和 js 文件，在這里引入，別忘了保存文件
4. 實現(xiàn)頁面渲染
首先在項目根目錄下，找到 .eslintrc.js 文件，打開，將標紅的文件注釋，目的是取消 ESLint 對代碼的檢查，減少很多麻煩
然后在項目根目錄的 src 目錄下找到 App.vue 文件，打開，在這個頁面中編寫代碼，渲染 bimface 模型
4.1 修改 html
將 demo 中的項目代碼，復制到 vue 文件中的 template 模板中
<template>
<div id="app">
<section class="wrap">
<section class="viewer-box">
<div class="viewer-2d" id="viewer2d"></div>
<div class="viewer-3d" id="viewer3d"></div>
</section>
</section>
</div>
</template>
4.2 修改 CSS
將文件中 style 標簽中的代碼全部刪除
4.3 修改 JS
將 demo 中的 js 代碼，修改后拷貝到 script 標簽中
加入 data 函數(shù)，存儲組件中需要的數(shù)據(jù)
添加 mounted 方法，將如下代碼加進來
注意在合適的位置添加 this 關鍵字，用以表示當前組件
mounted() {
let options = new BimfaceSDKLoaderConfig();
options.viewToken = this.viewToken;
BimfaceSDKLoader.load(options, this.successCallback, this.failureCallback);
},
在 methods 中添加兩個自定義方法 successCallback 和 failureCallback
注意：方法開始的位置，聲明 that 變量用于指代 this，因為在此函數(shù)中，某些情況下， this 不再指代當前 vue 組件
methods:{
successCallback(viewMetaData) {
let that=this
// 獲取DOM元素
let dom3d = document.getElementById('viewer3d');
// 配置參數(shù)
let config = new Glodon.Bimface.Application.WebApplication3DConfig();
config.domElement = dom3d;
config.enableViewhouse = false;
//取消工具條
config.Toolbars = [];
// 創(chuàng)建viewer3D對象
let app = new Glodon.Bimface.Application.WebApplication3D(config);
// 添加模型
app.addView(that.viewToken);
let viewer3D = app.getViewer();
//模型點擊監(jiān)聽事件
app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
componentId = objectData.objectId;
//根據(jù)模型構件ID獲取對應圖紙的構件ID
that.viewerDrawing.toDrawingId(that.componentId, getElementId);
// 定義獲取圖紙對應圖元ID的回調(diào)函數(shù)
function getElementId(elementId) {
if (elementId) {
//如果當前圖紙有對應的模型構件ID，就縮放到對應位置
that.viewerDrawing.zoomToObject(elementId);
that.viewerDrawing.update();
} else {
//如果當前圖紙沒有對應的模型構件ID，需進一步判斷是否有包含該構件的圖紙
viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
function getDrawing(data) {
if (data.length) {
// 取第一張圖紙進行二三維聯(lián)動
let drawingId = data[0].viewInfo.id;
that.viewerDrawing.destroy();
that.viewerDrawing.load(viewToken, drawingId)
}
}
}
}
}
)
// 監(jiān)聽添加view完成的事件
app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
// 渲染3D模型
app.render();
//自適應屏幕大小
window.onresize = function () {
viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
}
//隱藏右上角viewhouse
//viewer3D.hideViewHouse();
let options2d = new BimfaceSDKLoaderConfig();
options2d.viewToken = that.viewToken;
options2d.viewType = BimfaceViewTypeOption.DrawingView;
BimfaceSDKLoader.load(options2d, successCallback2d, failureCallback2d);
function successCallback2d(viewMetaData) {
let dom2d = document.getElementById('viewer2d');
let config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig();
config2d.domElement = dom2d;
//添加圖紙
that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
let drawingUrl = viewMetaData.drawingUrl;
//如果是單模型的話，只需要傳圖紙id
let _id = 582803;
that.viewerDrawing.load(that.viewToken, _id);
//如果是集成模型的話，需要傳圖紙id和單模型的fileid
// let _id =1287057;
// let _fileid =1628186476905664;
// viewerDrawing.load(viewToken,_id,_fileid);
// 監(jiān)聽圖紙加載完成的事件
that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
function zoomToElement() {
if (that.componentId) {
that.viewerDrawing.toDrawingId(that.componentId, function (elementId) {
//縮放到對應位置
that.viewerDrawing.zoomToObject(elementId);
that.viewerDrawing.update();
console.log(elementId);
})
} else {
console.log("!componentId");
}
}
that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged, function (objectData) {
if (objectData.length > 0) {
//根據(jù)圖紙點擊的構件ID獲取對應的模型構件ID
let componentId_2 = that.viewerDrawing.toModelId(objectData[0]);
viewer3D.clearIsolation();
//定位到該構件
viewer3D.setSelectedComponentsById([componentId_2]);
//是否存在構件
let isExist = viewer3D.getViewer().getComponentInfoByUserId(componentId_2);
if (isExist) {
viewer3D.zoomToSelectedComponents();
} else {
viewer3D.render();
}
}
})
}
function failureCallback2d(error) {
console.log(error);
}
})
},
failureCallback(error) {
console.log(error);
}
}
到此這篇關于vue 中使用 bimface詳情的文章就介紹到這了,更多相關vue 中使用 bimface內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了如何使用?vue3?指令封裝一個后臺管理系統(tǒng)圖片預覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
目前vite主要默認是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項目一樣會默認使用vue3去構建項目,此時對于一些vue2的老項目就顯得不友好了,下面這篇文章主要給大家介紹了關于vue2老項目vite升級改造的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3-ace-editor如何配置語法問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue使用vuex實現(xiàn)首頁導航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實現(xiàn)首頁導航切換不同路由的方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue項目本地沒有問題但部署到服務器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題，但是部署到服務器上的時候提示訪問資源的錯誤，遇到這樣的問題如何解決呢？下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務器上提示錯誤的解決方法，感興趣的朋友一起看看吧2023-05-05
這篇文章主要介紹了vue中使用mockjs配置和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
本文通過三種方式給大家介紹了vue 查看dist文件里的結構,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了一份超級詳細的Vue-cli3.0使用教程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了詳解Vuex管理登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11