dorkhub
show your thing

web-ifc-viewer

Graphics engine and toolkit for client applications.

ThatOpen
JavaScript★ 1k⑂ 258 forksMITupdated 2 years ago
3dbimgeometryifcthreejs
git clone https://github.com/ThatOpen/web-ifc-viewer.gitThatOpen/web-ifc-viewer
README.mdfork it — it’s yours

ifc.js | documentation | demo | discord | usage example | npm package

THIS LIBRARY IS DEPRECATED. USE COMPONENTS INSTEAD

web-ifc-viewer

npm opencollective

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.

Demo

Test IFC.js Web IFCviewer with your IFC models in our online Demo

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.

more like this

lottery

🎉🌟✨🎈年会抽奖程序，基于 Express + Three.js的 3D 球体抽奖程序，奖品🧧🎁，文字，图片，抽奖规则均可配置，😜抽奖人员信息Excel一键导入😍，抽奖结果Excel导出😎，给你的抽奖活动带来全新酷炫体验🚀🚀🚀

JavaScript★ 4.6k
@moshang-ax

search

search projects, people, and tags