Details on using bimface in vue

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
      // Get the DOM element let dom3d = document.getElementById('viewer3d');
      //Configuration parameters let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      config.domElement = dom3d;
      config.enableViewhouse = false;
      //Cancel the toolbar config.Toolbars = [];
      // Create viewer3D object let app = new Glodon.Bimface.Application.WebApplication3D(config);
      // Add model app.addView(that.viewToken);
      let viewer3D = app.getViewer();
 
      //Model click listener event app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        componentId = objectData.objectId;
        //Get the component ID of the corresponding drawing according to the model component ID
        that.viewerDrawing.toDrawingId(that.componentId, getElementId);
        // Define the callback function to get the element ID corresponding to the drawing function getElementId(elementId) {
          if (elementId) {
            //If the current drawing has a corresponding model component ID, zoom to the corresponding position that.viewerDrawing.zoomToObject(elementId);
            that.viewerDrawing.update();
          } else {
            //If the current drawing does not have a corresponding model component ID, it is necessary to further determine whether there is a drawing containing the component viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            function getDrawing(data) {
              if (data.length) {
                // Take the first drawing for 2D and 3D linkage let drawingId = data[0].viewInfo.id;
                that.viewerDrawing.destroy();
                that.viewerDrawing.load(viewToken, drawingId)
              }
            }
          }
        }
      }
      )
 
      // Listen for the event of adding view completed app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        // Render 3D model app.render();
        //Adaptive screen size window.onresize = function () {
          viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
        }
        //Hide the upper right corner 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;
          //Add drawing that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
          let drawingUrl = viewMetaData.drawingUrl;
          //If it is a single model, just pass the drawing ID
          let _id = 582803;
          that.viewerDrawing.load(that.viewToken, _id);
 
          //If it is an integrated model, you need to pass the drawing id and the fileid of the single model
          // let _id =1287057;
          // let _fileid =1628186476905664;
          // viewerDrawing.load(viewToken,_id,_fileid);
 
          // Listen for the drawing loading completion event that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
 
          function zoomToElement() {
            if (that.componentId) {
              that.viewerDrawing.toDrawingId(that.componentId, function (elementId) {
                //Zoom to the corresponding position 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) {
              //Get the corresponding model component ID according to the component ID clicked on the drawing
              let componentId_2 = that.viewerDrawing.toModelId(objectData[0]);
              viewer3D.clearIsolation();
              //Locate the componentviewer3D.setSelectedComponentsById([componentId_2]);
              //Whether there is a component 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);
    }
  }