一、创建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 对象用于绘制呈现模型文件。
完整的代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>xViewer</title>
5 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
6
7 <script src="Content/Libs/gl-matrix.js"></script>
8 <script src="Content/Libs/webgl-utils.js"></script>
9 <script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script>
10 <script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script>
11 <script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script>
12 <script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script>
13 <script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script>
14 <script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script>
15 <script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script>
16 <script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script>
17
18 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script>
19 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script>
20 <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script>
21
22 <script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script>
23 <script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>
24 <style>
25
26 html, body {
27 height: 100%;
28 padding: 0;
29 margin: 0;
30 }
31
32 canvas {
33 display: block;
34 border: none;
35 margin-left: auto;
36 margin-right: auto;
37 }
38 </style>
39
40 </head>
41 <body>
42 <div id="msg"></div>
43 <canvas id="xBIM-viewer" width="600" height="500"></canvas>
44 <script type="text/javascript">
45 var check = xViewer.check();
46 if (check.noErrors) {
47 var viewer = new xViewer("xBIM-viewer");
48 viewer.background = [0, 0, 0];//设置模型浏览器的背景色
49
50 viewer.on("error",
51 function (arg) {
52 var container = viewer._canvas.parentNode;
53 if (container) {
54 container.innerHTML = "<pre style=‘color:red;‘>" + arg.message + "</pre>" + container.innerHTML;
55 }
56 });//实时监控异常发生事件
57
58 viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加载模型文件
59 viewer.start(); //使用此函数可以启动模型的动画。如果在加载几何图形之前启动动画，它将等待内容呈现。此函数绑定到屏幕的浏览器帧速率，因此如果切换到其他选项卡，它将停止消耗任何资源。
60
61 var cube = new xNavigationCube();
62 viewer.addPlugin(cube);// 添加立方体导航
63
64 var home = new xNavigationHome();
65 viewer.addPlugin(home);// 添加首页导航
66
67 } else {
68 alert("您浏览器版本过低，不支持WebGL技术。请升级浏览器。");
69
70 var msg = document.getElementById("msg");
71 for (var i in check.errors) {
72 var error = check.errors[i];
73 msg.innerHTML += "<div style=‘color: red;‘>" + error + "</div>";
74 }
75 }
76 </script>
77 </body>
78 </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, -1))
{
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中右键点击该文件，选择“在浏览器中查看”
效果如下
原文地址：https://www.cnblogs.com/SavionZhang/p/10984048.html
时间： 2024-10-28 10:19:57