npm - @team-geospan/struct3d - Versions diffs - 1.0.4 → 1.0.6 - Mend

@team-geospan/struct3d 1.0.4 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/docs/src/pages/demo.jsx +6 -3
package/lib/defaults.js +5 -0
package/lib/draw.js +38 -2
package/lib/index.js +37 -10
package/package.json +2 -1
package/docs/public/planar.json +0 -465
package/team-geospan-struct3d-1.0.3.tgz +0 -0
package/team-geospan-struct3d-1.0.4.tgz +0 -0

package/docs/src/pages/demo.jsx CHANGED Viewed

@@ -40,15 +40,18 @@ function SelectedInfo({ structureCollection, selectedId }) {
   const [structureIndex, elementId] = selectedId.split("-");
   const structure = structureCollection.structures[parseInt(structureIndex)];
-  let unitLabel = "sq. m.";
+  let unitLabel = "";
   let value = 0.0;
   if (structure.edges[elementId]) {
     // use as edge
     unitLabel = "m.";
     value = structure.edges[elementId].properties.length;
-  } else {
-    // assume a surface
+  } else if (structure.surfaces[elementId]) {
+    // use as surface
+    unitLabel = "sq. m.";
     value = structure.surfaces[elementId].properties.area;
+  } else if (structure.points[elementId]) {
+    value = structure.points[elementId].label;
   }
   return (

package/lib/defaults.js CHANGED Viewed

@@ -20,3 +20,8 @@ export const DEFAULT_EDGE_COLORS = {
   fance: "#a97bc2",
   chimney: "#5b517d",
 };
+export const DEFAULT_SCENE_THEME = {
+  sky: "#CDEBF7",
+  ground: 0x315d0a,
+};

package/lib/draw.js CHANGED Viewed

@@ -195,10 +195,10 @@ export function createFacets(structureCollection, baseElevation, facetColors) {
   return meshes;
 }
-export function createReferences(scene) {
+export function createReferences(scene, groundColor = 0x315d0a) {
   const floorGeom = new THREE.PlaneGeometry(1000, 1000);
   const floorMaterial = new THREE.MeshPhongMaterial({
-    color: 0x315d0a,
+    color: groundColor,
     side: THREE.DoubleSide,
   });
   const floorMesh = new THREE.Mesh(floorGeom, floorMaterial);
@@ -214,6 +214,42 @@ export function createReferences(scene) {
   scene.add(gridHelper);
 }
+export function createAccessories(structureCollection, baseElevation) {
+  const [x0, y0, minz] = getAnchor(structureCollection);
+  const points = structureCollection.structures[0].points;
+  const pois = structureCollection.structures.flatMap((structure, stIdx) => {
+    return Object.keys(structure.surfaces).flatMap((surfaceId) => {
+      const surface = structure.surfaces[surfaceId];
+      const poiIDs = surface.properties?.accessories || [];
+      return poiIDs.map((poiID) => {
+        const pinGeom = new THREE.SphereGeometry(0.3, 32, 32);
+        const poiColor = points[poiID].color;
+        const poiLabel = points[poiID].label;
+        const material = new THREE.MeshBasicMaterial({
+          color: poiColor,
+        });
+        const pin = new THREE.Mesh(pinGeom, material);
+        const point = points[poiID].coordinates;
+        const coords = [
+          point[0] - x0,
+          point[2] - minz + baseElevation,
+          y0 - point[1],
+        ];
+        pin.position.fromArray(coords);
+        pin.userData = {
+          id: `${stIdx}-${poiID}`,
+          layer: "accessories",
+          label: poiLabel,
+          color: poiColor,
+        };
+        return pin;
+      });
+    });
+  });
+  return pois;
+}
 export function addLights(scene, center, bounds) {
   const intensity = 5000;
   const ambient = new THREE.AmbientLight(0xffffff);

package/lib/index.js CHANGED Viewed

@@ -21,12 +21,14 @@ import { toMercator } from "@turf/projection";
 import PropTypes from "prop-types";
 import * as THREE from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls";
+import { DEFAULT_SCENE_THEME } from "./defaults";
 import {
   addLights,
   clearScene,
   createFacets,
   createLines,
+  createAccessories,
   createReferences,
 } from "./draw";
@@ -39,6 +41,7 @@ const setupScene = (
   rendererRef,
   orbitRef,
   fieldOfView,
+  skyColor = THREED_SKY_COLOR,
 ) => {
   const [width, height] = [
     divRef.current.offsetWidth,
@@ -49,7 +52,7 @@ const setupScene = (
   const scene = new THREE.Scene();
   sceneRef.current = scene;
-  scene.background = new THREE.Color(THREED_SKY_COLOR);
+  scene.background = new THREE.Color(skyColor);
   scene.fog = new THREE.Fog(scene.background, 1, 5000);
   const camera = new THREE.PerspectiveCamera(
@@ -89,6 +92,7 @@ const renderModel = (
   cameraRef,
   orbitRef,
   fieldOfView,
+  groundColor = 0x315d0a,
 ) => {
   // calculate the spatial extents of the meshes
   const boundingBox = new THREE.Box3();
@@ -121,13 +125,18 @@ const renderModel = (
     scene.add(line);
   });
+  const pois = createAccessories(collection, baseElevation);
+  pois.forEach((poi) => {
+    scene.add(poi);
+  });
   const center = new THREE.Vector3();
   boundingBox.getCenter(center);
   const bounds = new THREE.Vector3();
   boundingBox.getSize(bounds);
-  createReferences(scene, center, bounds);
+  createReferences(scene, groundColor);
   addLights(scene, center, bounds);
@@ -150,6 +159,7 @@ export default function StructureThreeD({
   selectionColor = "#d4af38",
   facetColors = DEFAULT_FACET_COLORS,
   edgeColors = DEFAULT_EDGE_COLORS,
+  sceneTheme = DEFAULT_SCENE_THEME,
 }) {
   const baseElevation = 10;
   const fieldOfView = 70;
@@ -158,6 +168,8 @@ export default function StructureThreeD({
   const cameraRef = useRef(null);
   const orbitRef = useRef(null);
   const rendererRef = useRef(null);
+  const skyColor = sceneTheme.sky;
+  const groundColor = sceneTheme.ground;
   const collection = useMemo(() => {
     // check the projection of the structures and put them into webmerc
@@ -205,7 +217,12 @@ export default function StructureThreeD({
           rendererRef,
           orbitRef,
           fieldOfView,
+          skyColor,
         );
+      } else {
+        // update colors
+        sceneRef.current.background = new THREE.Color(skyColor);
+        sceneRef.current.fog = new THREE.Fog(skyColor, 1, 5000);
       }
       clearScene(sceneRef.current);
@@ -219,9 +236,10 @@ export default function StructureThreeD({
         cameraRef,
         orbitRef,
         fieldOfView,
+        groundColor,
       );
     }
-  }, [collection, selectionColor]);
+  }, [collection, selectionColor, skyColor, groundColor, sceneTheme]);
   const handleClick = useCallback(
     (evt) => {
@@ -239,12 +257,12 @@ export default function StructureThreeD({
         true,
       );
       const ids = intersects
-        .map((f) => f.object.userData)
-        .map((f) => f.id)
+        .map((f) => f.object.userData.id)
         // ensure the object has an ID
         .filter((id) => !!id);
       if (onClick) {
-        onClick(ids);
+        // only return the closest intersected object
+        onClick(ids.slice(0, 1));
       }
     },
     [onClick],
@@ -255,10 +273,18 @@ export default function StructureThreeD({
       sceneRef.current.traverse((object) => {
         // ensure the object has a material set and the userData has our layer specified
         if (object.material && Boolean(object.userData?.layer)) {
-          let color =
-            object.userData.layer === "facets"
-              ? facetColors[object.userData?.material || "asphalt"]
-              : edgeColors[object.userData.kind] || "#00000000";
+          let color = null;
+          switch (object.userData.layer) {
+            case "accessories":
+              color = object.userData?.color || "#FFF";
+              break;
+            case "facets":
+              color = facetColors[object.userData?.material || "asphalt"];
+              break;
+            case "edges":
+              color = edgeColors[object.userData.kind] || "#00000000";
+              break;
+          }
           if (selectedIds.includes(object.userData?.id)) {
             color = selectionColor;
           }
@@ -311,4 +337,5 @@ StructureThreeD.propTypes = {
   selectionColor: PropTypes.string,
   facetColors: PropTypes.object,
   edgeColors: PropTypes.object,
+  sceneTheme: PropTypes.object,
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@team-geospan/struct3d",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "The 3D Viewer component for StructuresJSON models.",
   "license": "Apache-2.0",
   "author": "GEOSPAN Corp and Contributors",
@@ -37,6 +37,7 @@
     }
   },
   "dependencies": {
+    "@team-geospan/structuresio": "^0.0.7",
     "@turf/projection": "^6.5.0",
     "earcut": "^3.0.1",
     "react-resize-detector": "^12.0.2",

package/docs/public/planar.json DELETED Viewed

@@ -1,465 +0,0 @@
-{
-  "kind": "structurecollection",
-  "structures": [
-    {
-      "kind": "structure",
-      "projection": "planar",
-      "points": {
-        "c101": {
-          "kind": "corner",
-          "coordinates": [
-            -0.0,
-            0.101,
-            3.370403808593778
-          ]
-        },
-        "c102": {
-          "kind": "corner",
-          "coordinates": [
-            0.129,
-            11.677,
-            3.370403808593778
-          ]
-        },
-        "c103": {
-          "kind": "corner",
-          "coordinates": [
-            4.579,
-            7.122,
-            5.351403808593773
-          ]
-        },
-        "c104": {
-          "kind": "corner",
-          "coordinates": [
-            4.55,
-            4.546,
-            5.351403808593773
-          ]
-        },
-        "c105": {
-          "kind": "corner",
-          "coordinates": [
-            9.129,
-            11.576,
-            3.370403808593778
-          ]
-        },
-        "c106": {
-          "kind": "corner",
-          "coordinates": [
-            9.0,
-            0.0,
-            3.370403808593778
-          ]
-        },
-        "ground": {
-          "kind": "ground",
-          "coordinates": [
-            -0.0,
-            0.0,
-            0.00040380859377364686
-          ]
-        }
-      },
-      "edges": {
-        "e101": {
-          "kind": "eave",
-          "points": [
-            "c101",
-            "c102"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 11.577
-          }
-        },
-        "e102": {
-          "kind": "hip",
-          "points": [
-            "c102",
-            "c103"
-          ],
-          "properties": {
-            "length": 6.669
-          }
-        },
-        "e108": {
-          "kind": "eave",
-          "points": [
-            "c102",
-            "c105"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 9.001
-          }
-        },
-        "e103": {
-          "kind": "hip",
-          "points": [
-            "c104",
-            "c101"
-          ],
-          "properties": {
-            "length": 6.663
-          }
-        },
-        "e107": {
-          "kind": "hip",
-          "points": [
-            "c104",
-            "c106"
-          ],
-          "properties": {
-            "length": 6.663
-          }
-        },
-        "e104": {
-          "kind": "ridge",
-          "points": [
-            "c103",
-            "c104"
-          ],
-          "properties": {
-            "length": 2.576
-          }
-        },
-        "e105": {
-          "kind": "eave",
-          "points": [
-            "c105",
-            "c106"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 11.577
-          }
-        },
-        "e106": {
-          "kind": "hip",
-          "points": [
-            "c105",
-            "c103"
-          ],
-          "properties": {
-            "length": 6.669
-          }
-        },
-        "e109": {
-          "kind": "eave",
-          "points": [
-            "c106",
-            "c101"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 9.001
-          }
-        }
-      },
-      "surfaces": {
-        "surface1": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e101",
-              "e102",
-              "e103",
-              "e104"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 5,
-            "area": 34.799
-          }
-        },
-        "surface2": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e105",
-              "e106",
-              "e107",
-              "e104"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 5,
-            "area": 34.799
-          }
-        },
-        "surface3": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e108",
-              "e106",
-              "e102"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 5,
-            "area": 22.149
-          }
-        },
-        "surface4": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e109",
-              "e107",
-              "e103"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 5,
-            "area": 22.112
-          }
-        }
-      },
-      "components": {
-        "roof": {
-          "surfaces": [
-            "surface1",
-            "surface2",
-            "surface3",
-            "surface4"
-          ]
-        }
-      }
-    },
-    {
-      "kind": "structure",
-      "projection": "planar",
-      "points": {
-        "c107": {
-          "kind": "corner",
-          "coordinates": [
-            15.606,
-            4.39,
-            4.419403808593756
-          ]
-        },
-        "c108": {
-          "kind": "corner",
-          "coordinates": [
-            19.581,
-            0.44,
-            2.5904038085937486
-          ]
-        },
-        "c109": {
-          "kind": "corner",
-          "coordinates": [
-            11.656,
-            0.415,
-            2.5904038085937486
-          ]
-        },
-        "c110": {
-          "kind": "corner",
-          "coordinates": [
-            19.556,
-            8.365,
-            2.5904038085937486
-          ]
-        },
-        "c111": {
-          "kind": "corner",
-          "coordinates": [
-            11.631,
-            8.34,
-            2.5904038085937486
-          ]
-        },
-        "ground": {
-          "kind": "ground",
-          "coordinates": [
-            11.631,
-            0.415,
-            0.00040380859377364686
-          ]
-        }
-      },
-      "edges": {
-        "e110": {
-          "kind": "eave",
-          "points": [
-            "c108",
-            "c109"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 7.926
-          }
-        },
-        "e112": {
-          "kind": "hip",
-          "points": [
-            "c108",
-            "c107"
-          ],
-          "properties": {
-            "length": 5.895
-          }
-        },
-        "e111": {
-          "kind": "hip",
-          "points": [
-            "c107",
-            "c109"
-          ],
-          "properties": {
-            "length": 5.895
-          }
-        },
-        "e113": {
-          "kind": "eave",
-          "points": [
-            "c110",
-            "c108"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 7.926
-          }
-        },
-        "e114": {
-          "kind": "hip",
-          "points": [
-            "c110",
-            "c107"
-          ],
-          "properties": {
-            "length": 5.895
-          }
-        },
-        "e115": {
-          "kind": "eave",
-          "points": [
-            "c110",
-            "c111"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 7.926
-          }
-        },
-        "e116": {
-          "kind": "hip",
-          "points": [
-            "c111",
-            "c107"
-          ],
-          "properties": {
-            "length": 5.895
-          }
-        },
-        "e117": {
-          "kind": "eave",
-          "points": [
-            "c111",
-            "c109"
-          ],
-          "properties": {
-            "attachments": [
-              "gutter"
-            ],
-            "length": 7.926
-          }
-        }
-      },
-      "surfaces": {
-        "surface5": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e110",
-              "e111",
-              "e112"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 6,
-            "area": 17.296
-          }
-        },
-        "surface6": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e113",
-              "e112",
-              "e114"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 6,
-            "area": 17.296
-          }
-        },
-        "surface7": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e115",
-              "e116",
-              "e114"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 6,
-            "area": 17.295
-          }
-        },
-        "surface8": {
-          "kind": "roof",
-          "edges": [
-            [
-              "e117",
-              "e111",
-              "e116"
-            ]
-          ],
-          "properties": {
-            "material": "asphalt",
-            "pitch": 6,
-            "area": 17.295
-          }
-        }
-      },
-      "components": {
-        "roof": {
-          "surfaces": [
-            "surface5",
-            "surface6",
-            "surface7",
-            "surface8"
-          ]
-        }
-      }
-    }
-  ]
-}

package/team-geospan-struct3d-1.0.3.tgz DELETED Viewed

Binary file

package/team-geospan-struct3d-1.0.4.tgz DELETED Viewed

Binary file