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

系列目录【已更新最新开发文章，点击查看详细】
在模型浏览器中加载模型后，可以对模型做一些特殊操作。下图是常用的设置。
都是通过 xbim-viewer.js 中的 API 来设置以达到一定的效果。代码如下：
  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     <script src="Content/Libs/jquery.js"></script>
 25     <style>
 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 
 39         #operate {
 40             display: inline;
 41             border: 1px;
 42             margin-top: 20px;
 43             margin-left: 20px;
 44             margin-right: auto;
 45             padding-top: 20px;
 46         }
 47 
 48         .select {
 49             margin-top: 20px;
 50             margin-left: 20px;
 51         }
 52     </style>
 53 </head>
 54 <body>
 55     <div id="msg"></div>
 56     <div class="select">
 57         <input type="file" id="input" accept=".wexbim" />
 58     </div>
 59     <div style="float: left; margin: 20px;"><canvas id="xBIM-viewer" width="750" height="500"></canvas></div>
 60     <div id="operate">
 61         <div> &nbsp;</div>
 62         <div>
 63             <div>
 64                 Selected ID: <span id="coords"></span>
 65             </div>
 66             <div>
 67                 帧数 (FPS): <span id="fps"></span>
 68             </div>
 69         </div>
 70         <div> &nbsp;</div>
 71         <div>
 72             导航模式：
 73             <button onclick="setNavigation('zoom');">缩放</button>
 74             <button onclick="setNavigation('pan');">平移</button>
 75             <button onclick="setNavigation('fixed-orbit');">固定动态观察</button>
 76             <button onclick="setNavigation('free-orbit');">自由动态观察</button>
 77             <button onclick="setNavigation('none');">无</button>
 78         </div>
 79         <div> &nbsp;</div>
 80         <div>
 81             观察视角：
 82             <button onclick="setShow('front');">前</button>
 83             <button onclick="setShow('back');">后</button>
 84             <button onclick="setShow('top');">上</button>
 85             <button onclick="setShow('bottom');">下</button>
 86             <button onclick="setShow('left');">左</button>
 87             <button onclick="setShow('right');">右</button>
 88         </div>
 89         <div> &nbsp;</div>
 90         <div>
 91             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;局部：
 92             <button onclick="clip();">剖切</button>
 93             <button onclick="unclip();">复原</button>
 94         </div>
 95         <div> &nbsp;</div>
 96         <div>
 97             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;相机：
 98             <button onclick="setCamera('perspective');">透视</button>
 99             <button onclick="setCamera('orthogonal');">正交</button>
