快捷導(dǎo)航

vue?中使用?bimface詳情

更新時間：2022年01月25日 14:11:38 作者：加菲貓的狗

這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項目、引入?bimface?響應(yīng)的文件、修改?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 文件夾，然后點擊選擇文件夾即可

打開之后，在編輯器左側(cè)“資源管理器”中，右鍵單擊空白處，選擇“在繼承終端中打開”，或者使用快捷鍵 ctrl+`(就是 TAB 鍵上面的那個鍵)，也可以在編輯器中打開終端，這是一個類似于 cmd 的命令行工具，我們可以在這里鍵入一些命令，而不用專門開啟 cmd 或者 Powshell

在終端中鍵入如下命令，然后回車，啟動服務(wù)

npm run serve

當(dāng)出現(xiàn)如下界面，表示啟動成功

3.2 引入 bimface 文件

上面都是一些準備工作，下面開始真正的編寫代碼

因為廣聯(lián)達沒有提供 bimface 的相關(guān)包，如 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 中的項目代碼，復(fù)制到 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 關(guān)鍵字，用以表示當(dāng)前組件

 mounted() {
    let options = new BimfaceSDKLoaderConfig();
    options.viewToken = this.viewToken;
    BimfaceSDKLoader.load(options, this.successCallback, this.failureCallback);
  },

在 methods 中添加兩個自定義方法 successCallback 和 failureCallback

注意：方法開始的位置，聲明 that 變量用于指代 this，因為在此函數(shù)中，某些情況下， this 不再指代當(dāng)前 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ù)模型構(gòu)件ID獲取對應(yīng)圖紙的構(gòu)件ID
        that.viewerDrawing.toDrawingId(that.componentId, getElementId);
        // 定義獲取圖紙對應(yīng)圖元ID的回調(diào)函數(shù)
        function getElementId(elementId) {
          if (elementId) {
            //如果當(dāng)前圖紙有對應(yīng)的模型構(gòu)件ID，就縮放到對應(yīng)位置
            that.viewerDrawing.zoomToObject(elementId);
            that.viewerDrawing.update();
          } else {
            //如果當(dāng)前圖紙沒有對應(yīng)的模型構(gòu)件ID，需進一步判斷是否有包含該構(gòu)件的圖紙
            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();
        //自適應(yīng)屏幕大小
        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) {
                //縮放到對應(yīng)位置
                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ù)圖紙點擊的構(gòu)件ID獲取對應(yīng)的模型構(gòu)件ID
              let componentId_2 = that.viewerDrawing.toModelId(objectData[0]);
              viewer3D.clearIsolation();
              //定位到該構(gòu)件
              viewer3D.setSelectedComponentsById([componentId_2]);
              //是否存在構(gòu)件
              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);
    }
  }

到此這篇關(guān)于vue 中使用 bimface詳情的文章就介紹到這了,更多相關(guān)vue 中使用 bimface內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！