Merge pull request #12 from 3DStreet/grid-state

add grid support to state

catalog.json

@@ -1,4 +1,20 @@
 [
+  {
+    "name": "cityhall",
+    "src": "src/models/cityhall/cityhall.gltf",
+    "bboxMin": [
+      -1.91792,
+      0.00707,
+      -1.92385
+    ],
+    "bboxMax": [
+      2.11712,
+      1.97267,
+      2.04856
+    ],
+    "dist": "dist/models/cityhall.glb",
+    "img": "dist/img/cityhall.jpg"
+  },
   {
     "name": "watertower",
     "src": "src/models/kaykit/watertower.gltf",

index.html

@@ -13,6 +13,7 @@
   xr-mode-ui="XRMode: ar"
   renderer="colorManagement: true;"
   load-catalog="source: #catalog"
+  background="color: #595959"
   >
     <a-assets>
       <a-asset-item id="catalog" src="./catalog.json"></a-asset-item>
@@ -110,24 +111,24 @@
 
     <!--  <a-entity id="skyMenuSlot" position="0 3 -3" scale="1 1 1" look-at="#camera-ray"></a-entity> -->
 
-    <!-- Camera -->
+    <!-- Camera and Controls -->
     <a-entity id="rig">
       <a-camera look-controls="touchEnabled: false">
         <a-entity id="camera-ray" class="can-select" raycaster="objects: .collidable" cursor="rayOrigin: mouse"
-          intersection-spawn="event: click; mixin: voxel; objects: spawnable"></a-entity>
+          intersection-spawn="event: click; mixin: voxel; objects: spawnable; gridSize:5; gridDivisions:20;"></a-entity>
       </a-camera>
       <a-entity id="leftHand" laser-controls="hand: left" raycaster="objects: .collidable"></a-entity>
       <a-entity id="rightHand" laser-controls="hand: right" raycaster="objects: .collidable"
-        intersection-spawn="event: click; mixin: voxel; objects: spawnable" class="can-select">
-        <a-entity id="menuHand" scale="0.1 0.1 0.1" look-at="#camera-ray" position="0 0 0.2" mixin="slice"
+        intersection-spawn="event: click; mixin: voxel; objects: spawnable; gridSize:5; gridDivisions:20;" class="can-select">
+        <a-entity id="menuHand" scale="0.1 0.1 0.1" look-at="#camera-ray" position="0 0 -0.2" mixin="slice"
           slice9="height: 1; width: 3; color: #777777">
-          <a-triangle proxy-event="event: click; to: a-scene; as: decreaseColorIndex" class="collidable"
+          <a-triangle proxy-event="event: click; to: a-scene; as: decreaseModelIndex" class="collidable"
             mixin="hoverEffect" rotation="0 0 90" scale="0.5 0.5 0.5" position="-1 0 0.01" material="color: #444"
             sound="src: #select5-ogg; on: click; poolSize: 6;"></a-triangle>
-          <a-entity bind__text="value: color.index + '\n' + color.name + '\n' + hex" bind__material="color: color.hex"
-            text="color: #111; width: 3; align: center" geometry="primitive: plane" material="color: #CCC"
-            position="0 0 0.01" scale="0.9 0.9 0.9"></a-entity>
-          <a-triangle proxy-event="event: click; to: a-scene; as: increaseColorIndex" class="collidable"
+          <a-entity bind__text="value: '\n\n\n\n\n ' + model.name" bind__material="src: 'url(' + model.img + ')'"
+            geometry="primitive: plane; buffer: false; skipCache: true" text="color: #111; width: 3; align: center"
+            material="color: #CCC" position="0 0 0.01" scale="0.9 0.9 0.9"></a-entity>
+          <a-triangle proxy-event="event: click; to: a-scene; as: increaseModelIndex" class="collidable"
             mixin="hoverEffect" rotation="0 0 -90" scale="0.5 0.5 0.5" position="1 0 0.01" material="color: #444"
             sound="src: #select5-ogg; on: click; poolSize: 6;"></a-triangle>
         </a-entity>

src/app/intersection-spawn.js

@@ -25,7 +25,7 @@ AFRAME.registerComponent('intersection-spawn', {
 
       // Set components and properties.
       Object.keys(data).forEach(name => {
-        if (name === 'event' || name === 'objects') { return; }
+        if (['event', 'objects', 'gridSize', 'gridDivisions'].includes(name)) { return; }
         AFRAME.utils.entity.setComponentProperty(spawnEl, name, data[name]); // is setAttribute a new version of "set component property"?
       });
 
@@ -38,9 +38,36 @@ AFRAME.registerComponent('intersection-spawn', {
       };
       const targetEl = evt.detail.intersection.object.el;
       const localPos = _worldToLocal(evt.detail.intersection.point, targetEl); // convert world intersection position to local position
+      // console.log('Local Position:', localPos);
       spawnEl.setAttribute('position', localPos)
       targetEl.appendChild(spawnEl);
+      const gridPos = this.localToStateGrid(localPos, data.gridSize, data.gridDivisions);
+      // console.log('Grid Position:', gridPos);
+
+      AFRAME.scenes[0].emit('addGridObject', {
+        lon: gridPos.x,
+        lat: gridPos.y
+      });
+    })
+  },
+  // Convert local grid position to long / lat state grid coordinates
+  localToStateGrid: function (localPos, gridSize, gridDivisions) {
+    // grid divisions (# of cells) ie 20 divisions
+    // grid size (meter) ie 5 meters
+    // cellsPerMeter: gridDivisions / gridSize = 4 cells per meter
+    const cellsPerMeter = gridDivisions / gridSize;
+    // console.log(`cellsPerMeter: ${cellsPerMeter}`);
+    // this gives the correct point of long / lat
+    const gridLong = localPos.x * cellsPerMeter;
+    const gridLat = localPos.z * cellsPerMeter * -1; // A-Frame uses 'z' for depth/forward, we reverse so positive latitude is forward
+    // console.log(`Converted Lat Y: ${gridLat}, Grid Long X: ${gridLong}`);
+    const gridLongRounded = Math.round(gridLong + (gridLong >= 0 ? 0.5 : -0.5));
+    const gridLatRounded = Math.round(gridLat + (gridLat >= 0 ? 0.5 : -0.5));
+    // console.log(`Rounded Lat Y: ${gridLatRounded}, Grid Long X: ${gridLongRounded}`)
+    return {
+      x: gridLongRounded,
+      y: gridLatRounded
+    };
 
-    });
   }
 });

