Tutorial: Hello building!

´╗┐Live example here

In this tutorial you will learn how to create the most basic and straightforward viewer. It won't do anything except showing the building. It will only use the built-in navigation of the viewer and will not respond to any events. You can have a look here for live example. No let's dig into the code:

<!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>

Well, this was pretty easy wasn't it? We just referenced the xbim-viewer.debug.bundle.js library, create xViewer object passing id of <canvas> element and start animation. This is it! Just make sure you are running from web server, not just as a local file because xViewer uses AJAX to fetch the wexBIM data and some browsers impose CORS restrictions even on local HTML files. Also make sure you don't use IE less than 11 because you need to have support for WebGL. You will learn how to check prerequisites at the end of this tutorial. If it still doesn't work check your webserver is serving wexBIM file as a static content. If you don't want to install webserver only because of this I recommend Mongoose. Just drop it into the sample directory and run it. It will serve all files as a static content which is all you need for this tutorial.

Now just a few words about deployment. We have referenced xbim-viewer.debug.bundle.js which contains xbim-viewer.js bundled along with two dependant libraries gl-matrix.js and webgl-utils.js. These are the only external dependencies of the viewer. As you may have guessed from the name it is debug version. If you download this library it contains multiple files for different types of deployment. Bundles are self-contained and are released as minified and debug version. You can also reference separate libraries if it makes better sense for your deployment. These are sensible combinations:

    <script src="js/xbim-viewer.debug.bundle.js"></script>

for debug bundled version (this will also add you intellisense support in VS if your IDE of choice) or

    <script src="js/xbim-viewer.min.bundle.js"></script>

for minified version (this will probably be your choice for release) or

    <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>

if you prefer to have it all separated.

Right, this is about enough for the first tutorial. So if you feel fresh you can jump right into the next one where you will learn how to check that the browser is actually able to render the model in Safe 'Hello building!'. It'll look the same as this example so you can have a look on live show here