feat: progress making library work only with three.js coords

Author: agviegas

packages/clay/src/core/Elements/Element/index.ts

@@ -204,12 +204,7 @@ export abstract class ClayElement extends ClayObject3D {
       placement.RelativePlacement,
     ) as IFC.IfcAxis2Placement3D;
 
-    IfcUtils.setAxis2Placement(
-      this.model,
-      relPlacement,
-      this.position,
-      this.rotation,
-    );
+    IfcUtils.setAxis2Placement(this.model, relPlacement, this.transformation);
 
     this.model.set(this.attributes);
   }

packages/clay/src/core/Object3D/index.ts

@@ -6,45 +6,7 @@ import { ClayObject } from "../Object";
  */
 export abstract class ClayObject3D extends ClayObject {
   /**
-   * Position of this element in 3D space.
+   * Object representing the transformation of the object in 3D space.
    */
-  position = new THREE.Vector3();
-
-  /**
-   * Rotation of this element in 3D space.
-   */
-  rotation = new THREE.Euler();
-
-  /**
-   * Gets the transform of this object as a THREE.Matrix4.
-   */
-  getTransform() {
-    const temp = new THREE.Object3D();
-    temp.position.copy(this.position);
-    temp.rotation.copy(this.rotation);
-    temp.updateMatrix();
-    return temp.matrix;
-  }
-
-  /**
-   * Sets the transform of this object given a THREE.Matrix4.
-   */
-  setTransform(transform: THREE.Matrix4) {
-    const quat = new THREE.Quaternion();
-    const scale = new THREE.Vector3();
-    transform.decompose(this.position, quat, scale);
-    this.rotation.setFromQuaternion(quat);
-  }
-
-  /**
-   * Applies the transform of this object given a THREE.Matrix4.
-   */
-  applyTransform(transform: THREE.Matrix4) {
-    const currentTransform = this.getTransform();
-    currentTransform.multiply(transform);
-    const quat = new THREE.Quaternion();
-    const scale = new THREE.Vector3();
-    currentTransform.decompose(this.position, quat, scale);
-    this.setTransform(currentTransform);
-  }
+  transformation = new THREE.Object3D();
 }

packages/clay/src/elements/CurtainWalls/SimpleCurtainWall/index.ts

