Enhance ParticlesComponent to adjust plane position dynamically based on rotation angle.

frontend/src/app/particles/particles.component.ts

@@ -246,8 +246,27 @@ export class ParticlesComponent implements OnInit, AfterViewInit {
     const slider = event.target as HTMLInputElement;
     this.planePosition = Number(slider.value);
     // Convert from 1/16th block to Three.js units
-    const zPosition = (this.planePosition / 16) - 0.5; // Center at 0
+    const position = (this.planePosition / 16) - 0.5; // Center at 0
-    this.intersectionPlane.position.z = zPosition;
+
+    // Apply position based on the plane's current rotation
+    // This ensures the plane always moves towards/away from the viewer
+    const rotation = this.intersectionPlane.rotation.y;
+
+    if (Math.abs(rotation) < 0.1 || Math.abs(rotation - Math.PI) < 0.1) {
+      // Camera in front (0) or behind (PI)
+      // For camera behind, we need to invert the direction
+      const direction = Math.abs(rotation) < 0.1 ? 1 : -1;
+      this.intersectionPlane.position.z = position * direction;
+      // Reset x position to avoid cumulative changes
+      this.intersectionPlane.position.x = 0;
+    } else {
+      // Camera on right (PI/2) or left (-PI/2)
+      // For camera on left, we need to invert the direction
+      const direction = rotation > 0 ? 1 : -1;
+      this.intersectionPlane.position.x = position * direction;
+      // Reset z position to avoid cumulative changes
+      this.intersectionPlane.position.z = 0;
+    }
   }
 
   // Track if mouse is being dragged