Fix grid sizing/snap

frontend/src/app/pages/particles/components/render-container/render-container.component.html

@@ -5,6 +5,10 @@
         <mat-label>Opacity</mat-label>
         <input matInput type="number" [(ngModel)]="opacity" min="0" max="1" step="0.01" placeholder="">
       </mat-form-field>
+      <mat-form-field appearance="outline" style="width: 12ch; margin-left: 8px;">
+        <mat-label>Grid density</mat-label>
+        <input matInput type="number" [(ngModel)]="gridDensity" min="2" max="64" step="2" placeholder="">
+      </mat-form-field>
     </div>
     <div class="button-row">
       <button mat-mini-fab color="primary" (click)="resetCamera()"
@@ -26,6 +30,11 @@
               [matTooltip]="isPlaneLocked ? 'Unlock plane' : 'Lock plane'">
         <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
       </button>
+
+      <button mat-mini-fab color="primary" (click)="gridVisible = !gridVisible"
+              [matTooltip]="gridVisible ? 'Hide grid' : 'Show grid'">
+        <mat-icon>{{ gridVisible ? 'grid_off' : 'grid_on' }}</mat-icon>
+      </button>
     </div>
 
     @if (isPlaneLocked) {

frontend/src/app/pages/particles/components/render-container/render-container.component.ts

@@ -86,6 +86,23 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.intersectionPlaneService.currentOpacity;
   }
 
+  // Grid proxies
+  public get gridVisible(): boolean {
+    return this.intersectionPlaneService.getGridVisible();
+  }
+
+  public set gridVisible(v: boolean) {
+    this.intersectionPlaneService.setGridVisible(v);
+  }
+
+  public get gridDensity(): number {
+    return this.intersectionPlaneService.getGridDensity();
+  }
+
+  public set gridDensity(d: number) {
+    this.intersectionPlaneService.setGridDensity(d);
+  }
+
   /**
    * Toggle the plane locked state
    */

frontend/src/app/pages/particles/services/intersection-plane.service.ts

@@ -28,6 +28,11 @@ export class IntersectionPlaneService {
   private planeLocked: boolean = false;
   private opacity: number = 0.05;
 
+  // Grid overlay
+  private gridHelper?: THREE.GridHelper;
+  private gridVisible: boolean = true;
+  private gridDensity: number = 4;
+
   // Emits whenever plane position, orientation, or lock-affecting orientation updates change visuals
   public readonly planeChanged$ = new Subject<void>();
   private lastPlaneSignature: string | null = null;
@@ -35,6 +40,77 @@ export class IntersectionPlaneService {
   constructor(private rendererService: RendererService) {
   }
 
+  public get stepSize() {
+    return 5
+  }
+
+  /**
+   * Creates or updates the grid helper attached to the intersection plane
+   * without affecting raycasting/placement.
+   */
+  private createOrUpdateGrid(): void {
+    if (!this.intersectionPlane) return;
+
+    if (this.gridHelper) {
+      this.intersectionPlane.remove(this.gridHelper);
+      (this.gridHelper.geometry as THREE.BufferGeometry).dispose();
+      if (this.gridHelper.material.dispose) {
+        this.gridHelper.material.dispose();
+      }
+      this.gridHelper = undefined;
+    }
+
+    const size = this.stepSize;
+    const divisions = Math.max(1, Math.floor(size * this.gridDensity));
+
+    this.gridHelper = new THREE.GridHelper(size, divisions, 0x888888, 0xcccccc);
+
+    this.gridHelper.rotation.x = Math.PI / 2;
+    this.gridHelper.position.z -= 0.005;
+
+    this.gridHelper.renderOrder = 2;
+    const gridMat = this.gridHelper.material as THREE.Material | THREE.Material[];
+    if (Array.isArray(gridMat)) {
+      gridMat.forEach(material => {
+        material.transparent = true;
+        material.depthWrite = false;
+        if (material.opacity !== undefined) {
+          material.opacity = 0.25;
+        }
+      });
+    } else {
+      gridMat.transparent = true;
+      gridMat.depthWrite = false;
+      gridMat.opacity = 0.25;
+    }
+
+    this.gridHelper.raycast = () => {
+    };
+
+    this.gridHelper.visible = this.gridVisible;
+    this.intersectionPlane.add(this.gridHelper);
+  }
+
+  public setGridVisible(visible: boolean): void {
+    this.gridVisible = visible;
+    if (this.gridHelper) this.gridHelper.visible = visible;
+  }
+
+  public getGridVisible(): boolean {
+    return this.gridVisible;
+  }
+
+  public setGridDensity(density: number): void {
+    this.gridDensity = Math.max(1, Math.min(64, Math.floor(density)));
+    if (this.intersectionPlane) {
+      this.createOrUpdateGrid();
+    }
+  }
+
+  public getGridDensity(): number {
+    return this.gridDensity;
+  }
+
   /**
    * Creates the intersection plane and adds it to the scene
    */
@@ -51,6 +127,10 @@ export class IntersectionPlaneService {
     this.intersectionPlane.position.z = 0;
     // Center the plane vertically with the player (player is about 2 blocks tall)
     this.intersectionPlane.position.y = 1;
+
+    // Add grid overlay as a child so it follows rotation/position
+    this.createOrUpdateGrid();
+
     this.rendererService.scene.add(this.intersectionPlane);
     this.intersectionPlane.renderOrder = 1;
 
@@ -124,17 +204,17 @@ export class IntersectionPlaneService {
     // Convert from 1/16th block to Three.js units
     const position = (this.planePosition / 16)
 
-    this.intersectionPlane.position.y = 0.8;
+    this.intersectionPlane.position.y = 1;
     this.intersectionPlane.position.x = 0;
     this.intersectionPlane.position.z = 0;
 
     // Position based on the current orientation
     switch (this.currentOrientation) {
       case PlaneOrientation.VERTICAL_ABOVE:
-        this.intersectionPlane.position.y = 0.8 - position;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.VERTICAL_BELOW:
-        this.intersectionPlane.position.y = 0.8 + position;
+        this.intersectionPlane.position.y = position;
         break;
       case PlaneOrientation.HORIZONTAL_FRONT:
         this.intersectionPlane.position.z = position;

frontend/src/app/pages/particles/services/particle-manager.service.ts

@@ -53,6 +53,13 @@ export class ParticleManagerService {
    * Adds a particle at the specified position
    */
   addParticle(x: number, y: number, z: number): void {
+    const planeSize = this.intersectionPlaneService.stepSize;
+    const divisions = Math.max(1, Math.floor(planeSize * this.intersectionPlaneService.getGridDensity()));
+    const gridStepPlane = planeSize / divisions;
+
+    x = Math.round(x / gridStepPlane) * gridStepPlane;
+    y = Math.round(y / gridStepPlane) * gridStepPlane;
+    z = Math.round(z / gridStepPlane) * gridStepPlane;
     // Create a visual representation of the particle
     const particleGeometry = new THREE.SphereGeometry(0.03 * this.selectedSize, 16, 16);
     const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
@@ -66,6 +73,7 @@ export class ParticleManagerService {
     const hexColor = this.selectedColor.replace('#', '');
 
     //TODO make this work for more than just type DUST
+
     const particleInfo: ParticleInfo = {
       particle_type: this.selectedParticle,
       x: x,

frontend/src/app/pages/particles/services/player-model.service.ts

@@ -56,6 +56,7 @@ export class PlayerModelService {
     }
 
     this.playerModel.renderOrder = 0;
+    this.playerModel.position.y = 0.2;
     this.rendererService.scene.add(this.playerModel);
     return this.playerModel;
   }