@@ -310,7 +310,7 @@ export class SimpleCurtainWallType extends StaticClayElementType<SimpleCurtainWa
         if (currentColumn === 0) {
           const sideAMember = this.sideAMembers[currentRow];
           sideAMember.body.profile.dimension.x = this.frameWidth;
-          sideAMember.body.profile.position.y = memberWidth / 2;
+          sideAMember.body.profile.transformation.position.y = memberWidth / 2;
           sideAMember.body.depth = plateHeight;
           sideAMember.body.position.x = this.startPoint.x;
           sideAMember.body.position.y = this.startPoint.y;
@@ -391,7 +391,8 @@ export class SimpleCurtainWallType extends StaticClayElementType<SimpleCurtainWa
 
         if (currentColumn === this.numberOfColumns - 1) {
           const sideBMember = this.sideBMembers[currentRow];
-          sideBMember.body.profile.position.y = -1 * (memberWidth / 2);
+          sideBMember.body.profile.transformation.position.y =
+            -1 * (memberWidth / 2);
           sideBMember.body.profile.dimension.x = this.frameWidth;
           sideBMember.body.depth = plateHeight;
           sideBMember.body.position.x = this.endPoint.x;
@@ -440,11 +441,11 @@ export class SimpleCurtainWallType extends StaticClayElementType<SimpleCurtainWa
 
         if (currentColumn === 0 || currentColumn === this.numberOfColumns - 1) {
           plate.body.profile.dimension.y = plateWidth - memberWidth / 2;
-          plate.body.profile.position.y = memberWidth / 4;
+          plate.body.profile.transformation.position.y = memberWidth / 4;
         }
 
         if (currentColumn === this.numberOfColumns - 1) {
-          plate.body.profile.position.y = -memberWidth / 4;
+          plate.body.profile.transformation.position.y = -memberWidth / 4;
         }
 
         plate.body.profile.update();

packages/clay/src/elements/Members/SimpleMember/src/index.ts

@@ -27,7 +27,7 @@ export class SimpleMember extends ClayElement {
     const profile = new RectangleProfile(model);
     profile.dimension.x = this.depth;
     profile.dimension.y = this.width;
-    profile.position = new THREE.Vector3(0, 0, 5);
+    profile.transformation.position.set(0, 0, 5);
     profile.update();
 
     this.body = new Extrusion(model, profile);

packages/clay/src/elements/Plates/SimplePlate/src/index.ts

@@ -1,6 +1,5 @@
 import { IFC4X3 as IFC } from "web-ifc";
 import { v4 as uuidv4 } from "uuid";
-import * as THREE from "three";
 import { ClayElement, Model } from "../../../../core";
 
 import { SimplePlateType } from "..";
@@ -24,7 +23,7 @@ export class SimplePlate extends ClayElement {
     profile.dimension.x = 0.0833333333333333;
     profile.dimension.y = 1.9238;
     profile.dimension.z = 1;
-    profile.position = new THREE.Vector3(0, 0, 0);
+    profile.transformation.position.set(0, 0, 0);
     profile.update();
 
     this.body = new Extrusion(model, profile);

packages/clay/src/elements/Walls/SimpleWall/example.ts

@@ -29,6 +29,11 @@ world.scene.three.background = null;
 const grids = components.get(OBC.Grids);
 grids.create(world);
 
+const axis = new THREE.AxesHelper();
+axis.material.depthTest = false;
+axis.material.transparent = true;
+world.scene.three.add(axis);
+
 const model = new CLAY.Model();
 model.wasm = { path: "https://unpkg.com/[email protected]/", absolute: true };
 await model.init();
@@ -40,121 +45,23 @@ const simpleWallType = new CLAY.SimpleWallType(model);
 
 const wall1 = simpleWallType.addInstance();
 world.scene.three.add(...wall1.meshes);
-wall1.startPoint = new THREE.Vector2(0, 0);
-wall1.endPoint = new THREE.Vector2(1, 0);
+// wall1.startPoint = new THREE.Vector2(0, 0);
+// wall1.endPoint = new THREE.Vector2(1, 0);
 wall1.update(true);
-wall1.meshes[0].setColorAt(0, new THREE.Color(1, 0, 0));
-
-const wall2 = simpleWallType.addInstance();
-world.scene.three.add(...wall2.meshes);
-wall2.startPoint = new THREE.Vector2(0, 0);
-wall2.endPoint = new THREE.Vector2(0, 1);
-wall2.update(true);
+// wall1.meshes[0].setColorAt(0, new THREE.Color(1, 0, 0));
 
 site.children.add(wall1.attributes.expressID);
-site.children.add(wall2.attributes.expressID);
-
-const halfSpace = new CLAY.HalfSpace(model);
-wall1.body.addSubtraction(halfSpace);
-
-const mesh = new THREE.Mesh(
-  new THREE.PlaneGeometry(2, 2, 2),
-  new THREE.MeshLambertMaterial({
-    color: "blue",
-    transparent: true,
-    opacity: 0.6,
-    side: 2,
-  }),
-);
-
-world.scene.three.add(mesh);
-
-mesh.position.set(1, 1, 0);
-mesh.lookAt(0.5, 0, 0.5);
-
-const offset = 0.5;
-
-function updatePlane() {
-  const p = CLAY.MathUtils.toThreeCoords(wall1.midPoint);
-  const d = CLAY.MathUtils.toThreeCoords(wall1.direction);
-  d.multiplyScalar(offset);
-  p.add(d);
-  mesh.position.copy(p);
-  const start = CLAY.MathUtils.toThreeCoords(wall1.startPoint3D);
-  mesh.lookAt(start);
-}
-
-// updatePlane();
-
-// halfSpace.rotation.y = Math.PI / 2;
-// halfSpace.position.x = 0.5;
-
-console.log(halfSpace.rotation);
-console.log(mesh.rotation);
-
-// halfSpace.position.copy(CLAY.MathUtils.toIfcCoords(mesh.position));
-// halfSpace.rotation.copy(CLAY.MathUtils.toIfcCoords(mesh.rotation));
-
-function updateHalfSpace() {
-  halfSpace.rotation.x = mesh.rotation.x - Math.PI / 2;
-  halfSpace.rotation.y = -mesh.rotation.y;
-  halfSpace.rotation.z = mesh.rotation.z - Math.PI / 2;
-
-  const midPoint = CLAY.MathUtils.toThreeCoords(wall1.midPoint);
-  const position = mesh.position.clone().sub(midPoint);
-  const truePosition = CLAY.MathUtils.toIfcCoords(position);
-  halfSpace.position.copy(truePosition);
-
-  halfSpace.update();
-  wall1.update(true);
-}
-
-window.addEventListener("keydown", (e) => {
-  if (e.code === "KeyA") {
-    mesh.rotation.x += (Math.PI / 180) * 5;
-    updateHalfSpace();
-  }
-  if (e.code === "KeyS") {
-    mesh.rotation.y += (Math.PI / 180) * 5;
-    updateHalfSpace();
-  }
-  if (e.code === "KeyD") {
-    mesh.rotation.z += (Math.PI / 180) * 5;
-    updateHalfSpace();
-  }
-});
-
-updateHalfSpace();
-
-// simpleWallType.addCorner({
-//   wall1,
-//   wall2,
-//   to: "interior",
-//   cut: "interior",
-//   cutDirection: "interior",
-//   priority: "end",
-// });
-//
-// simpleWallType.addCorner({
-//   wall1: wall2,
-//   wall2: wall1,
-//   to: "interior",
-//   cut: "exterior",
-//   cutDirection: "interior",
-//   priority: "start",
-// });
-
-await simpleWallType.updateCorners();
 
 world.camera.controls.fitToSphere(wall1.meshes[0], false);
 
-// const simpleOpeningType = new CLAY.SimpleOpeningType(model);
-// const opening = simpleOpeningType.addInstance();
-// scene.add(...opening.meshes);
-// console.log(simpleOpeningType);
+const simpleOpeningType = new CLAY.SimpleOpeningType(model);
+const opening = simpleOpeningType.addInstance();
+world.scene.three.add(...opening.meshes);
+console.log(simpleOpeningType);
+opening.transformation.position.x += 1;
 
-// await wall1.addSubtraction(opening, true);
-// wall1.update(true);
+await wall1.addSubtraction(opening, true);
+wall1.update(true);
 
 // Stats
 
@@ -183,17 +90,15 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
         ) => {
           wall1.startPoint.x = event.target.value;
           wall1.update(true);
-          updatePlane();
-          simpleWallType.updateCorners();
+          // simpleWallType.updateCorners();
         }}"></bim-number-input>
 
-        <bim-number-input slider step="0.1" label="Start Y" vertical="true" value="${wall1.startPoint.y}" @change="${(
+        <bim-number-input slider step="0.1" label="Start Z" vertical="true" value="${wall1.startPoint.y}" @change="${(
           event: any,
         ) => {
           wall1.startPoint.y = event.target.value;
           wall1.update(true);
-          updatePlane();
-          simpleWallType.updateCorners();
+          // simpleWallType.updateCorners();
         }}"></bim-number-input>
 
       </div>
