feat: add offset to walls

ThatOpen · Oct 1, 2024 · 7a26fa2 · 7a26fa2
1 parent 58cfc7a
commit 7a26fa2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/packages/clay/src/elements/Walls/SimpleWall/example.ts b/packages/clay/src/elements/Walls/SimpleWall/example.ts
@@ -148,6 +148,16 @@ const panel = BUI.Component.create<BUI.PanelSection>(() => {
         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();
+      }}"></bim-number-input>
+      
       <bim-number-input slider step="0.05" label="Thickness" value="${simpleWallType.width}" @change="${(
         event: any,
       ) => {

diff --git a/packages/clay/src/elements/Walls/SimpleWall/src/simple-wall-clipping-planes.ts b/packages/clay/src/elements/Walls/SimpleWall/src/simple-wall-clipping-planes.ts
@@ -55,22 +55,24 @@ export class SimpleWallClippingPlanes {
   }
 
   update() {
-    const offset = this._wall.type.width / 2;
+    const width = this._wall.type.width / 2;
 
     const temp = new THREE.Object3D();
 
     const downDirection = this._wall.normal;
     const upDirection = downDirection.clone().multiplyScalar(-1);
 
-    const downOffset = downDirection.clone().multiplyScalar(offset);
-    const downPoint = this._wall.startPoint3D.add(downOffset);
+    const offsetOffset = upDirection.clone().multiplyScalar(this._wall.offset);
 
-    const upOffset = upDirection.clone().multiplyScalar(offset);
-    const upPoint = this._wall.startPoint3D.add(upOffset);
+    const downOffset = downDirection.clone().multiplyScalar(width);
+    const downPoint = this._wall.startPoint3D.add(downOffset).add(offsetOffset);
+
+    const upOffset = upDirection.clone().multiplyScalar(width);
+    const upPoint = this._wall.startPoint3D.add(upOffset).add(offsetOffset);
 
     const { downDown, upDown, downUp, upUp } = this.list;
 
-    temp.position.copy(this._wall.startPoint3D);
+    temp.position.copy(this._wall.startPoint3D.add(offsetOffset));
     temp.lookAt(downPoint);
 
     downDown.position.copy(downPoint);

diff --git a/packages/clay/src/elements/Walls/SimpleWall/src/simple-wall.ts b/packages/clay/src/elements/Walls/SimpleWall/src/simple-wall.ts
@@ -29,6 +29,8 @@ export class SimpleWall extends ClayElement {
 
   endPoint = new THREE.Vector2(1, 0);
 
+  offset = 0;
+
   planes: SimpleWallClippingPlanes;
 
   private _nester = new SimpleWallNester(this);
@@ -108,6 +110,7 @@ export class SimpleWall extends ClayElement {
     const profile = this.body.profile;
     profile.dimension.x = this.length;
     profile.dimension.y = this.type.width;
+    profile.position.y = this.offset;
     profile.update();
 
     this.body.depth = this.height;
@@ -149,6 +152,8 @@ export class SimpleWall extends ClayElement {
   }
 
   getPlane(type: WallPlaneType = "center") {
+    const normal = this.normal;
+
     const p1 = this.startPoint3D;
     const p2 = this.endPoint3D;
     const p3 = p1.clone();
@@ -159,8 +164,15 @@ export class SimpleWall extends ClayElement {
       return null;
     }
 
+    const offsetCorrection = normal.clone();
+    offsetCorrection.multiplyScalar(-this.offset);
+
+    p1.add(offsetCorrection);
+    p2.add(offsetCorrection);
+    p3.add(offsetCorrection);
+
     if (type !== "center") {
-      const offset = this.normal;
+      const offset = normal.clone();
       const factor = type === "exterior" ? 1 : -1;
       const offsetAmount = (this.type.width / 2) * factor;
       offset.multiplyScalar(offsetAmount);