一、创建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模型文件的更多相关文章

  1. xBIM 实战02 在浏览器中加载IFC模型文件并设置特效

    系列目录    [已更新最新开发文章,点击查看详细]  在模型浏览器中加载模型后,可以对模型做一些特殊操作.下图是常用的设置. 都是通过 xbim-viewer.js 中的 API 来设置以达到一定的 ...

  2. 解决方案:带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载可能出现 COM 组件的80040154错误

      建议大家在微软的组件出现问题时,在GOOGLE上搜索解决方案,一般来说,总有结果:  带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载,可能出现 COM 组件的80 ...

  3. Spring中加载ApplicationContext.xml文件的方式

    Spring中加载ApplicationContext.xml文件的方式 原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...

  4. VC中加载LIB库文件的三种方法

    VC中加载LIB库文件的三种方法 在VC中加载LIB文件的三种方法如下: 方法1:LIB文件直接加入到工程文件列表中   在VC中打开File View一页,选中工程名,单击鼠标右键,然后选中&quo ...

  5. 在C 中加载TorchScript模型

    本教程已更新为可与PyTorch 1.2一起使用 顾名思义,PyTorch的主要接口是Python编程语言.尽管Python是合适于许多需要动态性和易于迭代的场景,并且是首选的语言,但同样的,在 许多 ...

  6. 如何让Chrome浏览器可以加载本地XML文件?

    Chrome浏览器的安全限制,禁止本地加载XML等外部文件,如何设置让其可以加载呢? 有两种方法,第一种是在本地服务器环境下浏览,采用 http://localhost/ 的方式浏览你的网页和文件,就 ...

  7. 机器学习之保存与加载.pickle模型文件

    import pickle from sklearn.externals import joblib from sklearn.svm import SVC from sklearn import d ...

  8. Qt3D使用assimp加载常规模型文件

    Qt3D使用assimp加载三维模型文件,assimp支持很多常规格式的三维模型格式: 其中支持导入的格式有: 3D 3DS 3MF AC AC3D ACC AMJ ASE ASK B3D BLEND ...

  9. tensorflow c++ API加载.pb模型文件并预测图片

    tensorflow  python创建模型,训练模型,得到.pb模型文件后,用c++ api进行预测 #include <iostream> #include <map> # ...

随机推荐

  1. 一名3年工作经验的java程序员应该具备的技能

    一名3年工作经验的Java程序员应该具备的技能,这可能是Java程序员们比较关心的内容.我这里要说明一下,以下列举的内容不是都要会的东西—-但是如果你掌握得越多,最终能得到的评价.拿到的薪水势必也越高 ...

  2. Spark RDD概念学习系列之Pair RDD的transformation操作

    不多说,直接上干货! Pair RDD的transformation操作 Pair RDD转换操作1 Pair RDD 可以使用所有标准RDD 上转化操作,还提供了特有的转换操作. Pair RDD转 ...

  3. 阿里云Maven中央仓库配置

    方式一:统一配置 在maven安装目录/conf下的settings.xml 文件里配置mirrors的子节点,添加如下mirror <mirror> <id>alimaven ...

  4. uni-app 自定义扫码界面

    二维码扫描,已经成为当下一款应用不可或缺,同时也是用户习以为常的功能了.uni-app 为我们提供了扫码 API ,直接调用即可. 需求场景 在实际开发中,平台提供的默认扫码界面,并不能满足一些自定义 ...

  5. 「JavaSE 重新出发」05.03.01 利用反射分析类

    在 java.lang.reflect 包中有三个类 Field, Method 和 Constructor 分别用于描述类的域.方法和构造器. Class 类中的 getFields, getMet ...

  6. depth peeling实现半透明

    aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH

  7. Python——Day4(基础知识练习二)

    # 1.请用代码实现:利用下划线将列表的每一个元素拼接成字符串.# li = ['alex','eric','rain']# li = ['alex','eric','rain']# li2 = &q ...

  8. 解决MYSQL的错误:Got a packet bigger than 'max_allowed_packet' bytes

    Mysql 5.1开始遇到的信息包过大问题,当用客户端导入数据的时候,遇到错误代码: 1153 - Got apacket bigger than 'max_allowed_packet' bytes ...

  9. 小学生绞尽脑汁也学不会的python(异常,约束,MD5加密,日志处理)

    小学生绞尽脑汁也学不会的python(异常,约束,MD5加密,日志处理) 异常处理(处理) 1.产生异常.raise 异常类(),抛出异常2. 处理异常: try: xxxxx # 尝试执行的代码. ...

  10. 【codeforces 734F】Anton and School

    [题目链接]:http://codeforces.com/problemset/problem/734/F [题意] 给你两个数组b和c; 然后让你找出一个非负数组a满足题中所给关系; [题解] 有个 ...