diff --git a/frontend/src/app/particles/particles.component.ts b/frontend/src/app/particles/particles.component.ts index c4a667d..6659d2d 100644 --- a/frontend/src/app/particles/particles.component.ts +++ b/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 - this.intersectionPlane.position.z = zPosition; + const position = (this.planePosition / 16) - 0.5; // Center at 0 + + // 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