在本教程中,将学习如何创建最基本和最直接的查看器。 除了展示建筑模型外,不做其他任何操作。它将只使用内置导航,但是不会对按钮做出事件响应。
代码语言: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 库,使用<canvas>
元素的id创建 xViewer 对象并启动。请确保从Web服务器运行,而不仅仅是本地文件,因为 xViewer 使用 ajax 获取 wexBIM 数据,但是一些浏览器甚至在本地HTML文件上施加CORS限制(请采取相关方法进行处理)。另外请确保您的浏览器不也要低于IE11版本,因为您需要支持WebGL。
如果应用程序需要部署的话,xbim-viewer.debug.bundle.js 或者 xbim-viewer.js 有两个依赖库 GL-matrix.js 和 WebGL utils.js。从文件的名称就可以看出是开发版。如果您下载此库,它包含用于不同类型部署的多个文件。软件包是独立的,并以压缩版和调试版发布。如果您的部署更合理,则还可以引用单独的库。这些是明智的组合:
代码语言:javascript复制 <script src="js/xbim-viewer.debug.bundle.js"></script>
用于调试捆绑版本(如果您选择了IDE,也会在VS中为您添加智能感知支持)或
代码语言:javascript复制 <script src="js/xbim-viewer.min.bundle.js"></script>
代码语言:javascript复制对于压缩版本(这可能是您的发布选择)或
代码语言:javascript复制 <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>