xBIM 實戰02 在瀏覽器中加載IFC模型文件並設置特效
在模型瀏覽器中加載模型後，能夠對模型作一些特殊操做。下圖是經常使用的設置。javascript
都是經過 xbim-viewer.js 中的 API 來設置以達到必定的效果。代碼以下：html
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> </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> </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> </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> </div> 90 <div> 91 局部： 92 <button onclick="clip();">剖切</button> 93 <button onclick="unclip();">復原</button> 94 </div> 95 <div> </div> 96 <div> 97 相機： 98 <button onclick="setCamera('perspective');">透視</button> 99 <button onclick="setCamera('orthogonal');">正交</button> 100 </div> 101 <div> </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> </div> 112 <div> 113 其餘： 114 <button onclick="selectAllWalls();">選中全部牆</button> 115 <button onclick="resetWalls();">復原</button> 116 <button onclick="hideWalls();">隱藏全部牆</button> 117 </div> 118 <div> </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>
相關文章
- 1. xBIM 實戰01 在瀏覽器中加載IFC模型文件
- 2. xBIM 實戰04 在WinForm窗體中實現IFC模型的加載與瀏覽
- 3. xBIM 實戰03 使用WPF技術實現IFC模型的加載與瀏覽
- 4. xBIM 高級01 IFC多模型合併
- 5. xBIM 基於 WexBIM 文件在 WebGL 瀏覽和加載
- 6. xBIM 多個IFC文件合併
- 7. Tekla 導出ifc並瀏覽
- 8. 設置瀏覽器的下載模式
- 9. xBIM 學習與應用系列目錄
- 10. 火狐瀏覽器設置中文並安裝modify headers插件
- 更多相關文章...
- • Eclipse 內置瀏覽器 - Eclipse 教程
- • Netscape 瀏覽器 - 瀏覽器信息
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
