From e78686148b5f38e934762fcb5e1bfb18d866ecb8 Mon Sep 17 00:00:00 2001 From: Gangula2 Date: Wed, 26 Oct 2022 17:34:44 +0530 Subject: [PATCH] Added link to other repository --- README.md | 139 +++++++++++++++++++++++++++-------------------------- index.html | 2 + styles.css | 6 +++ 3 files changed, 78 insertions(+), 69 deletions(-) diff --git a/README.md b/README.md index d928665..05c4443 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,14 @@ Basic source code for Web-IFC-Viewer +> check out the [following repository](https://github.com/AnweshGangula/ifcjs-viewer) for additional features + This project is a [hello world example](https://ifcjs.github.io/web-ifc-viewer/example/index) set-up for [web-ifc-viewer](https://ifcjs.github.io/info/docs/Guide/web-ifc-viewer/Introduction). - web-ifc-viewer is a 3D BIM viewer with many tools and functionalities already implemented (section drawings, dimensions, etc.), allowing you to create BIM tools with very little effort. - Also check-out [web-ifc-three](https://ifcjs.github.io/info/docs/Guide/web-ifc-three/Introduction) which is a boilerplate 3D BIM Viewer with no in-built functionalities. You can use this if you want to build your own custom application with full control over the implementation. - - Check out [this repo](https://github.com/AnweshGangula/ifcjs-101) for basics + - Check out [this repo](https://github.com/AnweshGangula/ifcjs-101) for basics + ## Setting up the project (Pre-IFC.js) The first thing to do is to create an empty folder and [start a new npm project](https://docs.npmjs.com/cli/v8/commands/npm-init) with the command `npm init`. This will generate a package.json file containing some data such as the project name, version, commands and dependencies @@ -33,24 +36,22 @@ The next step is to create an HTML file named index.html as the main document of ```html - - - - - - - - - - IFC.js - - - - -
- - - + + + + + + + + + IFC.js + + + + +
+ + ``` @@ -59,23 +60,24 @@ The next step is to create an HTML file named index.html as the main document of The following CSS file will make the canvas full screen: ```css -*{ - margin: 0; - padding: 0; - box-sizing: border-box; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -html, body { - overflow: hidden; +html, +body { + overflow: hidden; } #viewer-container { - position: fixed; - /* top: 0; */ - left: 0; - outline: none; - width: 100%; - height: 100%; + position: fixed; + /* top: 0; */ + left: 0; + outline: none; + width: 100%; + height: 100%; } ``` @@ -88,17 +90,18 @@ The next thing to do is to copy the web-ifc.wasm and `web-ifc-mt.wasm` files to These files are necessary because they contain the compiled C++ logic of [web-ifc](https://github.com/IFCjs/web-ifc), which is the parsing core to read and write IFC files with native speed. > These files have to be served statically in your application. This might need different tweaks if you are using frameworks or libraries like React, Angular, Vue or Svelte. -### Setting up web-ifc-viewer + +## Setting up 3D-Scene (web-ifc-viewer) We are now going to create the JavaScript file to write the code for our application (eg: index.js). This file can be located anywhere and have any name, but you must reflect this in the `rollup.config.js` in the next step. Below code is where we are setting up a basic threejs scene using web-ifc-viewer. In the next step we will add the functionality to load models into this viewer. ```js -import { Color } from 'three'; -import { IfcViewerAPI } from 'web-ifc-viewer'; +import { Color } from "three"; +import { IfcViewerAPI } from "web-ifc-viewer"; -const container = document.getElementById('viewer-container'); +const container = document.getElementById("viewer-container"); const viewer = new IfcViewerAPI({ container, backgroundColor: new Color(0xffffff) }); viewer.axes.setAxes(); viewer.grid.setGrid(); @@ -110,30 +113,31 @@ window.onmousemove = () => viewer.IFC.selector.prePickIfcItem(); viewer.clipper.active = true; window.onkeydown = (event) => { - if (event.code === 'KeyP') { - viewer.clipper.createPlane(); - } - else if (event.code === 'KeyO') { - viewer.clipper.deletePlane(); - } -} + if (event.code === "KeyP") { + viewer.clipper.createPlane(); + } else if (event.code === "KeyO") { + viewer.clipper.deletePlane(); + } +}; ``` -### Loading IFC files (user-uploaded) +## Loading IFC files + +### Loading user's models Finally, we will use IFC.js to load IFC files by allowing the user to choose a local file and using the `IfcViewerAPI()` we instantiated above to load the model. ```js -input.addEventListener("change", +input.addEventListener( + "change", - async (changed) => { + async (changed) => { + const file = changed.target.files[0]; + const ifcURL = URL.createObjectURL(file); + viewer.IFC.loadIfcUrl(ifcURL); + }, - const file = changed.target.files[0]; - const ifcURL = URL.createObjectURL(file); - viewer.IFC.loadIfcUrl(ifcURL); - }, - - false + false ); ``` @@ -143,7 +147,6 @@ input.addEventListener("change", > await viewer.IFC.setWasmPath("static/wasm/"); > ``` - ![Web-IFC-Viewer startup view](ReadMe_Images/web-ifc-viewer_load_uploaded_model.jpg) If you have done everything correctly, you should be able to see something similar to [this](https://ifcjs.github.io/web-ifc-viewer/example/index) in your local server. From here, the possibilities are endless. @@ -169,19 +172,17 @@ npx rollup index.js --file bundle.js --format es --plugin @rollup/plugin-node-re Next, we'll create the rollup configuration file to save the bundling configuration and run the file instead of typing the entire command each time. This file has to be called `rollup.config.js` and includes the reference to the plugins we have previously installed. ```javascript -import resolve from '@rollup/plugin-node-resolve'; +import resolve from "@rollup/plugin-node-resolve"; export default { - input: 'index.js', - output: [ - { - format: 'esm', - file: 'bundle.js' - }, - ], - plugins: [ - resolve(), - ] + input: "index.js", + output: [ + { + format: "esm", + file: "bundle.js", + }, + ], + plugins: [resolve()], }; ``` @@ -202,20 +203,20 @@ Also, the `package.json` file needs to be modified to contain the scripts to con ### Running the app -You'll be able to see the application as expected once your have bundled the index.js file to bundle.js using roll-up. +You'll be able to see the application as expected once your have bundled the index.js file to bundle.js using roll-up. To run the application locally after bundling the file, we will need a local server. If you are using VS Code as IDE, one option is to install the [Live Server extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), which allows us to open an instance of Google Chrome, run our web application and see the changes we make to the code in real-time. ### Loading IFC files (from server) -iIn order to load a ifc file from a server, you need to use the `loadIfcUrl()` to convert the model path url into something that the web-ifc-viewer can read. Below is the `loadIfc(url)` function that does that. +In order to load a ifc file from a server, you need to use the `loadIfcUrl()` to convert the model path url into something that the web-ifc-viewer can read. Below is the `loadIfc(url)` function that does that. ```js async function loadIfc(url) { - // await viewer.IFC.setWasmPath("static/wasm/"); - const model = await viewer.IFC.loadIfcUrl(url); - viewer.shadowDropper.renderShadow(model.modelID); + // await viewer.IFC.setWasmPath("static/wasm/"); + const model = await viewer.IFC.loadIfcUrl(url); + viewer.shadowDropper.renderShadow(model.modelID); } -loadIfc('models/01.ifc'); +loadIfc("models/01.ifc"); ``` diff --git a/index.html b/index.html index d356c87..3702914 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,8 @@ +
+

Check out the following repository for additional features

diff --git a/styles.css b/styles.css index 88ee597..416dc1d 100644 --- a/styles.css +++ b/styles.css @@ -16,4 +16,10 @@ body { outline: none; width: 100%; height: 100%; +} + +#notification { + background: antiquewhite; + display: inline-block; + margin: 5px 0; } \ No newline at end of file