<aside> 🆕 This tutorial is for xeokit-sdk v2.2 and later.


In this tutorial, you'll learn how to load an IFC model into a xeokit Viewer, and position it within the Viewer's double-precision 3D Cartesian World coordinate system using mercator-projected geodesic coordinates (longitude, latitude and height).


The xeokit Viewer has a double-precision 3D Cartesian coordinate system, which we call xeokit's World coordinate system.

Since it's double-precision, we can view models that have huge vertex coordinates, and position them far from the origin, without loss of visual accuracy (see Viewing Double-Precision Models).

In practice, we can actually treat the Viewer's coordinate system as anything that fits into 3D double-precision Cartesian coordinates. This includes [WGS84](https://en.wikipedia.org/wiki/World_Geodetic_System#:~:text=The coordinate origin of WGS,latitude of the Royal Observatory.), and the Web Mercator projected coordinate system, which is used by Google Maps, MapboxBing Maps,  OpenStreetMap,  MapquestEsri, and many others

In this tutorial, we'll configure the Viewer's coordinate system to work as a variation of the Web Mercator coordinate system. Then, when we load our model, we'll position it using mercator coordinates, which we'll project from our geodesic coordinates.

To load our model, we'll use a WebIFCLoaderPlugin, which uses web-ifc internally to load an IFC file directly into our xeokit Viewer. Note that this tutorial also works with all the other xeokit loader plugins, including XKTLoaderPlugin.

Our example is really not that much to look at, since there are no terrain features to show where we've actually positioned our model. Nevertheless, click the link below for a live demo. Perhaps we could add a ground plane with an image or coordinate markings at some point in the future.

<aside> ▶️ Run this example


Screenshot from 2021-12-10 12-54-27.png

1. Create the xeokit Viewer

To start with, we'll create a xeokit Viewer.

We'll push the Viewer's far clipping plane a long way back, and enable the Viewer's logarithmic depth buffer, to improve rendering accuracy for distant objects - a good idea in case we want to load more models and look at them from a distance.

We'll also configure the Viewer's World coordinate axis for the mercator system, making +Z the direction of the "up" axis. Consequently, we'll need to rotate our IFC model 90° about the X-axis when we load it in Step 4, since the model was authored with +Y as "up".