start using outline on hangar

src/building/NewBuilding.tsx

@@ -1,8 +1,12 @@
-import { identity, times } from "ramda";
-import React from "react";
+import { flatten, identity, times } from "ramda";
+import React, { useMemo } from "react";
 import {
+  BufferAttribute,
+  BufferGeometry,
   DoubleSide,
+  LineBasicMaterial,
   LineDashedMaterial,
+  LinePieces,
   LineSegments,
   MeshStandardMaterial,
 } from "three";
@@ -32,16 +36,61 @@ const linesMaterial = new LineDashedMaterial({
   clipShadows: true,
 });
 
+const hangarLineMaterial = new LineBasicMaterial({
+  color: "#53ADF9",
+  linewidth: 2,
+});
+
 const Module: React.FC<any> = ({ type, position, end = false }) => {
   const {
     geometry,
     edgesGeometry,
     endEdgesGeometry,
     endGeometry,
+    width: widthMM,
+    height: heightMM,
   } = crossSections[type];
 
+  const geo = useMemo(() => {
+    const width = widthMM / 1000;
+    const height = heightMM / 1000;
+    const vertices = [];
+    vertices.push([0, 0, 0]);
+    vertices.push([0, height, 0]);
+    vertices.push([0, 0, 1.2]);
+    vertices.push([0, height, 1.2]);
+
+    vertices.push([width, 0, 0]);
+    vertices.push([width, height, 0]);
+    vertices.push([width, 0, 1.2]);
+    vertices.push([width, height, 1.2]);
+
+    vertices.push([0, height, 0]);
+    vertices.push([width, height, 0]);
+
+    vertices.push([0, height, 1.2]);
+    vertices.push([width, height, 1.2]);
+
+    vertices.push([0, height, 0]);
+    vertices.push([0, height, 1.2]);
+
+    vertices.push([width, height, 0]);
+    vertices.push([width, height, 1.2]);
+
+    const g = new BufferGeometry();
+    g.setAttribute(
+      "position",
+      new BufferAttribute(new Float32Array(flatten(vertices)), 3)
+    );
+    return g;
+  }, [geometry]);
+
   return (
     <group position={position}>
+      <lineSegments
+        args={[geo, hangarLineMaterial, LinePieces]}
+        // ref={(e: LineSegments) => dashed && e?.computeLineDistances()}
+      />
       <mesh
         receiveShadow
         castShadow
@@ -76,8 +125,9 @@ const NewBuilding: React.FC<{ hangar: Hangar }> = React.memo(({ hangar }) => {
       // });
 
       return (
+        // k.startsWith(type) &&
         (k.startsWith(type) || k.startsWith("D1") || k.startsWith("E1")) &&
-        v.width === Math.round(wx * 1000)
+        v.clipWidth === Math.round(wx * 1000)
       );
     })
     .map(([k]) => k);
@@ -92,12 +142,12 @@ const NewBuilding: React.FC<{ hangar: Hangar }> = React.memo(({ hangar }) => {
       {times(identity, rows).map((_r) => {
         return (
           <>
-            <Module
+            {/* <Module
               key={`${_r}front`}
               position={[_r * 5.7, 0, -0.189]}
               type={allTypes[0]}
               end
-            />
+            /> */}
             {times(identity, cols).map((_z) => {
               count += 1;
               return (
@@ -108,12 +158,12 @@ const NewBuilding: React.FC<{ hangar: Hangar }> = React.memo(({ hangar }) => {
                 />
               );
             })}
-            <Module
+            {/* <Module
               key={`${_r}back`}
               position={[_r * 5.7, 0, cols * 1.2]}
               type={allTypes[allTypes.length - 1]}
               end
-            />
+            /> */}
           </>
         );
       })}

src/building/crossSections.ts

@@ -76,18 +76,22 @@ const crossSections = Object.entries(variants).reduce(
     for (let i = 1; i <= numVariants; i++) {
       let shape = shapes[type[0]];
 
-      let h = 9000;
-      if (type.startsWith("D")) h = 4600;
-      else if (type.startsWith("E")) h = 3600;
+      const { minX, maxX, minY, maxY } = bounds(shape);
+
+      let width = Math.abs(maxX - minX);
+      let height = Math.abs(maxY - minY);
+
+      if (type.startsWith("D")) height = 4600;
+      else if (type.startsWith("E")) height = 3600;
 
       const box: Point[] = [
         [boxCoords[i][0], 0],
-        [boxCoords[i][0], h],
-        [boxCoords[i][1], h],
+        [boxCoords[i][0], height],
+        [boxCoords[i][1], height],
         [boxCoords[i][1], 0],
       ];
 
-      if (h === 9000) shape = intersection([shape], [box])[0];
+      if (height > 8000) shape = intersection([shape], [box])[0];
 
       const holes = offset(-FRAME_WIDTH)([shape]);
 
@@ -96,17 +100,15 @@ const crossSections = Object.entries(variants).reduce(
         [box]
       );
 
-      const { minX, maxX, minY, maxY } = bounds(shape);
-      const width = Math.abs(maxX - minX);
-      const height = Math.abs(maxY - minY);
-
       const [gOutline, ...gHoles] = points.map((pts) =>
         pts.map(([x, y]) => [x / 1000, y / 1000])
       );
 
       const gShape = pointsToThreeShape(gOutline, gHoles);
       const position = [-width / 2000, 0, -grid("m").z / 2];
 
+      width = boxCoords[i][1] - boxCoords[i][0];
+
       const geometry = new ExtrudeBufferGeometry(gShape, extrudeSettings);
       const edgesGeometry = new EdgesGeometry(geometry);
 

src/hangar/shared.ts

@@ -3,7 +3,7 @@ import grid from "../shared/grid";
 
 export const { x: gridX, z: gridZ } = grid("m");
 
-export const gridY = 2.5;
+export const gridY = 8.7;
 
 // Pre-calculate the rotation Eulers for box faces
 

src/shared/materials.ts

@@ -8,15 +8,15 @@ export const wallGhostMaterial = new MeshPhongMaterial({
 });
 
 export const wallMaterial = new MeshPhongMaterial({
-  color: "#666",
-  opacity: 0.8,
+  color: "#53ADF9",
+  opacity: 0.03,
   transparent: true,
   side: DoubleSide,
 });
 
 export const wallMaterialHover = new MeshPhongMaterial({
-  color: "#F2BB05",
-  opacity: 0.8,
+  color: "#53ADF9",
+  opacity: 0.6,
   transparent: true,
   side: DoubleSide,
 });