npm install -g @vue/cli

 vue create bimface-demo

npm run serve
 

<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>

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

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();
 
      //模型點(diǎn)擊監(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，需進(jìn)一步判斷是否有包含該構(gòu)件的圖紙
            viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            function getDrawing(data) {
              if (data.length) {
                // 取第一張圖紙進(jìn)行二三維聯(lián)動(dòng)
                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ù)圖紙點(diǎn)擊的構(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);
    }
  }