在本案例中、咱們將如何建立最基本的模型查看器。除展現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