xBIM 实战01 在浏览器中加载IFC模型文件

系列目录【已更新最新开发文章，点击查看详细】

一、创建Web项目

　　打开VS，新建Web项目，选择 .NET Framework 4.5

选择一个空的项目

新建完成后，项目结构如下：

二、添加webServer访问文件类型

　　由于WexXplorer 加载的是 .wexBIM格式的文件或者文件流，所以需要在Web.config文件中添加如下配置

<system.webServer>

    <security>

      <requestFiltering>

        <requestLimits maxAllowedContentLength="100000000" /><!--100MB-->

      </requestFiltering>

    </security>

    <staticContent>

      <mimeMap fileExtension=".wexbim" mimeType="application/octet-stream" />

    </staticContent>

</system.webServer>

如果将应用程序发布到IIS，则在IIS中添加MIME类型，

扩展名为 .wexbim，类型为 application/octet-stream

三、添加js文件与测试模型文件

　　从xBIM官方提供的地址中下载 XbimWebUI 项目，项目结构如下

将下列目录添加到项目中

四、添加测试页面

添加一个静态页面 001.html，打开文件，添加以下引用

 <script src="Content/Libs/gl-matrix.js"></script>

    <script src="Content/Libs/webgl-utils.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script>

    <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script>

    <script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script>

    <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script>

    <script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script>

    <script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>

xbim-viewer.debug.js 依赖 gl-matrix.js 与 webgl-utils.js 2个文件。其他文件根据功能需要再添加引用即可。

在页面的<body></body>中添加

<canvas id="xBIM-viewer" width="600" height="500"></canvas>

canvas 是HTML5中的新标签元素，使用 JavaScript 在网页上绘制图像。

xbim-viewer.js中封装了 xViewer 对象用于绘制呈现模型文件。

完整的代码如下：

 <!DOCTYPE html>

 <html>

 <head>

     <title>xViewer</title>

     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

     <script src="Content/Libs/gl-matrix.js"></script>

     <script src="Content/Libs/webgl-utils.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script>

     <script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script>

     <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script>

     <script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script>

     <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script>

     <script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script>

     <script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>

     <style>

         html, body {

             height: 100%;

             padding: 0;

             margin: 0;

         }

         canvas {

             display: block;

             border: none;

             margin-left: auto;

             margin-right: auto;

         }

     </style>

 </head>

 <body>

     <div id="msg"></div>

     <canvas id="xBIM-viewer" width="600" height="500"></canvas>

     <script type="text/javascript">

         var check = xViewer.check();

         if (check.noErrors) {

             var viewer = new xViewer("xBIM-viewer");

             viewer.background = [0, 0, 0];//设置模型浏览器的背景色

             viewer.on("error",

                 function (arg) {

                     var container = viewer._canvas.parentNode;

                     if (container) {

                         container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;

                     }

                 });//实时监控异常发生事件

             viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加载模型文件

             viewer.start(); //使用此函数可以启动模型的动画。如果在加载几何图形之前启动动画，它将等待内容呈现。此函数绑定到屏幕的浏览器帧速率，因此如果切换到其他选项卡，它将停止消耗任何资源。

             var cube = new xNavigationCube();

             viewer.addPlugin(cube);// 添加立方体导航

             var home = new xNavigationHome();

             viewer.addPlugin(home);// 添加首页导航

         } else {

             alert("您浏览器版本过低，不支持WebGL技术。请升级浏览器。");

             var msg = document.getElementById("msg");

             for (var i in check.errors) {

                 var error = check.errors[i];

                 msg.innerHTML += "<div style='color: red;'>" + error + "</div>";

             }

         }

     </script>

 </body>

 </html>

在浏览器中加载 IFC模型文件，使用了先进的WebGL技术，所以它无法在旧浏览器中运行，Chrome或Mozzilla，IE11及以上版本和其他支持该技术的应用程序都可以很好地展示出3D模型效果。

var check = xViewer.check(); 用于检查浏览器是否支持WebGL技术，检查结果返回一个错误信息集合check.noErrors。如果有错误，则循环遍历该错误信息并提示给用户。

viewer.load(); 用于加载目标模型文件，必须是wexbim文件的url或表示wexbim文件的二进制流。

viewer.start(); 使用此函数可以启动模型的动画。如果在加载几何图形之前启动动画，它将等待内容呈现。此函数绑定到屏幕的浏览器帧速率，因此如果切换到其他选项卡，它将停止消耗任何资源。

如果从Revit或者其他工具中导出IFC文件，则使用下面的方法转换为.wexbim格斯的文件

 const string fileName = @"rac_advanced_sample_project.ifc";

 using (var model = IfcStore.Open(fileName, null, -))

 {

    var context = new Xbim3DModelContext(model);

    context.CreateContext();

    var wexBimFilename = Path.ChangeExtension(fileName, "wexbim");

    using (var wexBimFile = File.Create(wexBimFilename))

    {

       using (var wexBimBinaryWriter = new BinaryWriter(wexBimFile))

       {

         model.SaveAsWexBim(wexBimBinaryWriter);

         wexBimBinaryWriter.Close();

       }

       wexBimFile.Close();

    }

  }

