Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ThatOpen/web-ifc-viewer
Graphics engine and toolkit for client applications.
https://github.com/ThatOpen/web-ifc-viewer
3d bim geometry ifc threejs
Last synced: about 2 months ago
JSON representation
Graphics engine and toolkit for client applications.
- Host: GitHub
- URL: https://github.com/ThatOpen/web-ifc-viewer
- Owner: ThatOpen
- License: mit
- Created: 2020-10-25T12:31:06.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-29T13:18:30.000Z (12 months ago)
- Last Synced: 2024-05-14T00:03:05.023Z (4 months ago)
- Topics: 3d, bim, geometry, ifc, threejs
- Language: JavaScript
- Homepage:
- Size: 51.4 MB
- Stars: 920
- Watchers: 45
- Forks: 228
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
ifc.js
|
documentation
|
demo
|
discord
|
usage example
|
npm package
THIS LIBRARY IS DEPRECATED. USE COMPONENTS INSTEAD
web-ifc-viewer 
This library is an extension of [web-ifc-three](https://github.com/IFCjs/web-ifc-three), which is the official `IFCLoader` for [THREE.js](https://github.com/mrdoob/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](https://github.com/IFCjs/web-ifc-three) and [web-ifc](https://github.com/tomvandig/web-ifc).
Check out their `README` files to better understand where the project currently is.
## Demo
Test IFC.js Web IFCviewer with your IFC models in our [online Demo](https://ifcjs.github.io/web-ifc-viewer/example/index)
## Documentation
Check out [our official docs](https://github.com/IFCjs/web-ifc-viewer/blob/master/CONTRIBUTING.md) 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:
```js
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](https://rollupjs.org/guide/en/):
```js
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:
```html
IFC.js
```
## 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](https://github.com/IFCjs/web-ifc-viewer/blob/master/CONTRIBUTING.md) or speak to us directly in [Discord](https://discord.gg/FXfyR4XrKT).