BIMFACE二次開發系列49 Web網頁中加載模型

BIMFACE二次開發系列49 Web網頁中加載模型與圖紙的技術方案

我的BIMFACE二次系列博客中詳細介紹了服務器端API的調用方式以及示例程序，大家可以自行閱讀。

從本篇博客開始，主要介紹BIMFACE與不同類型的業務系統進行集成開發應用的技術方案。主要包含

Web網頁集成BIMFACE應用的技術方案
CS客戶端集成BIMFACE應用的技術方案
移動App/小程序/公眾號集成BIMFACE應用的技術方案

本篇主要介紹Web網頁集成BIMFACE應用的技術方案。

由于BIMFACE前端使用了 HTML5、CSS3、WebGL等較新的網頁技術，所以下面也就是圍繞 HTML、CSS、JS 等技術做擴展介紹。

網頁編程技術

1、樣式框架（控件庫）

前端樣式框架有幾十上百種，這里列出幾個主流、大家比較常見常用的樣式框架。

Bootstrap

Bootstrap是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 JavaScript 插件。基于 Bootstrap 提供的強大功能，能夠讓你快速設計并自定義你的響應式網站、手機APP等。 Bootstrap框架中的腳本庫是基于jQuery構建的。

Layui

LayUI是一款采用自身模塊規范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，內在飽滿，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節都經過精心雕琢，非常適合界面的快速開發。 layui 首個版本發布于 2016 年秋天，它區別于那些基于 MVVM 底層的 UI 框架，它更多是為后端程序員量身定做，開發者不需要涉足各種前端工具的復雜配置，只需面對瀏覽器本身，一切所需要的元素與交互，Layui都完成了封裝。 Layui框架中的腳本庫是基于jQuery構建的。 Layui 兼容目前市場上正在使用的全部瀏覽器（IE6/7除外），可作為 PC 端后臺系統與前臺界面的速成開發方案。我們公司內部的業務系統也用了Layui框架，大家也可以嘗試著用用。

Element UI

它是餓了么團隊出品的優秀組件庫。 Element 是一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫。

iView

一套基于 Vue.js 的高質量 UI 組件庫。包含

（1）iView Pro 以 View UI（iView）為基礎，擴展了 30+ 全新的組件，除了基礎組件外，還包含了業務組件，比如頁頭組件、城市選擇器組件、登錄組件、通知菜單組件等。 View UI Pro 最大化地減輕開發者工作量，并極大程度地支持響應式設計，對移動端和平板電腦都有更好的支持。

（2）iView Admin Pro Admin Pro 是一套企業級的通用型中后臺前端解決方案，它基于 View UI（iView），并內置了 View UI Pro。支持多種布局，動態菜單，強大的鑒權系統，含有大量典型的業務示例，如用戶管理、菜單權限管理、角色權限管理等。 Admin Pro 由 iView 作者研發，使用最前沿的前端技術棧，支持各類型產品，比如典型的中后臺應用（類阿里云后臺、七牛云后臺，各類 to B 產品）、社區型應用（類知乎、論壇、門戶）（需使用社交布局）、地圖型應用（需使用地圖布局）、工作桌面型應用（需使用工作桌面布局）等。 iView官方還對微信小程序專門封裝了一套高質量的UI組件庫，叫 iView Weapp。 iView 與 iView Weapp 校本庫都是基于Vue.js封裝的。 iView 與 iView 與 iView Weapp 兩款組件實現并適配了PC端、移動端、小程序等常用場景，這里我比較推薦它。大家可以嘗試用用。

2、腳本庫

學習網頁編程，最開始接觸的就是JavaScript，它是輕量級，解釋型或即時編譯型的編程語言。

JavaScript通常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。
JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

JavaScript

提供的功能非常強大，但是學習起來很困難，一般都會有雜而亂的感覺。
主要有以下原因：

JavaScript本身知識很抽象難懂，比如：閉包、內置對象、DOM。
JavaScript本身內容很多，如函數庫、對象庫非常多。
JavaScript混合了多種編程思想。既有面向過程編程思想，又有面向對象編程思想。
不通的瀏覽器對JavaScript支持也不同。為了適配不同的瀏覽器需要做非常多的代碼進行特殊處理。
沒有好的編輯器，編寫代碼全靠大腦來記憶。
JavaScript運行在網頁里面，如果發生錯誤，不太好調試。
其他原因。

