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网页中加载模型

您的项目需求