Fix grid sizing/snap

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

@@ -7,7 +7,7 @@
       </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="1" max="64" step="1" placeholder="">
+        <input matInput type="number" [(ngModel)]="gridDensity" min="2" max="64" step="2" placeholder="">
       </mat-form-field>
     </div>
     <div class="button-row">

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

@@ -40,6 +40,10 @@ 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.
@@ -56,7 +60,7 @@ export class IntersectionPlaneService {
       this.gridHelper = undefined;
     }
 
-    const size = 5;
+    const size = this.stepSize;
     const divisions = Math.max(1, Math.floor(size * this.gridDensity));
 
     this.gridHelper = new THREE.GridHelper(size, divisions, 0x888888, 0xcccccc);
@@ -200,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;
   }