jQuery

2006年1月就出現了jQuery，它是一個 JavaScript 庫，極大地簡化了 JavaScript 編程。官方API功能強大，文檔齊全、使用示例也很多，適配絕大多數主流瀏覽器，非常受歡迎，因此出現了非常多的基于jQuery封裝的免費插件，非常好用。到目前為止，jQuery依然有非常多的開發者在使用它。

Angular

誕生于2009年，由 Misko Hevery（米斯科·赫維）等人創建，后為Google所收購，由Google維護。
AngularJS嘗試去補足HTML本身在構建應用方面的缺陷。

AngularJS通過使用我們稱為指令(directives)的結構，讓瀏覽器能夠識別新的語法。例如：

使用雙大括號{{}}語法進行數據綁定
使用DOM控制結構來實現迭代或者隱藏DOM片段
支持表單和表單的驗證
能將邏輯代碼關聯到相關的DOM元素上
能將HTML分組成可重用的組件

React

FaceBook 公司于2013年5月開源的 JavaScript MVC 框架。由于 React 的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用。主要用于構建UI。可以在React里傳遞多種類型的參數，如聲明代碼，幫助你渲染出UI、也可以是靜態的HTML DOM元素、也可以傳遞動態變量、甚至是可交互的應用組件。

Vue.js

作者尤雨溪，中國人。在谷歌工作，工作過程中受到Angular的啟發，從中提取自己所喜歡的部分，開發出了一款輕量框架。

2014年1月，正式對外發布了Vue.Js第一個版本。

Vue.js是一套構建用戶界面的漸進式框架。只關注視圖層，采用自底向上增量開發的設計。它目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

Vue 學習起來非常簡單，目前國內很多大廠都在使用它。

TypeScript

微軟公司在2015年12月推出了TypeScript。它是 JavaScript類型的超集，它給 JavaScript 添加了語言特性擴展。增加的功能包括：

類型批注和編譯時類型檢查
類型推斷、類型擦除
接口、枚舉
泛型編程、命名空間
元組、Await異步編程

TypeScript可以編譯成純JavaScript，可以運行在任何瀏覽器、任何計算機和任何操作系統上，并且是免費開源的。上面的AngularJS、Vue.js 的最新版本中底層都是用 TypeScript 重寫的，足以看出TypeScript是多么的受歡迎。

Ajax技術

AJAX=Asynchronous JavaScript And XML（異步的 JavaScript 和 XML）

通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。

1、工作原理

2、創建 XMLHttpRequest 對象

3、向服務器發送請求

4、服務器響應

5、XMLHttpRequest 對象屬性

6、onreadystatechange 事件

jQuery AJAX

原始的Ajax使用較麻煩，jQuery Ajax是目前應用的首選，其內部實現原理是基于XMLHttpRequest對象封裝了一些常用易用的方法。

建議

小團隊使用 jQuery
大團隊有專業前端開發工程師，使用Vue.js

《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用：https://gitee.com/NAlps/BIMFace.SDK

#俄羅斯因疫情全國放假9天#

前一篇博客《C#開發BIMFACE系列49 Web網頁集成BIMFACE應用的技術方案》中介紹了目前市場主流的Web開發技術與應用框架，其中前端腳本的應用在國內分2大派系 jQuery 與 Vue.js。

本篇博客主要介紹Web網頁中使用jQuery加載模型與圖紙以及其他的應用開發。

步驟1：下載并引用 jQuery.js

jQuery 官方目前發布的版本已經到3.X

但是jQuery從2.0開始不兼容IE8，最低支持IE9。而IE8在國內還是有很多使用者，業務系統的開發也就需要兼容IE8，所以可以采用下面的兼容性寫法

1 <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
2 <!--[if IE 8]>
3 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
4 <![endif]-->

第一行可以引用2.0及以上版本的jQuery.js
第2-4行通過判斷IE瀏覽器的版本來加載對應版本的jQuery.js。常用的有1.8.x與1.9.x版本。