@@ -205,17 +110,15 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
         ) => {
           wall1.endPoint.x = event.target.value;
           wall1.update(true);
-          updatePlane();
-          simpleWallType.updateCorners();
+          // simpleWallType.updateCorners();
         }}"></bim-number-input>
 
-        <bim-number-input slider step="0.1" label="End Y" vertical="true" value="${wall1.endPoint.y}" @change="${(
+        <bim-number-input slider step="0.1" label="End Z" vertical="true" value="${wall1.endPoint.y}" @change="${(
           event: any,
         ) => {
           wall1.endPoint.y = event.target.value;
           wall1.update(true);
-          updatePlane();
-          simpleWallType.updateCorners();
+          // simpleWallType.updateCorners();
         }}"></bim-number-input>
 
 
@@ -224,38 +127,32 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
       <bim-number-input slider step="0.05" label="Elevation" value="${wall1.elevation}" @change="${(
         event: any,
       ) => {
-        opening.position.z = event.target.value;
-        opening.update();
-        wall1.elevation = event.target.value;
+        wall1.transformation.position.y = event.target.value;
         wall1.update(true);
-        updatePlane();
-        simpleWallType.updateCorners();
       }}"></bim-number-input>
 
       <bim-number-input slider step="0.01" label="Offset" value="${wall1.offset}" @change="${(
         event: any,
       ) => {
         wall1.offset = event.target.value;
         wall1.update(true);
-        wall2.offset = event.target.value;
-        wall2.update(true);
-        simpleWallType.updateCorners();
+        // simpleWallType.updateCorners();
       }}"></bim-number-input>
 
       <bim-number-input slider step="0.05" label="Thickness" value="${simpleWallType.width}" @change="${(
         event: any,
       ) => {
         simpleWallType.width = event.target.value;
         simpleWallType.update(true);
-        simpleWallType.updateCorners();
+        // simpleWallType.updateCorners();
       }}"></bim-number-input>
 
       <bim-number-input slider step="0.05" label="Height" value="${wall1.height}" @change="${(
         event: any,
       ) => {
         wall1.height = event.target.value;
         wall1.update(true);
-        simpleWallType.updateCorners();
+        // simpleWallType.updateCorners();
       }}"></bim-number-input>
 
       </bim-panel-section>

packages/clay/src/elements/Walls/SimpleWall/src/simple-wall-cornerer.ts

@@ -1,7 +1,6 @@
 import * as THREE from "three";
 import { SimpleWall, WallEndPointType, WallPlaneType } from "./simple-wall";
 import { HalfSpace } from "../../../../geometries";
-import { MathUtils } from "../../../../utils";
 
 export interface WallCornerConfig {
   wall1: SimpleWall;
@@ -66,7 +65,7 @@ export class SimpleWallCornerer {
       return;
     }
 
-    const { plane, p1, p2, p3 } = wall1.getPlane(to);
+    const { plane, p1 } = wall1.getPlane(to);
     if (plane === null) {
       // Malformed wall (e.g. zero length)
       return;
@@ -147,7 +146,7 @@ export class SimpleWallCornerer {
       // temp.updateMatrix();
 
       const temp3 = new THREE.Object3D();
-      const transform = wall2.getTransform();
+      const transform = wall2.transformation.matrix.clone();
       transform.invert();
 
       temp3.applyMatrix4(transform);
@@ -172,8 +171,8 @@ export class SimpleWallCornerer {
       // halfSpace.rotation.y = Math.PI / 2;
       // halfSpace.position.x = 0.25;
 
-      halfSpace.rotation.copy(temp.rotation);
-      halfSpace.position.copy(temp.position);
+      halfSpace.transformation.rotation.copy(temp.rotation);
+      halfSpace.transformation.position.copy(temp.position);
 
       halfSpace.update();
     }