博客
关于我
xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
阅读量:406 次
发布时间:2019-03-06

本文共 11390 字,大约阅读时间需要 37 分钟。

系列目录     

在模型浏览器中加载模型后,可以对模型做一些特殊操作。下图是常用的设置。

都是通过 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');" /> Normal106             </label>107             <label>108                 <input type="radio" name="radioRenderingMode" value="xray" onchange="setRenderingMode('x-ray');" /> X-Ray109             </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]);     //red226         viewer.defineStyle(1, [0, 0, 255, 100]);     //semitransparent blue227         viewer.defineStyle(2, [255, 255, 255, 255]); //white228 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>

 

系列目录     

转载地址:http://uhykz.baihongyu.com/

你可能感兴趣的文章
mysql中having的用法
查看>>
MySQL中interactive_timeout和wait_timeout的区别
查看>>
mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
查看>>
mysql中json_extract的使用方法
查看>>
mysql中json_extract的使用方法
查看>>
mysql中kill掉所有锁表的进程
查看>>
mysql中like % %模糊查询
查看>>
MySql中mvcc学习记录
查看>>
mysql中null和空字符串的区别与问题!
查看>>