100         </div>
101         <div> &nbsp;</div>
102         <div>
103             渲染模式：
104             <label>
105                 <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="setRenderingMode('normal');" /> Normal
106             </label>
107             <label>
108                 <input type="radio" name="radioRenderingMode" value="xray" onchange="setRenderingMode('x-ray');" /> X-Ray
109             </label>
110         </div>
111         <div> &nbsp;</div>
112         <div>
113             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他：
114             <button onclick="selectAllWalls();">选中所有墙</button>
115             <button onclick="resetWalls();">复原</button>
116             <button onclick="hideWalls();">隐藏所有墙</button>
117         </div>
118         <div> &nbsp;</div>
119         <div>
120             设置状态：
121             <button onclick="setStateShowAll();">显示所有</button>
122             <button onclick="setStateGlass();">设置滤镜效果</button>
123             <button onclick="setStateWhite();">设置为白色</button>
124             <button onclick="setStateDefault();">设置默认</button>
125             <button onclick="setStateHideSpace();">隐藏空格</button>
126             <button onclick="setStateShowSpace();">显示空格</button>
127         </div>
128     </div>
129 <script type="text/javascript">
130     var modelId = -9999;
131     var check = xViewer.check();
132     if (check.noErrors) {
133         var viewer = new xViewer("xBIM-viewer");
134         viewer.background = [0, 0, 0]; //设置模型浏览器的背景色
135 
136         viewer.on("error",
137             function (arg) {
138                 var container = viewer._canvas.parentNode;
139                 if (container) {
140                     container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
141                 }
142             }); //实时监控异常发生事件
143 
144         viewer.show("back");
145 
146         viewer.on("loaded", function (model) {
147             modelId = model.id; //第一次加载的是0，第二次加载的1，每次递增
148         });
149 
150         viewer.on("pick", function (arg) {
151             var span = document.getElementById("coords");
152             if (span) {
153                 span.innerHTML = arg.id;
154             }
155         });
156         viewer.on("mouseDown", function (arg) {
157             viewer.setCameraTarget(arg.id);
158         });
159         viewer.on("fps", function (fps) {
160             var span = document.getElementById("fps");
161             if (span) {
162                 span.innerHTML = fps;
163             }
164         });
165         var span = document.getElementById("fpt");
166         if (span) {
167             span.innerHTML = viewer._fpt != null;
168         }
169 
170         //viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加载模型文件
171         //viewer.start(); //使用此函数可以启动模型的动画。如果在加载几何图形之前启动动画，它将等待内容呈现。此函数绑定到屏幕的浏览器帧速率，因此如果切换到其他选项卡，它将停止消耗任何资源。
172 
173         $("#input").change(function () {
174             if (!input.files) return;
175 
176             var file = this.files[0];
177             if (!file) return;
178 
179             if (modelId !== -9999) {
180                 viewer.unload(modelId); //如果之前已经加载过模型，则将模型卸载掉
181             }
182 
183             viewer.load(file, file.name);//重新加载新的模型
184             viewer.start();
185 
186             var cube = new xNavigationCube();
187             viewer.addPlugin(cube); // 添加立方体导航
188 
189             var home = new xNavigationHome();
190             viewer.addPlugin(home); // 添加首页导航
191         });
192 
193         // 设置导航模式
194         var setNavigation = function (mode) {
195             viewer.navigationMode = mode;
196         }
197 
198         // 设置观察视角
199         var setShow = function (direction) {
200             viewer.show(direction);
201         }
202 
203         // 剖切
204         var clip = function () {
205             viewer.clip();
206         }
207 
208         // 还原
209         var unclip = function () {
210             viewer.unclip();
211         }
212 
213         // 设置相机模式
214         var setCamera = function (mode) {
215             viewer.camera = mode;
216         }
217 
218         // 设置渲染模式
219         var setRenderingMode = function (mode) {
220             viewer.renderingMode = mode;
221         }
222 
223         var types = xProductType;
224         var states = xState;
225         viewer.defineStyle(0, [255, 0, 0, 255]);     //red
226         viewer.defineStyle(1, [0, 0, 255, 100]);     //semitransparent blue
227         viewer.defineStyle(2, [255, 255, 255, 255]); //white
228 
229         // 选中所有墙
230         var selectAllWalls = function () {
231             viewer.setState(states.HIGHLIGHTED, types.IFCWALLSTANDARDCASE);
232             viewer.setState(states.HIGHLIGHTED, types.IFCCURTAINWALL);
233             viewer.setState(states.HIGHLIGHTED, types.IFCWALL);
234         }
235 
236         // 隐藏所有墙
237         var hideWalls = function () {
238             viewer.setState(states.HIDDEN, types.IFCWALLSTANDARDCASE);
239             viewer.setState(states.HIDDEN, types.IFCCURTAINWALL);
240             viewer.setState(states.HIDDEN, types.IFCWALL);
241         }
242 
243         // 复原
244         var resetWalls = function () {
245             viewer.setState(states.UNDEFINED, types.IFCWALLSTANDARDCASE);
246             viewer.setState(states.UNDEFINED, types.IFCCURTAINWALL);
247             viewer.setState(states.UNDEFINED, types.IFCWALL);
248         }
249 
250         // 设置状态，显示所有
251         var setStateShowAll = function() {
252             for (var i in types) {
253                 if (types[i] !== types.IFCSPACE) {
254                     viewer.setState(states.UNDEFINED, types[i]);
255                 }
256             }
257         }
258 
259         // 设置状态，滤镜效果
260         var setStateGlass = function() {
261             for (var i in types) {
262                 if (types[i] !== types.IFCSPACE) {
263                     viewer.setStyle(1, types[i]);
264                 }
265             }
266         }
267 
268         // 设置状态，白色效果
269         var setStateWhite = function() {
270             for (var i in types) {
271                 if (types[i] !== types.IFCSPACE) {
272                     viewer.setStyle(2, types[i]);
273                 }
274             }
275         }
276 
277         // 设置状态，默认效果
278         var setStateDefault = function() {
279             for (var i in types) {
280                 if (types[i] !== types.IFCSPACE) {
281                     viewer.setStyle(xState.UNSTYLED, types[i]);
282                 }
283             }
284         }
285 
286         // 设置状态，隐藏空格
287         var setStateHideSpace = function() {
288             viewer.setState(states.HIDDEN, types.IFCSPACE);
289         }
290 
291         // 设置状态，显示空格
292         var setStateShowSpace = function() {
293             viewer.setState(states.UNDEFINED, types.IFCSPACE);
294         }
295 
296     } else {
297         alert("您浏览器版本过低，不支持WebGL技术。请升级浏览器。");
298 
299         var msg = document.getElementById("msg");
300         for (var i in check.errors) {
301             var error = check.errors[i];
302             msg.innerHTML += "<div style='color: red;'>" + error + "</div>";
303         }
304     }
305 </script>
306 </body>
307 </html>
系列目录【已更新最新开发文章，点击查看详细】
相关阅读:
Spring 注解详解01
java 排序算法
 Java 文件拼接器
 oracle join
Oracle 去重
 Java 笔试面试
 Oracle 笔试题02
jvm性能查看常用命令
 关于对JMM(java内存模型)的个人理解
 RSA前端加密后端解密避免出现明文密码
原文地址：https://www.cnblogs.com/SavionZhang/p/10986308.html