使用語句 僅IE8可識別，在IE8模式下進行一些兼容操作。這樣在切換到IE8時，低版本的jQuery就會覆蓋高版本的jQuery。如果在IE8下需要調整某些元素的樣式的話，最好將JS代碼放在頁面底部（并注意是否有行內樣式），不然為某些動態加載的內容設置的樣式可能不會生效。

但是BIMFACE模型或圖紙在網頁中渲染時使用了HTML5、CSS3、WebGL等新技術，對瀏覽器版本要求比較高，在IE兼容模式下無法正常加載運行。所以在網頁中使用jQuery1.8以上版本都可以，但是不要在兼容性視圖下瀏覽模型或圖紙。

步驟2：下載并引用 BIMFace JSSDK

下載地址：https://bimface.com/developer-guide/984

下載的文件是一個壓縮包，解壓后目錄結構如下：

另外2個目錄是用于離線數據包功能，這里只需要把BimfaceSDKLoader@latest-release.js文件拷貝到項目中即可，建議增加文件版本號，修改為BimfaceSDKLoader@latest-release-3.6.159.js。有如下兩種引用方式，選擇任一種都可以。

方式1：引用本地文件

方式2：引用BIMFACE官方在線文件。優點：一直保持最新版本。

步驟3：根據 FileId 獲取 ViewToken

查看BIMFACE需要使用ViewToken，ViewToken 代表對單個模型/集成模型/模型對比的訪問權限。首先根據 FileId 調用接口獲取AccessToken，通過AccessToken調用接口獲取ViewToken。

Web.aspx、Web.html、Web.cshtml 中使用ajax調用一般處理程序或者MVC控制器是最常用的方法

// 加載模型或圖紙
function loadBIMFile(bimFaceFileId) {
    $("#bimContainer").empty();//清空容器內容。解決切換不同圖紙時會保留上一次圖紙內容的問題。

    $.ajax({
        url: "../Handlers/GetViewTokenHandler.ashx",
        data: { fileId: bimFaceFileId },
        dataType: "json",
        type: "GET",
        async: false, //同步（此處設置為同步或者異步都可以）
        success: function (data) {
            if (data.code==true) {
                showBIMModel(data.viewToken);// 加載BIMFACE模型
            } else {
                alert("【警告】\r\n" + data.message);
            }
        },
        error: function (e) {
            console.log('GetViewTokenHandler.ashx請求發生異常：' + e);
            alert("【異常】\r\n" + '獲取ViewToken發生異常');
        },
        complete: function (XMLHttpRequest, status) {

        }
    });
}

一般處理程序

using System;
using System.Configuration;
using System.Text;
using System.Web;

using BIMFace.SDK.CSharp.API;
using BIMFace.SDK.CSharp.Common.Extensions;
using BIMFace.SDK.CSharp.Common.Log;

namespace BIMFace.SDK.CSharp.Sample.Handlers
{
    /// <summary>
    /// GetViewTokenHandler 的摘要說明
    /// </summary>
    public class GetViewTokenHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentEncoding=Encoding.UTF8;

            string bimfaceAppKey=ConfigurationManager.AppSettings["BIMFACE_AppKey"];
            string bimfaceAppSecret=ConfigurationManager.AppSettings["BIMFACE_AppSecret"];
            if (bimfaceAppKey.IsNullOrWhiteSpace())
            {
                LogUtility.Error("web.config 中未配置 BIMFACE_AppKey。");
            }
            if (bimfaceAppSecret.IsNullOrWhiteSpace())
            {
                LogUtility.Error("web.config 中未配置 BIMFACE_AppSecret。");
            }

