Details zur Verwendung von Bimface in Vue

npm install -g @vue/cli

 vue erstellt Bimface-Demo

npm ausführen dienen
 

<Vorlage>
  <div id="app">
    <Abschnittsklasse="wrap">
      <Abschnitt Klasse="Viewer-Box">
        <div Klasse="viewer-2d" id="viewer2d"></div>
        <div Klasse="viewer-3d" id="viewer3d"></div>
      </Abschnitt>
    </Abschnitt>
  </div>
</Vorlage>

 montiert() {
    let Optionen = neue BimfaceSDKLoaderConfig();
    Optionen.viewToken = dieses.viewToken;
    BimfaceSDKLoader.load(Optionen, dieser.erfolgreicheRückruf, dieser.fehlerhafteRückruf);
  },

Methoden:{
     Erfolgsrückruf(MetaData anzeigen) {
       lass das = dies
      //DOM-Element abrufen let dom3d = document.getElementById('viewer3d');
      //Konfigurationsparameter let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      config.domElement = dom3d;
      config.enableViewhouse = falsch;
      //Symbolleiste abbrechen config.Toolbars = [];
      // Viewer3D-Objekt erstellen let app = new Glodon.Bimface.Application.WebApplication3D(config);
      // Modell hinzufügen app.addView(that.viewToken);
      let viewer3D = app.getViewer();
 
      //Modell-Klick-Listener-Ereignis app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        Komponenten-ID = Objektdaten.Objekt-ID;
        // Holen Sie sich die Komponenten-ID der entsprechenden Zeichnung entsprechend der Modellkomponenten-ID
        that.viewerDrawing.toDrawingId(that.componentId, getElementId);
        //Definieren Sie die Rückruffunktion, um die der Zeichenfunktion entsprechende Element-ID abzurufen getElementId(elementId) {
          wenn (Element-ID) {
            //Wenn die aktuelle Zeichnung eine entsprechende Modellkomponenten-ID hat, zoomen Sie auf die entsprechende Position that.viewerDrawing.zoomToObject(elementId);
            dass.viewerDrawing.update();
          } anders {
            //Wenn die aktuelle Zeichnung keine entsprechende Modellkomponenten-ID hat, muss weiter ermittelt werden, ob eine Zeichnung vorhanden ist, die die Komponente enthält viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            Funktion getDrawing(Daten) {
              if (Datenlänge) {
                // Nehmen Sie die erste Zeichnung für die 2D- und 3D-Verknüpfung let drawingId = data[0].viewInfo.id;
                dass.viewerDrawing.destroy();
                dass.viewerDrawing.load(viewToken, drawingId)
              }
            }
          }
        }
      }
      )
 
      // Auf das Ereignis „Hinzufügen der Ansicht abgeschlossen“ warten app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        // 3D-Modell rendern app.render();
        //Adaptive Bildschirmgröße window.onresize = function () {
          viewer3D.resize(Dokument.documentElement.Clientbreite, Dokument.documentElement.Clienthöhe – 40)
        }
        //Verstecke das obere rechte Viewhouse
        //viewer3D.hideViewHouse();
        let options2d = neue BimfaceSDKLoaderConfig();
        options2d.viewToken = das.viewToken;
        options2d.viewType = BimfaceViewTypeOption.DrawingView;
        BimfaceSDKLoader.load(Optionen2d, Rückruferfolg2d, Rückruffehler2d);
        Funktion successCallback2d(viewMetaData) {
          let dom2d = document.getElementById('viewer2d');
          config2d = neues Glodon.Bimface.Viewer.ViewerDrawingConfig();
          config2d.domElement = dom2d;
          //Zeichnung hinzufügen that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
          Verwenden Sie diese Option, um Zeichnungs-Url zu synchronisieren.
          //Wenn es ein einzelnes Modell ist, übergeben Sie einfach die Zeichnungs-ID
          lass _id = 582803;
          das.viewerDrawing.load(das.viewToken, _id);
 
          //Wenn es sich um ein integriertes Modell handelt, müssen Sie die Zeichnungs-ID und die Datei-ID des Einzelmodells übergeben
          // lass _id =1287057;
          // lass _fileid =1628186476905664;
          // viewerDrawing.load(viewToken,_id,_fileid);
 
          // Auf das Ereignis zum Abschluss des Ladens der Zeichnung warten that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
 
          Funktion zoomToElement() {
            wenn (diese.Komponenten-ID) {
              that.viewerDrawing.toDrawingId(that.componentId, Funktion (elementId) {
                //Auf die entsprechende Position zoomen that.viewerDrawing.zoomToObject(elementId);
                dass.viewerDrawing.update();
                Konsole.log(Element-ID);
              })
            } anders {
              console.log("!Komponenten-ID");
            }
          }
 
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged, Funktion (Objektdaten) {
            wenn (ObjektDatenlänge > 0) {
              // Holen Sie sich die entsprechende Modellkomponenten-ID entsprechend der in der Zeichnung angeklickten Komponenten-ID
              : Wenn Sie componentId_2 als .viewerDrawing.toModelId(objectData[0]) definieren, müssen Sie die Komponenten-ID des Objekts angeben.
              viewer3D.clearIsolation();
              //Suchen Sie die Komponente viewer3D.setSelectedComponentsById([componentId_2]);
              //Ob eine Komponente vorhanden ist let isExist = viewer3D.getViewer().getComponentInfoByUserId(componentId_2);
              wenn (ist vorhanden) {
                viewer3D.zoomToSelectedComponents();
              } anders {
                viewer3D.render();
              }
            }
          })
        }
        Funktion failureCallback2d(Fehler) {
          konsole.log(Fehler);
        }
      })
    },
    Fehlerrückruf(Fehler) {
      konsole.log(Fehler);
    }
  }