Merge pull request #2 from CristianSotomayorGit/feat/enable-creation-…

…of-curtain-walls feat: enable creation of curtain walls
ThatOpen · May 10, 2024 · a5068af · a5068af
2 parents 906c8ce + 14498db
commit a5068af
Show file tree

Hide file tree

Showing 14 changed files with 996 additions and 0 deletions.
diff --git a/src/elements/CurtainWalls/SimpleCurtainWall/index.html b/src/elements/CurtainWalls/SimpleCurtainWall/index.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="../../../../resources/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="../../../../resources/favicon.ico"
+    />
+    <title>Tools Component</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+
+      .full-screen {
+        width: 100vw;
+        height: 100vh;
+        position: relative;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="full-screen" id="container"></div>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://unpkg.com/three@0.160.1/build/three.module.js",
+          "openbim-components": "https://thatopen.github.io/engine_components/resources/openbim-components.js",
+          "openbim-clay": "../../../../resources/openbim-clay.js",
+          "web-ifc": "https://unpkg.com/web-ifc@0.0.51/web-ifc-api.js",
+          "stats.js/src/Stats.js": "https://unpkg.com/stats-js@1.0.1/src/Stats.js",
+          "three/examples/jsm/libs/lil-gui.module.min": "https://unpkg.com/three@0.160.1/examples/jsm/libs/lil-gui.module.min.js",
+          "three/examples/jsm/controls/TransformControls": "https://unpkg.com/three@0.135.0/examples/jsm/controls/TransformControls.js"
+        }
+      }
+    </script>
+  </body>
+</html>
+<script type="module">
+  import * as THREE from "three";
+  import * as OBC from "openbim-components";
+  import * as CLAY from "openbim-clay";
+  import * as WEBIFC from "web-ifc";
+
+  import Stats from "stats.js/src/Stats.js";
+  import * as dat from "three/examples/jsm/libs/lil-gui.module.min";
+  import { TransformControls } from "three/examples/jsm/controls/TransformControls";
+
+  const container = document.getElementById("container");
+
+  const components = new OBC.Components();
+
+  components.scene = new OBC.SimpleScene(components);
+  components.renderer = new OBC.PostproductionRenderer(components, container);
+  components.camera = new OBC.SimpleCamera(components);
+  components.raycaster = new OBC.SimpleRaycaster(components);
+
+  components.init();
+
+  components.renderer.postproduction.enabled = true;
+
+  const scene = components.scene.get();
+
+  components.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+
+  components.scene.setup();
+
+  const grid = new OBC.SimpleGrid(components, new THREE.Color(0x666666));
+
+  const customEffects = components.renderer.postproduction.customEffects;
+  customEffects.excludedMeshes.push(grid.get());
+
+  const axesHelper = new THREE.AxesHelper(1);
+  scene.add(axesHelper);
+
+  // IFC API
+
+  const model = new CLAY.Model();
+  model.ifcAPI.SetWasmPath("https://unpkg.com/web-ifc@0.0.50/", true);
+  await model.init();
+
+  const curtainWallType = new CLAY.SimpleCurtainWallType(model, 5, 5);
+
+  curtainWallType.height = 5
+  curtainWallType.startPoint.x = -10;
+  curtainWallType.startPoint.y = 0;
+  curtainWallType.endPoint.x = 0;
+  curtainWallType.endPoint.y = 10;
+
+  curtainWallType.update(true);
+
+  const curtainWall = curtainWallType.addInstance();
+
+  scene.add(...curtainWall.meshes);
+
+  const gui = new dat.GUI();
+
+  gui
+    .add(curtainWallType.startPoint, "x")
+    .name("Start X")
+    .min(-10)
+    .max(10)
+    .step(1)
+    .onChange(() => {
+      curtainWallType.update(true);
+    });
+
+  gui
+    .add(curtainWallType.startPoint, "y")
+    .name("Start Y")
+    .min(-10)
+    .max(10)
+    .step(1)
+    .onChange(() => {
+      curtainWallType.update(true);
+    });
+
+
+  gui
+    .add(curtainWallType.endPoint, "x")
+    .name("End X")
+    .min(-10)
+    .max(10)
+    .step(1)
+    .onChange(() => {
+      curtainWallType.update(true);
+    });
+
+  gui
+    .add(curtainWallType.endPoint, "y")
+    .name("End Y")
+    .min(-10)
+    .max(10)
+    .step(1)
+    .onChange(() => {
+      curtainWallType.update(true);
+    });
+
+  gui
+    .add(curtainWallType, "height")
+    .name("Height")
+    .min(1)
+    .max(10)
+    .step(1)
+    .onChange(() => {
+      curtainWallType.update(true);
+    });
+
+    gui.add(curtainWallType, "frameWidth").name("Frame Width").min(0.127).max(1).step(0.01).onChange(() => {
+      curtainWallType.update(true);
+  });
+
+</script>