vue中怎樣使用bimface

本篇文章給大家分享的是有關vue中怎樣使用bimface，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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 項目，然后敲擊回車

下面使用默認選擇即可，然后敲擊回車

下面選擇 vue2 版本，然后回車

 下面選擇代碼檢查工具 Eslint 的配置，通過上下箭頭選擇第3項，然后回車（后面禁用 ESlint 代碼檢查，如果不是專業(yè)前端，就不用配置這個了）

 下面選擇第1項目，表示保存代碼時，會對代碼進行檢查（因為后面我們會禁用 ESlint，所以這里無所謂了），然后回車

 下面選擇使用默認配置(使用單獨的配置文件，而不是將所有配置都寫到一個文件中)，然后回車

 下面詢問，是否將上面的選擇保存為模板，下次創(chuàng)建 vue 項目時可以直接使用次模板，我們這里輸入 n，然后回車，等待創(chuàng)建項目完成

 經(jīng)過一段時間等待，看到大概如下的界面，就證明項目創(chuàng)建成功了

3. 引入 bimface 文件

3.1 運行項目

首先運行一下項目，看看項目創(chuàng)建的是否成功

使用 vs cde（建議使用 vs code，而不是 webstorm 等） 打開剛剛創(chuàng)建的項目 bimface-demo

打開方式是，在 vs cde 的菜單欄，選擇文件->打開文件夾，然后選擇  bimface-demo 文件夾，然后點擊 選擇文件夾 即可

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

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

npm run serve

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

 此時在，瀏覽器中，輸入上面標紅的地址，出現(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，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。