Introducing Web-IFC-Viewer
Web-IFC-Viewer is a JavaScript library designed to simplify the creation and visualization of Building Information Modeling (BIM) tools right in the browser. This library extends the capabilities of the well-known web-ifc-three, which is an IFC loader for THREE.js – a popular JavaScript 3D library. Web-IFC-Viewer enhances the management and display of IFC models by offering tools for 3D dimensions, clipping planes, and 2D plan navigation, making it a powerful choice for developers looking to create BIM applications efficiently.
Current Status
The Web-IFC-Viewer is a stable and reliable toolset, although it has since been deprecated in favor of the newer components library, as seen in the Components. Despite its deprecated status, it remains an effective platform for those seeking to work directly with IFC files in JavaScript. The repository's functionality is strongly connected with the ongoing development of web-ifc-three and web-ifc, indicating that users should verify the state of these projects for optimal usage and support.
Hands-On Experience
For those eager to see the library in action, there is an online demo available where users can test Web-IFC-Viewer with their own IFC models. This provides an interactive way to explore the library's capabilities and potential applications.
Documentation and Installation
Comprehensive documentation is accessible through the official documentation site, providing critical details regarding the API, configuration guides, and functional tutorials to help developers get started quickly.
To install Web-IFC-Viewer, developers can use npm or yarn:
npm install web-ifc-viewer
or
yarn add web-ifc-viewer
Setup Example
A basic setup involves importing the library in a JavaScript file, initializing the viewer, and setting up an event listener to load IFC files. Here’s a simplified version of how this might look:
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
);
To compile this setup, any JavaScript bundler can be used, such as Rollup, featuring simple configuration options outlined in the project documentation.
Directory Structure
The project organizes its files into key directories:
- viewer: The location of the primary source code for the Web-IFC-Viewer.
- example: Contains practical examples displaying how the library can be implemented in real-world scenarios.
How to Get Involved
Community involvement is encouraged through contributions and discussions. For those interested in participating in the project's development or sharing insights, resources such as the contribution guidelines and a Discord server facilitate direct interaction with the development team.
In conclusion, Web-IFC-Viewer remains a valuable tool for those working with BIM tools and IFC files, offering a straightforward and powerful way to bring 3D visualization into web applications.