web-ifc-viewer
web-ifc-viewer copied to clipboard
ThatOpen
Graphics engine and toolkit for client applications.
ifc.js | documentation | demo | discord | usage example | npm package
web-ifc-viewer 
This library is an extension of web-ifc-three, which is the official IFCLoader for THREE.js. This doesn't only parse and generate the Three.js geometry of IFC models in JavaScript, but also provides multiple tools to easily build BIM tools, such as 3d dimensions, clipping planes, 2D plan navigation and generation, etc.
Status
web-ifc-viewer offers multiple tools to create awesome BIM tools in no time. While the tools are quite stable, the state of this repository is tightly coupled with the state of web-ifc-three and web-ifc.
Check out their README files to better understand where the project currently is.
Documentation
Check out our official docs for API reference, guides and tutorials.
Install
npm install web-ifc-viewer or yarn add web-ifc-viewer
Quick setup
First, create a JavaScript file that imports the library and creates a scene:
import { IfcViewerAPI } from 'web-ifc-viewer';
const container = document.getElementById('viewer-container');
const viewer = new IfcViewerAPI({ container });
viewer.axes.setAxes();
viewer.grid.setGrid();
const input = document.getElementById("file-input");
input.addEventListener("change",
async (changed) => {
const file = changed.target.files[0];
const ifcURL = URL.createObjectURL(file);
viewer.IFC.loadIfcUrl(ifcURL);
},
false
);
You can bundle this file using any bundler. This is an example configuration file using rollup:
import resolve from '@rollup/plugin-node-resolve';
export default {
input: 'index.js',
output: {
file: "bundle.js",
format: 'esm'
},
plugins: [ resolve() ]
};
Now you display it in an HTML page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" type="image/png" href="./favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IFC.js</title>
</head>
<body>
<input type="file" id="file-input" accept=".ifc, .ifcXML, .ifcZIP">
<div id="viewer-container"></div>
<script src="./bundle.js"></script>
</body>
</html>
Content
This project consists of the following folders:
-
viewer: contains the source code.
-
example: contains one example of how to use the library.
Contributing
Want to help out? Great!
Please checkout our contribution suggestsions or speak to us directly in Discord.
ThatOpen