@team-geospan/struct3d 1.0.5 → 1.0.6

package/docs/src/pages/demo.jsx

@@ -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/draw.js

@@ -214,6 +214,42 @@ export function createReferences(scene, groundColor = 0x315d0a) {
   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

@@ -28,6 +28,7 @@ import {
   clearScene,
   createFacets,
   createLines,
+  createAccessories,
   createReferences,
 } from "./draw";
 
@@ -124,6 +125,11 @@ const renderModel = (
     scene.add(line);
   });
 
+  const pois = createAccessories(collection, baseElevation);
+  pois.forEach((poi) => {
+    scene.add(poi);
+  });
+
   const center = new THREE.Vector3();
   boundingBox.getCenter(center);
 
@@ -251,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],
@@ -267,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;
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-geospan/struct3d",
-  "version": "1.0.5",
+  "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",