Vue での bimface の使用に関する詳細

npm インストール -g @vue/cli

 vue 作成 bimface デモ

npm 実行サーブ
 

<テンプレート>
  <div id="アプリ">
    <セクションクラス="wrap">
      <セクション class="ビューアボックス">
        <div class="viewer-2d" id="viewer2d"></div>
        <div class="viewer-3d" id="viewer3d"></div>
      </セクション>
    </セクション>
  </div>
</テンプレート>

 マウント() {
    オプションを新しいBimfaceSDKLoaderConfig()に追加します。
    オプションのviewToken = this.viewToken;
    BimfaceSDKLoader.load(オプション、this.successCallback、this.failureCallback);
  },

方法:{
     成功コールバック(viewMetaData) {
       それを=これとする
      // DOM要素を取得します。let dom3d = document.getElementById('viewer3d');
      // 構成パラメータ let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      DOM要素をDOM3Dに設定します。
      config.enableViewhouse = false;
      //ツールバーをキャンセルします config.Toolbars = [];
      // viewer3D オブジェクトを作成します。let app = new Glodon.Bimface.Application.WebApplication3D(config);
      // モデルを追加します app.addView(that.viewToken);
      viewer3D を app.getViewer() に設定します。
 
      //モデルクリックリスナーイベント app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        コンポーネントID = オブジェクトデータ.オブジェクトID;
        //モデルコンポーネントIDに従って対応する図面のコンポーネントIDを取得します
        that.viewerDrawing.toDrawingId(that.componentId、getElementId);
        // 描画関数に対応する要素IDを取得するためのコールバック関数を定義します。getElementId(elementId) {
          if (要素ID) {
            //現在の図面に対応するモデル コンポーネント ID がある場合は、対応する位置にズームします that.viewerDrawing.zoomToObject(elementId);
            that.viewerDrawing.update();
          } それ以外 {
            //現在の図面に対応するモデル コンポーネント ID がない場合は、コンポーネントを含む図面があるかどうかをさらに判断する必要があります。viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            関数 getDrawing(データ) {
              if (データの長さ) {
                // 2D と 3D のリンクの最初の図面を取得します。let drawingId = data[0].viewInfo.id;
                that.viewerDrawing.destroy();
                that.viewerDrawing.load(ビュートークン、描画ID)
              }
            }
          }
        }
      }
      ）
 
      // ビューの追加が完了したイベントをリッスンします。app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        // 3D モデルをレンダリングします app.render();
        //適応型画面サイズ window.onresize = function () {
          viewer3D.resize(document.documentElement.clientWidth、document.documentElement.clientHeight - 40) をリサイズします。
        }
        //右上隅のビューハウスを非表示にする
        //viewer3D.hideViewHouse();
        options2d = new BimfaceSDKLoaderConfig();
        options2d.viewToken = that.viewToken;
        options2d.viewType = BimfaceViewTypeOption.DrawingView;
        BimfaceSDKLoader.load(options2d、successCallback2d、failureCallback2d);
        関数 successCallback2d(viewMetaData) {
          dom2d = document.getElementById('viewer2d'); とします。
          config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig() を追加します。
          config2d.domElement = dom2d;
          // 図面を追加します that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
          drawingUrl を viewMetaData.drawingUrl とします。
          //単一のモデルの場合は、図面IDを渡すだけです
          _id = 582803 とします。
          that.viewerDrawing.load(that.viewToken, _id);
 
          //統合モデルの場合は、図面IDと単一モデルのファイルIDを渡す必要があります
          // _id =1287057 とします。
          // _fileid =1628186476905664 とします。
          // viewerDrawing.load(viewToken,_id,_fileid);
 
          // 図面の読み込み完了イベントをリッスンします。that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
 
          関数 zoomToElement() {
            if (その.componentId) {
              that.viewerDrawing.toDrawingId(that.componentId, 関数(要素Id) {
                //対応する位置にズームします that.viewerDrawing.zoomToObject(elementId);
                that.viewerDrawing.update();
                console.log(要素ID);
              })
            } それ以外 {
              console.log("!コンポーネントID");
            }
          }
 
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged、関数(objectData) {
            オブジェクトデータの長さが0より大きい場合
              //図面上でクリックされたコンポーネントIDに応じて対応するモデルコンポーネントIDを取得します
              componentId_2 を that.viewerDrawing.toModelId(objectData[0]) とします。
              ビューア3D.clearIsolation();
              //componentviewer3D.setSelectedComponentsById([componentId_2]); を見つけます。
              //コンポーネントがあるかどうか let isExist = viewer3D.getViewer().getComponentInfoByUserId(componentId_2);
              存在する場合
                ビューア3D.選択されたコンポーネントにズームします();
              } それ以外 {
                ビューア3D.レンダリング();
              }
            }
          })
        }
        関数 failureCallback2d(エラー) {
          コンソール.log(エラー);
        }
      })
    },
    失敗コールバック(エラー) {
      コンソール.log(エラー);
    }
  }