            string fileId=context.Request["fileId"];
            IBasicApi basicApi=new BasicApi();
            try
            {
                string accessToken=basicApi.GetAccessToken(bimfaceAppKey, bimfaceAppSecret).Data.Token;
                string viewToken=basicApi.GetViewTokenByFileId(accessToken, fileId.ToLong()).Data;

                var response=new
                {
                    code=true,
                    message="",
                    viewToken=viewToken
                };

                context.Response.Write(response.SerializeToJson());
            }
            catch (Exception ex)
            {
                var response=new
                {
                    code=false,
                    message="獲取模型ViewToken失敗。",
                    viewToken=""
                };

                context.Response.Write(response.SerializeToJson());

                LogUtility.Error("GetViewTokenHandler 產生異常：" + ex);
            }

            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

步驟4：根據ViewToken加載模型或者圖紙

主要使用了JSSDK中的BimfaceSDKLoaderConfig類與BimfaceSDKLoader對象，所有邏輯代碼如下

 // 顯示BIMFACE模型
 function showBIMModel(viewToken) {
     var loaderConfig=new BimfaceSDKLoaderConfig(); // 設置BIMFACE JSSDK加載器的配置信息
     loaderConfig.viewToken=viewToken;
     BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);  // 加載BIMFACE JSSDK加載器
 }

加載成功的回調函數

// 加載成功回調函數
function successCallback(viewMetaData) {
    /* modelViewer 是全局對象，它與具體的圖紙或者模型一一對應。如果切換了圖紙/模型，則需要將其重置，然后在后續操作中再創建。*/
    modelViewer={
        toolbar: undefined,  // 工具條
        annotationmanager: undefined,  // annotation的繪制管理器
        annotationToolbar: undefined,
        annotationControl: undefined   // 重寫annotation的保存、取消
    };

    var dom4Show=document.getElementById('bimContainer'); // 獲取DOM元素

    if (viewMetaData.viewType=="3DView") {
        var webAppConfig=new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.domElement=dom4Show;

        app=new Glodon.Bimface.Application.WebApplication3D(webAppConfig); // 創建WebApplication
        app.addView(viewMetaData.viewToken);//temp_ViewToken   // 添加待顯示的模型

        viewer3D=app.getViewer();  // 從WebApplication獲取viewer3D對象

        // 監聽添加view完成的事件
        viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
            // 調用viewer3D對象的Method，可以繼續擴展功能
            modelViewer.toolbar=$(dom4Show).find('.bf-toolbar-bottom');

            //自適應屏幕大小
            window.onresize=function () {
                viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
            }
        });


    }
    else if (viewMetaData.viewType=="drawingView") {

        var webAppConfig=new Glodon.Bimface.Application.WebApplicationDrawingConfig();
        webAppConfig.domElement=dom4Show;
        webAppConfig.viewToken=viewMetaData.viewToken;

        app=new Glodon.Bimface.Application.WebApplicationDrawing(webAppConfig); // 創建WebApplication
        app.load(viewMetaData.viewToken);//viewToken  // 添加待顯示的模型

        viewer2D=app.getViewer();// 從WebApplication獲取viewerDrawing對象

        drawingViewExtend(viewer2D);    // 監聽添加view完成的事件
    }
}

加載失敗的回調函數

 // 加載失敗回調函數
 function failureCallback(error) {
     console.log(error);
 }

加載二維圖紙的擴展方法

// 矢量dwg擴展功能
function drawingViewExtend(viewer2D) {
    var viewerEvents=Glodon.Bimface.Viewer.ViewerDrawingEvent;

    // 注冊 ComponentsSelectionChanged ViewerDrawing圖元點擊選中事件
    viewer2D.addEventListener(viewerEvents.ComponentsSelectionChanged, function () {
        //ToTo 通過圖元ID找到圖框ID
    });

    // 注冊 Loaded ViewerDrawing加載完畢事件
    viewer2D.addEventListener(viewerEvents.Loaded, function () {
        var dom4Show=document.getElementById('bimContainer'); // 獲取DOM元素
        modelViewer.toolbar=$(dom4Show).find('.bf-toolbar-bottom');

        //自適應屏幕大小
        window.onresize=function () {
            viewer2D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
        }
    });
}

關于BIMFACE集成應用開發，官方提供了非常豐富的示例程序，都是Web網頁集成應用，具體參考 https://bimface.com/developer-jsdemo#1023

下一篇《C#開發BIMFACE系列51 Web網頁中使用Vue.js加載模型與圖紙》