五、在浏览器中查看

在VS中右键点击该文件，选择“在浏览器中查看”

效果如下

系列目录【已更新最新开发文章，点击查看详细】

xBIM 实战01 在浏览器中加载IFC模型文件的更多相关文章

xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
系列目录 [已更新最新开发文章,点击查看详细] 在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...
解决方案：带格式化文本控件（ RichText）的模板如果在InfoPath的浏览器中加载可能出现 COM 组件的80040154错误
建议大家在微软的组件出现问题时,在GOOGLE上搜索解决方案,一般来说,总有结果: 带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载,可能出现 COM 组件的80 ...
Spring中加载ApplicationContext.xml文件的方式
Spring中加载ApplicationContext.xml文件的方式原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...
VC中加载LIB库文件的三种方法
VC中加载LIB库文件的三种方法在VC中加载LIB文件的三种方法如下: 方法1:LIB文件直接加入到工程文件列表中在VC中打开File View一页,选中工程名,单击鼠标右键,然后选中&quo ...
在C 中加载TorchScript模型
本教程已更新为可与PyTorch 1.2一起使用顾名思义,PyTorch的主要接口是Python编程语言.尽管Python是合适于许多需要动态性和易于迭代的场景,并且是首选的语言,但同样的,在许多 ...
如何让Chrome浏览器可以加载本地XML文件？
Chrome浏览器的安全限制,禁止本地加载XML等外部文件,如何设置让其可以加载呢? 有两种方法,第一种是在本地服务器环境下浏览,采用 http://localhost/ 的方式浏览你的网页和文件,就 ...
机器学习之保存与加载.pickle模型文件
import pickle from sklearn.externals import joblib from sklearn.svm import SVC from sklearn import d ...
Qt3D使用assimp加载常规模型文件
Qt3D使用assimp加载三维模型文件,assimp支持很多常规格式的三维模型格式: 其中支持导入的格式有: 3D 3DS 3MF AC AC3D ACC AMJ ASE ASK B3D BLEND ...
tensorflow c++ API加载.pb模型文件并预测图片
tensorflow python创建模型,训练模型,得到.pb模型文件后,用c++ api进行预测 #include <iostream> #include <map> # ...

随机推荐

EM无法登录，提示ORA-28001: the password has expired (DBD ERROR: OCISessionBegin)
--查看数据库目前的口令期限 sys@TESTDB11>select * from dba_profiles where profile = 'DEFAULT' and resource_nam ...
Redis学习笔记（十一）命令进阶：Connection（连接）
原文链接:http://doc.redisfans.com/connection/index.html auth password 有时候处于安全性考虑,我们可以使用密码来保护redis服务器,每次连 ...
windows下安装ImageMagick扩展
最近项目中需要用到图片的一些特殊处理——比如:根据用户请求生成任意尺寸的图像.经过一些资料的查找,最终选用了php_imagick.利用 ImageMagick,你可以根据web应用程序的需要动态生成 ...
SQL Server 从字符串中提取中文、英文、数字
--[提取中文] IF OBJECT_ID('dbo.fun_getCN') IS NOT NULL DROP FUNCTION dbo.fun_getCN GO create function db ...
VSCode (Code) 技法
本人使用插件推荐 indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow B ...
struts2学习之基础笔记4
拦截器 1.自定义拦截器类,必须继承AbstractInterceptor类(抽象类) 重写public String intercept (ActionInvocation arg0) 2.在Str ...
SQL like查询条件中的通配符处理
1. SQL like对时间查询的处理方法 SQL数据表中有savetime(smalldatetime类型)字段,表中有两条记录,savetime值为:2005-3-8 12:12:00和2005- ...
页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放
初识博客初写博客,先在设置里选了个喜欢的模板第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱 ...
《一个民企CEO的职场阳谋》–读书总结（下）
职场是一个战场,很多人几十年在这里战斗. 职场是一个熔炉,很多人大半生在这里修炼. 如果在办公室里得不到快乐,生活就不会快乐. 如果公司里头感觉不到幸福,人生就不会幸福.(以上四句来自老刘的博客) & ...
Java基础学习总结（56）——学java必知十大学习目标
诞生至今已有20年的Java,现在依然有很多人使用.回顾过去十五年的成果,Java一直是数一数二的.Java已经成为世界范围内应用最为广泛的编程语言之一.那么在学java的时候你知道到底要学什么吗?一 ...

xBIM 实战01 在浏览器中加载IFC模型文件

xBIM 实战01 在浏览器中加载IFC模型文件的更多相关文章

随机推荐

热门专题