在本案例中、咱们将如何建立最基本的模型查看器。除展现BIM模型外、不会作其余操做。javascript
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello building!</title> <script src="js/xbim-viewer.debug.bundle.js"></script> </head> <body> <canvas id="viewer" width="500" height="300"></canvas> <script type="text/javascript"> var viewer = new xViewer('viewer'); viewer.load('data/SampleHouse.wexbim'); viewer.start(); </script> </body> </html>
咱们只要引用了xbim-viewer.debug.bundle.js 库,常见xView 对象传递<canvas>
元素的id 并启动。只需确保从Web服务器运行,而不单单是本地文件,由于xViewer使用AJAX获取wexBIM数据,而且一些浏览器甚至在本地HTML文件上施加CORS限制。另外请确保您不要使用低于11的IE,由于您须要支持WebGL。html
若是咱们在应用程序须要部署的话,咱们已经提到xbim-viewer.debug.bundle.js包含xbim-viewer.js有两个依赖库一块儿捆绑GL-matrix.js和支持WebGL utils.js。从文件的名称就能够看出是开发版。若是您下载此库,它包含用于不一样类型部署的多个文件。软件包是独立的,并以缩小版和调试版发布。若是您的部署更合理,则还能够引用单独的库。这些是明智的组合:java
<script src="js/xbim-viewer.debug.bundle.js"></script>
用于调试捆绑版本(若是您选择了IDE,也会在VS中为您添加智能感知支持)或web
<script src="js/xbim-viewer.min.bundle.js"></script>
对于缩小版本(这多是您的发布选择)或
<script src="js/gl-matrix.min.js.js"></script> <script src="js/webgl-utils.min.js"></script> <script src="js/xbim-viewer.min.js"></script>
它们所有分开。canvas