《BIMFace.SDK.CSharp》開源SDK。歡迎大家下載使用：https://gitee.com/NAlps/BIMFace.SDK

#人民網評李云迪：琴鍵容不得黃色#

BIM的逆向建模技術之中，利用激光點云掃描儀進行自動建模或人工輔助建模，得到工程模型，這是一種常規的理解。在今天的技術條件限制下，有許多不足之處，多是因為太拘泥于非要一個BIM工程模型所致，本文略舉幾例分析。

典型場景1：砌墻的進度信息采集與勞務費結算

在逆向建模上，即掃描儀采集的原始數據必須經過工程模型軟件，才能送到下一步流程。這個BIM模型環節可能會是導致整個流程效率降低的原因。

設定此砌墻工程是按面積結算的，每天進度不一，使用三維激光點云掃描儀采集數據，BIM團隊負責建模計算其面積，使用Revit建模軟件，連接到算量造價軟件及工程款支付管理系統之中。工程進度是隨時受著各種現場情況的影響，下班時這面墻可能只砌了一半或四分之一，那么是否要在Revit里面建一道1/4高度的墻體？第二天再建一半的墻？（BIM技術是產生于西方國家、反映了業已充分發展的裝配化工藝，而不是中國目前以流體混凝土、鋼筋和散裝砌磚工藝）

參數化建模

當前的BIM設計模型或工程模型是無法滿足這種現場追蹤的需求的，也無法跟隨現場情況而不斷建立模型。這需要逆向建模技術加以補充。

現在最新的人工智能技術已經可以識別并且自動測繪墻體面積，無需人工建立BIM工程模型，即可將工程量的數據送給下一流程——建立在區塊鏈平臺上的交易流程——勞務費直接發放給相應的農民工。

所以，新一代的BIM概念，其模型的范圍不應當僅僅局限于Revit這類工程模型（受制于人工建模的低效率），而要擴展為所有可計算的數據源，包括數據庫、點云和影像。

典型場景2：竣工模型及弱電對象的三維表達

竣工模型要使用最高等級的建模標準，意味著模型的尺寸最大、數據量最大，也即成本最高。但是目前的建模軟件技術尚無法完全滿足這種需求，尤其是在中國，幾乎沒有小房子，都是大樓、大型基礎設施項目。

尤其是弱電系統的對象的模型表達技術，更加難解。弱電系統的小小的對象很多，傳感器、攝像頭、插座的數量動輒成千上萬，線纜纖細、接頭無數。其實強電系統的線纜早已普遍使用橋架代替，略去線纜建模的技術問題。弱電系統幾無可建模之對象。

NavVis視覺點云應用

就算是解決了建模的問題，這些竣工模型之中的三維對象是否能派的上用場的問題就更不用說了。在這種格局下，耗費大量成本去創建工程模型根本就不是一個方向。這需要替代的解決方案，目前所見，最佳方法是視覺點云技術。

NavVis視覺點云

視覺點云的成果發布到瀏覽器中，令普通的技術人員就可以簡便操作（消費級界面），添加興趣點（POI）來表達各種對象的屬性信息、圖片和各類附件，甚至于讀取傳感器數據或攝像頭視頻直接顯示在頁面上。

另外，在表達線路的邏輯關系上，還有一種看起來很傳統的方法：

ARCHIBUS系統中表達弱電邏輯關系

不過這種操作是置于網頁界面上，使用HTML5技術作圖，并且可以使用Excel數據表進行參數化驅動（相當于自動制圖）。注意，底圖是使用BIM模型自動生成的平面圖，在導入到網頁之后，再輔以二維線條表達邏輯關系。

這種表達方法頗似機電專業的系統圖，是一種與抽象的表達方法。雖然相比于BIM工程模型來說，既不三維、也不具象，但簡單有效，是非常現實的解決對策。

再說，論具象，工程模型無論多么逼真，也無法達到現場實景照片那種程度。

在線咨詢

上一篇：JavaScript 算法每日一題：匯總區間
下一篇：過年打麻將，只要掌握這點概率學原理，你能多胡好幾盤

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

BIMFACE二次開發系列49 Web網頁中加載模型

您的項目需求