全体のプロセスは次のステップに分かれています。
1. Vue スキャフォールディングをインストールするここでは 次のコマンドを使用して、vue scaffoldingツールをグローバルにインストールします。 npm インストール -g @vue/cli インストール後、 2. プロジェクトを作成する適切なディレクトリを見つけて、cmdまたは vue 作成 bimface デモ 次に、スクリーンショットで示される一連の選択肢があります 上矢印と下矢印を使用して 次に、上記の選択内容をテンプレートとして保存するかどうかを尋ねられます。次回 Vue プロジェクトを作成するときに、このテンプレートを直接使用できます。ここで n と入力して Enter キーを押すと、プロジェクトが作成されるまで待機できます。 3.1 プロジェクトを実行するまずプロジェクトを実行して、プロジェクトが正常に作成されたかどうかを確認します。 これを開くには、vs cde のメニュー バーで [ファイル] -> [フォルダーを開く] を選択し、 開いたら、エディターの左側にある「エクスプローラー」で、空白部分を右クリックして「継承されたターミナルで開く」を選択するか、ショートカットキー ctrl+` (TAB キーの上にあるキー) を使用してエディターでターミナルを開きます。これは、cmd に似たコマンドラインツールです。cmd や Powshell を特に開かなくても、ここでいくつかのコマンドを入力できます。 ターミナルに次のコマンドを入力し、Enterキーを押してサービスを開始します。 npm 実行サーブ 次のインターフェースが表示されたら、起動は成功したことを意味します。 3.2 bimfaceファイルのインポート以上が準備です。それではコードを書き始めましょう。 Glodon は プロジェクト ディレクトリで、public ディレクトリ内の ここで 4. ページレンダリングを実装するまず、プロジェクトのルートディレクトリにある 次に、プロジェクトのルートディレクトリのsrcディレクトリにある 4.1 HTMLの変更デモのプロジェクトコードをvueファイルの <テンプレート> <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の変更
コンポーネントに必要なデータを格納するためのデータ関数を追加する
現在のコンポーネントを示すために、 this キーワードが適切な場所に追加されることに注意してください。 マウント() { オプションを新しい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(エラー); } } これで、 |
>>: Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法
序文最近、職場でこの要件に遭遇し、リモート接続を確立するのに 1 時間以上かかりました。ローカル コ...
nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...
この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...
目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...
私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
目次1. ステートフック1. 基本的な使い方2. 更新3. 合併を実現する4. 遅延初期化状態5. ...
Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...
この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...
初め:コードをコピーコードは次のとおりです。 <input type="text&q...
このチュートリアルでは、参考までにMySQL 8.0.19のインストールチュートリアルを共有します。...