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

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

全体のプロセスは次のステップに分かれています。

  • 1. vueスキャフォールディングをインストールする
  • 2. プロジェクトを作成する
  • 3. bimfaceレスポンスファイルをインポートする
  • 4. App.vueファイルを修正してページレンダリングを実現する

1. Vue スキャフォールディングをインストールする

ここではVue CLIがまだ使用されています

次のコマンドを使用して、vue scaffoldingツールをグローバルにインストールします。

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


インストール後、 nrmをインストールしてミラーソースを切り替えるか、次のステップに直接進むことができます。

2. プロジェクトを作成する

適切なディレクトリを見つけて、cmdまたはpowshellを開き、次のコマンドを入力してbimface-demoという名前のプロジェクトを作成します。

 vue 作成 bimface デモ


次に、スクリーンショットで示される一連の選択肢があります

上矢印と下矢印を使用してManually select featuresを選択します。これは、デフォルトの構成が適用できないことを意味します。代わりに、Vue プロジェクトを自分で構成し、Enter キーを押す必要があります。

次に、上記の選択内容をテンプレートとして保存するかどうかを尋ねられます。次回 Vue プロジェクトを作成するときに、このテンプレートを直接使用できます。ここで n と入力して Enter キーを押すと、プロジェクトが作成されるまで待機できます。

3.1 プロジェクトを実行する

まずプロジェクトを実行して、プロジェクトが正常に作成されたかどうかを確認します。

vs cde (webstormなどではなくvs codeが推奨)を使用して、新しく作成されたプロジェクトbimface-demoを開きます。

これを開くには、vs cde のメニュー バーで [ファイル] -> [フォルダーを開く] を選択し、 bimface-demoフォルダーを選択して [フォルダーの選択] をクリックします。

開いたら、エディターの左側にある「エクスプローラー」で、空白部分を右クリックして「継承されたターミナルで開く」を選択するか、ショートカットキー ctrl+` (TAB キーの上にあるキー) を使用してエディターでターミナルを開きます。これは、cmd に似たコマンドラインツールです。cmd や Powshell を特に開かなくても、ここでいくつかのコマンドを入力できます。

ターミナルに次のコマンドを入力し、Enterキーを押してサービスを開始します。

npm 実行サーブ
 

次のインターフェースが表示されたら、起動は成功したことを意味します。

3.2 bimfaceファイルのインポート

以上が準備です。それではコードを書き始めましょう。

Glodon はBimfaceSDKLoaderなどのbimfaceの関連パッケージを提供していないため、npm 経由で Vue プロジェクトにBimfaceSDKLoaderインストールすることは不可能であり、従来の方法でのみ導入できます。

プロジェクト ディレクトリで、public ディレクトリ内のindex.html見つけて開きます。

ここでdemoで紹介されているいくつかのCSSとJSファイルをインポートし、ファイルを保存することを忘れないでください。

4. ページレンダリングを実装する

まず、プロジェクトのルートディレクトリにある.eslintrc.jsファイルを見つけて開き、赤でマークされたファイルをコメントアウトして、 ESLintのコードチェックをキャンセルし、多くのトラブルを回避します。

次に、プロジェクトのルートディレクトリのsrcディレクトリにあるApp.vueファイルを見つけて開き、このページにコードを記述して、 bimfaceモデルをレンダリングします。

4.1 HTMLの変更

デモのプロジェクトコードをvueファイルのtemplateにコピーします。

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


4.2 CSSの変更

ファイル内のスタイルタグ内のすべてのコードを削除します

4.3 JSの変更

demoのjsコードを変更し、スクリプトタグにコピーします。

コンポーネントに必要なデータを格納するためのデータ関数を追加する

mountedメソッドを追加し、次のコードを追加します。

現在のコンポーネントを示すために、 this キーワードが適切な場所に追加されることに注意してください。

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


methodsに2つのカスタムメソッドsuccessCallbackfailureCallback追加します。

注:メソッドの先頭で、that 変数は this を参照するように宣言されています。これは、この関数では、場合によっては this が現在の vue コンポーネントを参照しなくなるためです。

方法:{
     成功コールバック(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(エラー);
    }
  }

これで、 vueでのbimfaceの使用に関する詳細についての記事は終了です。vue での bimface の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQLで最大接続数を達成する方法

>>:  Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

推薦する

Linux システムで MySQL データベースにリモート接続する方法のチュートリアル

序文最近、職場でこの要件に遭遇し、リモート接続を確立するのに 1 時間以上かかりました。ローカル コ...

proxy_pass がパス パスに従って転送する場合の "/" 問題の詳細な説明

nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...

進捗バー効果を実現するJavaScript

この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

W3Cチュートリアル(1):W3Cを理解する

1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...

ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法

目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...

CSS フロート(float, clear)の人気の解説と体験談

私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

React Hooks の一般的な使用シナリオ (概要)

目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

vue+tsは要素のマウスドラッグの効果を実現します

この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...

HTMLがHikvisionカメラのリアルタイム監視機能を実現

最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...

VMware 仮想マシンで Linux の IP アドレスを表示する方法

1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...

入力テキストボックスの長さをコンテンツに応じて変更する方法

初め:コードをコピーコードは次のとおりです。 <input type="text&q...

mysql 8.0.19 win10 クイックインストールチュートリアル

このチュートリアルでは、参考までにMySQL 8.0.19のインストールチュートリアルを共有します。...