src/app/snap.js

@@ -77,7 +77,9 @@ AFRAME.registerComponent('snap', {
       snapPos = _snapper(this.el.object3D.position, this.data.offset, this.data.snap);
     }
 
+    console.log('snapPos', snapPos);
     this.el.object3D.position.copy(snapPos);
+    this.el.object3D.position.y = 0;
 
 
   }

src/app/state.js

@@ -31,6 +31,26 @@ const MODELS = {
   }
 };
 
+// Define initial grid size
+const GRID_SIZE = 10; // Example grid size (10x10)
+
+// Initial grid state setup with City Hall at the center
+const INITIAL_GRID_STATE = {};
+for (let lon = -GRID_SIZE; lon <= GRID_SIZE; lon++) {
+  for (let lat = -GRID_SIZE; lat <= GRID_SIZE; lat++) {
+    // Setting up City Hall which occupies 4 central cells
+    if ((lon === 1 || lon === -1) && (lat === 1 || lat === -1)) {
+      INITIAL_GRID_STATE[`${lon},${lat}`] = {
+        model: 'cityhall', // Assuming 'cityhall' is defined in MODELS
+        rotation: 0,
+        elevation: 0
+      };
+    } else {
+      INITIAL_GRID_STATE[`${lon},${lat}`] = {};
+    }
+  }
+}
+
 const INITIAL_STATE = {
   color: {
     list: COLORS,
@@ -43,7 +63,8 @@ const INITIAL_STATE = {
     index: 0,
     name: '',
     img: '',
-  }
+  },
+  grid: INITIAL_GRID_STATE
 }
 
 AFRAME.registerState({
@@ -65,13 +86,8 @@ AFRAME.registerState({
       state.model.index += 1;
       if (state.model.index >= Object.keys(state.model.list).length ) { state.model.index -= 1 }
     },
-    addModel: function (state, payload) {
-      state.model.list[payload.name] = {
-        'dist': payload.dist,
-        'img': payload.img
-      }
-    }
-    /* example usage of `addModel` handler
+    /* Handler to add a model to the list of models
+    example usage of `addModel` handler
       var payload =   {
         "name": "tree_E",
         "src": "src/models/kaykit/tree_E.gltf",
@@ -80,6 +96,59 @@ AFRAME.registerState({
       },
       AFRAME.scenes[0].emit('addModel', payload);
     */
+    addModel: function (state, payload) {
+      state.model.list[payload.name] = {
+        'dist': payload.dist,
+        'img': payload.img
+      }
+    },
+    // Handler to add an object to the grid
+    addGridObject: function (state, payload) {
+      console.log('Adding Grid Object:', payload);
+
+      let { lon, lat, model, rotation, elevation } = payload;
+      const key = `${lon},${lat}`;
+
+      if (!model) {
+        model = getModelNameFromState(state);
+      }
+      if (!rotation) {
+        rotation = 0;
+      }
+      if (!elevation) {
+        elevation = 0;
+      }
+      console.log('model', model);
+      // Prevent modification of City Hall cells
+      if (!['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
+        state.grid[key] = { model, rotation, elevation };
+      } else {
+        console.log('Cannot place object on city hall');
+      }
+      console.log('Updated Grid State:', state.grid);
+    },
+    // Handler to rotate or elevate an object
+    // Note: City Hall cells cannot be rotated or elevated
+    rotateOrElevateGridObject: function (state, payload) {
+      const { lon, lat, rotation, elevation } = payload;
+      const key = `${lon},${lat}`;
+
+      if (state.grid[key] && !['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
+        state.grid[key].rotation += rotation;
+        state.grid[key].elevation += elevation;
+      }
+    },
+    // Handler to clear a cell
+    // Note: City Hall cells cannot be cleared
+    clearGridCell: function (state, payload) {
+      const { lon, lat } = payload;
+      const key = `${lon},${lat}`;
+
+      if (!['1,1', '-1,1', '-1,-1', '1,-1'].includes(key)) {
+        state.grid[key] = null;
+      }
+    },
+
 
   },
   computeState: function (newState, payload) {