Added link to other repository

Gangula2 · Oct 26, 2022 · e786861 · e786861
1 parent 54961c7
commit e786861
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 69 deletions.
diff --git 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
 <!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">
-    <div id="viewer-container"></div>
-    <script src="./bundle.js"></script>
-</body>
-
+	<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" />
+		<div id="viewer-container"></div>
+		<script src="./bundle.js"></script>
+	</body>
 </html>
 ```
 
@@ -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
@@ -14,6 +14,8 @@
 
 <body>
     <input type="file" id="file-input">
+    <br />
+    <p id="notification">Check out the <a href="https://github.com/AnweshGangula/ifcjs-viewer">following repository</a> for additional features</p>
     <div id="viewer-container"></div>
     <script src="./bundle.js"></script>
 </body>

diff --git 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;
 }