本文共 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> </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');" /> Normal106 </label>107 <label>108 <input type="radio" name="radioRenderingMode" value="xray" onchange="setRenderingMode('x-ray');" /> X-Ray109 </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]); //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/