` is the backdrop element:\r\n\r\n```html\r\n
\r\n
\r\n```\r\n\r\nAs defined in [`css/BIMViewer.css`](https://github.com/xeokit/xeokit-bim-viewer/blob/master/css/BIMViewer.css), the backdrop gets the following style, which allows the dialog to position itself correctly within the backdrop:\r\n\r\n```css\r\n.xeokit-busy-modal-backdrop {\r\n position: relative;\r\n}\r\n```\r\n\r\nIf you need to tweak CSS relating to the dialog, search for \"xeokit-busy-dialog\" within [`css/BIMViewer.css`](https://github.com/xeokit/xeokit-bim-viewer/blob/master/css/BIMViewer.css).\r\n\r\n### Tooltips\r\n\r\nTooltips are not part of the core JavaScript for the viewer. Instead, viewer HTML elements are marked with `data-tippy-content` attributes that provide strings to show in their tooltips.\r\n\r\nFor example, the _Toggle 2D/3D_ button's element looks like this:\r\n\r\n```html\r\n
\r\n```\r\n\r\nIn the [app/index.html](https://github.com/xeokit/xeokit-bim-viewer/blob/master/app/index.html) file for the standalone viewer, we're using [tippy.js](https://github.com/atomiks/tippyjs), which automatically creates tooltips for those elements.\r\n\r\n### Customizing Appearances of IFC Types\r\n\r\nTODO: Correct this section - viewer can load from model and viewer\r\n\r\nThe viewer loads colors for the various IFC element types straight from the IFC model, except where overrides are defined in the configuration file [`./src/IFCObjectDefaults/ViewerIFCObjectColors.js`](https://github.com/xeokit/xeokit-bim-viewer/blob/master/src/IFCObjectDefaults/ViewerIFCObjectColors.js).\r\n\r\nYou can add or remove configurations in that file if you need to customize the color and pickability of specific IFC types.\r\n\r\nFor example, to ensure that `IfcWindow` and `IfcSpace` types are initially visible, transparent and pickable (ie. able to be selected by clicking on them), you might configure that file as shown below:\r\n\r\n```javascript\r\nconst IFCObjectDefaults = {\r\n IfcSpace: {\r\n visible: true,\r\n pickable: true,\r\n opacity: 0.2,\r\n },\r\n IfcWindow: {\r\n visible: true,\r\n pickable: true,\r\n opacity: 0.5,\r\n },\r\n};\r\n\r\nexport { IFCObjectDefaults };\r\n```\r\n\r\nSometimes IFC models have opaque `IfcWindow` and `IfcSpace` elements, so it's a good idea to have configurations in there so that we can see through them.\r\n\r\n## xeokit Components Used in the Viewer\r\n\r\nThe viewer is built on various [xeokit SDK](http://xeokit.io) components and plugins that are designed to accelerate the development of BIM and CAD visualization apps.\r\n\r\nThe table below lists the main ones used in this viewer.\r\n\r\n| Component | Purpose |\r\n| :------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------- |\r\n| [`Viewer`](https://xeokit.github.io/xeokit-sdk/docs/class/src/viewer/Viewer.js~Viewer.html) | The WebGL-based viewer at the heart of `BIMViewer`. |\r\n| [`XKTLoaderPlugin`](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html) | Loads model geometry and metadata. |\r\n| [`NavCubePlugin`](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/NavCubePlugin/NavCubePlugin.js~NavCubePlugin.html) | Navigation cube gizmo that allows us to rotate the scene and move the camera to look at it along a selected axis or diagonal. |\r\n| [`TreeViewPlugin`](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/TreeViewPlugin/TreeViewPlugin.js~TreeViewPlugin.html) | Implements the Objects, Classes and Storeys tree views within the explorer panel. |\r\n| [`SectionPlanesPlugin`](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html) | Manages interactive section planes, which are used to slice objects to reveal inner structures. |\r\n| [`BCFViewpointsPlugin`](https://xeokit.github.io/xeokit-sdk/docs/class/src/plugins/BCFViewpointsPlugin/BCFViewpointsPlugin.js~BCFViewpointsPlugin.html) | Saves and loads BCF viewpoints. |\r\n| [`ContextMenu`](https://xeokit.github.io/xeokit-sdk/docs/class/src/extras/ContextMenu/ContextMenu.js~ContextMenu.html) | Implements the context menus for the explorer tree views and 3D canvas. |\r\n\r\n## Building the Viewer\r\n\r\n### Installing from NPM\r\n\r\nTo install the npm package:\r\n\r\n```\r\nnpm i @xeokit/xeokit-bim-viewer\r\n```\r\n\r\n### Building the Binary\r\n\r\nTo build the ES6 module in `/dist/xeokit-bim-viewer.es.js`:\r\n\r\n```\r\nnpm run build\r\n```\r\n\r\n### Building the Documentation\r\n\r\nTo build the API documentation in `/docs/`:\r\n\r\n```\r\nnpm run docs\r\n```\r\n","readmeFilename":"README.md"}