Fix weird interactions between plane and player model

Implemented a UI overlay in `ParticlesComponent` for manual plane orientation selection with buttons for different orientations. Added lock/unlock toggle to control automatic orientation adjustment. Refactored `IntersectionPlaneService` to support locked state and manual orientation updates. Updated styles and layout to integrate the new controls seamlessly.

backend/src/main/java/com/alttd/altitudeweb/config/SecurityConfig.java

@@ -40,7 +40,7 @@ public class SecurityConfig {
                 .requestMatchers("/team/**", "/history/**").permitAll()
                 .requestMatchers("/form/**").hasAuthority(PermissionClaimDto.USER.getValue())
                 .requestMatchers("/head_mod/**").hasAuthority(PermissionClaimDto.HEAD_MOD.getValue())
-                .anyRequest().authenticated()
+                .anyRequest().permitAll()
             )
             .oauth2ResourceServer(oauth2 -> oauth2.jwt(Customizer.withDefaults()))
             .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))

frontend/package.json

@@ -22,8 +22,10 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@types/three": "^0.177.0",
     "ngx-cookie-service": "^19.1.2",
     "rxjs": "~7.8.0",
+    "three": "^0.177.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

frontend/src/app/about/about.component.ts

@@ -2,15 +2,13 @@ import {Component} from '@angular/core';
 import {ScrollService} from '../scroll/scroll.service';
 import {CommonModule} from '@angular/common';
 import {HeaderComponent} from '../header/header.component';
-import {RemoveTrailingPeriodPipe} from "../util/RemoveTrailingPeriodPipe";
 
 @Component({
   selector: 'app-about',
   standalone: true,
   imports: [
     CommonModule,
-    HeaderComponent,
+    HeaderComponent
-    RemoveTrailingPeriodPipe
   ],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'

frontend/src/app/app.routes.ts

@@ -5,6 +5,10 @@ export const routes: Routes = [
     path: '',
     loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
   },
+  {
+    path: 'particles',
+    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
+  },
   {
     path: 'map',
     loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
@@ -105,6 +109,8 @@ export const routes: Routes = [
     path: 'forms',
     loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
   },
+  {
+    path: 'particles',
+    loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
+  },
 ];
-
-

frontend/src/app/particles/components/frames/frames.component.html

@@ -0,0 +1,41 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Frames</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="frames-container">
+      <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
+                     (selectedIndexChange)="switchFrame(frames[$event])">
+        <mat-tab *ngFor="let frameId of frames" [label]="frameId">
+          <div class="frame-content">
+            <h3>Particles in {{ frameId }}</h3>
+            <div class="particles-list">
+              <div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
+                    <span>Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
+                      , {{ particle.z.toFixed(2) }})</span>
+                <button mat-icon-button color="warn" (click)="removeParticle(frameId, i)">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              </div>
+              <div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
+                   class="no-particles">
+                No particles in this frame. Click on the plane to add particles.
+              </div>
+            </div>
+            <div class="frame-actions">
+              <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
+                      [disabled]="frames.length <= 1">
+                Remove Frame
+              </button>
+            </div>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
+      <div class="add-frame">
+        <button mat-raised-button color="primary" (click)="addFrame()">
+          Add New Frame
+        </button>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/particles/components/frames/frames.component.scss

@@ -0,0 +1,46 @@
+.frames-container {
+  margin-top: 10px;
+}
+
+.frame-content {
+  padding: 15px;
+}
+
+.particles-list {
+  height: 550px;
+  overflow-y: auto;
+  border: 1px solid #eee;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 15px;
+}
+
+.particle-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid #eee;
+}
+
+.particle-item:last-child {
+  border-bottom: none;
+}
+
+.no-particles {
+  padding: 20px;
+  text-align: center;
+  color: #888;
+}
+
+.frame-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+
+.add-frame {
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+}

frontend/src/app/particles/components/frames/frames.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FramesComponent } from './frames.component';
+
+describe('FramesComponent', () => {
+  let component: FramesComponent;
+  let fixture: ComponentFixture<FramesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FramesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FramesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,86 @@
+import {Component} from '@angular/core';
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {MatTab, MatTabGroup} from "@angular/material/tabs";
+import {NgForOf, NgIf} from "@angular/common";
+import {ParticleData} from '../../models/particle.model';
+import {MatIcon} from '@angular/material/icon';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+import {FrameManagerService} from '../../services/frame-manager.service';
+
+@Component({
+  selector: 'app-frames',
+  imports: [
+    MatButton,
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatIcon,
+    MatIconButton,
+    MatTab,
+    MatTabGroup,
+    NgForOf,
+    NgIf
+  ],
+  templateUrl: './frames.component.html',
+  styleUrl: './frames.component.scss'
+})
+export class FramesComponent {
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+    private frameManagerService: FrameManagerService) {
+  }
+
+  /**
+   * Get the particle data
+   */
+  public get particleData(): ParticleData {
+    return this.particleManagerService.getParticleData();
+  }
+
+  /**
+   * Get the current frame
+   */
+  public get currentFrame(): string {
+    return this.particleManagerService.getCurrentFrame();
+  }
+
+  /**
+   * Get all frames
+   */
+  public get frames(): string[] {
+    return this.particleManagerService.getFrames();
+  }
+
+  /**
+   * Add a new frame
+   */
+  public addFrame(): void {
+    this.frameManagerService.addFrame();
+  }
+
+  /**
+   * Switch to a different frame
+   */
+  public switchFrame(frameId: string): void {
+    this.frameManagerService.switchFrame(frameId);
+  }
+
+  /**
+   * Remove a particle
+   */
+  public removeParticle(frameId: string, index: number): void {
+    this.particleManagerService.removeParticle(frameId, index);
+  }
+
+  /**
+   * Remove a frame
+   */
+  public removeFrame(frameId: string): void {
+    this.frameManagerService.removeFrame(frameId);
+  }
+
+
+}

frontend/src/app/particles/components/particle/particle.component.html

@@ -0,0 +1,11 @@
+<mat-card class="color-picker-card">
+  <mat-card-header>
+    <mat-card-title>Particle Color</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="color-picker">
+      <input type="color" [(ngModel)]="selectedColor">
+      <span>Selected Color: {{ selectedColor }}</span>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/particles/components/particle/particle.component.scss

@@ -0,0 +1,17 @@
+.color-picker-card {
+  margin-top: 20px;
+}
+
+.color-picker {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.color-picker input[type="color"] {
+  width: 50px;
+  height: 50px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}

frontend/src/app/particles/components/particle/particle.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ParticleComponent} from './particle.component';
+
+describe('ParticleComponent', () => {
+  let component: ParticleComponent;
+  let fixture: ComponentFixture<ParticleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticleComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ParticleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import {Component} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+
+@Component({
+  selector: 'app-particle',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './particle.component.html',
+  styleUrl: './particle.component.scss'
+})
+export class ParticleComponent {
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+  ) {
+  }
+
+  /**
+   * Get the selected color
+   */
+  public get selectedColor(): string {
+    return this.particleManagerService.getSelectedColor();
+  }
+
+  /**
+   * Set the selected color
+   */
+  public set selectedColor(color: string) {
+    this.particleManagerService.setSelectedColor(color);
+  }
+
+}

frontend/src/app/particles/components/properties/properties.component.html

@@ -0,0 +1,91 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>Particle Properties</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Particle Name</mat-label>
+        <input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Display Name</mat-label>
+        <input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Particle Type</mat-label>
+        <mat-select [(ngModel)]="particleData.particle_type">
+          <mat-option *ngFor="let type of particleTypes" [value]="type">{{ type }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Lore</mat-label>
+        <textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Display Item</mat-label>
+        <input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Permission</mat-label>
+        <input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Package Permission</mat-label>
+        <input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Frame Delay</mat-label>
+        <input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Repeat</mat-label>
+        <input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Repeat Delay</mat-label>
+        <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
+               placeholder="Enter repeat delay">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-form-field appearance="outline">
+        <mat-label>Random Offset</mat-label>
+        <input matInput type="number" [(ngModel)]="particleData.random_offset"
+               placeholder="Enter random offset">
+      </mat-form-field>
+    </div>
+
+    <div class="form-row">
+      <mat-checkbox [(ngModel)]="particleData.stationary">Stationary</mat-checkbox>
+    </div>
+  </mat-card-content>
+</mat-card>

frontend/src/app/particles/components/properties/properties.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PropertiesComponent } from './properties.component';
+
+describe('PropertiesComponent', () => {
+  let component: PropertiesComponent;
+  let fixture: ComponentFixture<PropertiesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PropertiesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PropertiesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,43 @@
+import {Component} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
+import {MatCheckbox} from "@angular/material/checkbox";
+import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
+import {NgForOf} from "@angular/common";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {ParticleData, ParticleType} from '../../models/particle.model';
+import {MatSelect} from '@angular/material/select';
+import {MatOption} from '@angular/material/core';
+import {ParticleManagerService} from '../../services/particle-manager.service';
+
+@Component({
+  selector: 'app-particle-properties',
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatCheckbox,
+    MatFormField,
+    MatInput,
+    MatLabel,
+    MatOption,
+    MatSelect,
+    NgForOf,
+    ReactiveFormsModule,
+    FormsModule
+  ],
+  templateUrl: './properties.component.html',
+  styleUrl: './properties.component.scss'
+})
+export class PropertiesComponent {
+  public particleTypes = Object.values(ParticleType);
+
+  constructor(
+    private particleManagerService: ParticleManagerService,
+  ) {
+  }
+
+  public get particleData(): ParticleData {
+    return this.particleManagerService.getParticleData();
+  }
+}

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

@@ -0,0 +1,41 @@
+<div #rendererContainer class="renderer-container">
+  <div class="plane-controls-overlay">
+    <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
+            [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+      <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
+    </button>
+
+    <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
+      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
+              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
+              matTooltip="Vertical Above">
+        <mat-icon>arrow_upward</mat-icon>
+      </button>
+      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
+              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
+              matTooltip="Vertical Below">
+        <mat-icon>arrow_downward</mat-icon>
+      </button>
+      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
+              matTooltip="Horizontal Front">
+        <mat-icon>arrow_forward</mat-icon>
+      </button>
+      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
+              matTooltip="Horizontal Behind">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
+              matTooltip="Horizontal Right">
+        <mat-icon>arrow_right</mat-icon>
+      </button>
+      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
+              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
+              matTooltip="Horizontal Left">
+        <mat-icon>arrow_left</mat-icon>
+      </button>
+    </div>
+  </div>
+</div>

frontend/src/app/particles/components/render-container/render-container.component.scss

@@ -0,0 +1,46 @@
+.renderer-container {
+  height: 1000px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative; /* Added for absolute positioning of overlay */
+}
+
+.plane-controls-overlay {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 10px;
+  z-index: 10;
+}
+
+.plane-orientation-buttons {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.plane-orientation-buttons button {
+  opacity: 0.7;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.plane-orientation-buttons button:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+.plane-orientation-buttons button.active {
+  opacity: 1;
+  transform: scale(1.1);
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenderContainerComponent } from './render-container.component';
+
+describe('RenderContainerComponent', () => {
+  let component: RenderContainerComponent;
+  let fixture: ComponentFixture<RenderContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RenderContainerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RenderContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,105 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
+import {MatMiniFabButton} from '@angular/material/button';
+import {NgIf} from '@angular/common';
+import {IntersectionPlaneService, PlaneOrientation} from '../../services/intersection-plane.service';
+import {MatIcon} from '@angular/material/icon';
+import {MatTooltip} from '@angular/material/tooltip';
+import {RendererService} from '../../services/renderer.service';
+import {PlayerModelService} from '../../services/player-model.service';
+import {InputHandlerService} from '../../services/input-handler.service';
+
+@Component({
+  selector: 'app-render-container',
+  imports: [
+    MatIcon,
+    MatMiniFabButton,
+    MatTooltip,
+    NgIf
+  ],
+  templateUrl: './render-container.component.html',
+  styleUrl: './render-container.component.scss'
+})
+export class RenderContainerComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('rendererContainer') rendererContainer!: ElementRef;
+
+  constructor(
+    private intersectionPlaneService: IntersectionPlaneService,
+    private playerModelService: PlayerModelService,
+    private inputHandlerService: InputHandlerService,
+    private rendererService: RendererService,
+  ) {
+  }
+
+  ngAfterViewInit(): void {
+    this.initializeScene();
+    this.animate();
+  }
+
+  /**
+   * Clean up resources when component is destroyed
+   */
+  ngOnDestroy(): void {
+    if (this.rendererService.renderer) {
+      this.inputHandlerService.cleanup(this.rendererService.renderer.domElement);
+    }
+  }
+
+  /**
+   * Initialize the 3D scene and all related components
+   */
+  private initializeScene(): void {
+    this.rendererService.initializeRenderer(this.rendererContainer);
+    this.playerModelService.loadSkinTexture('/public/img/skins/steve.png')
+      .then(() => {
+        // Then create the player model with the texture applied
+        this.playerModelService.createPlayerModel();
+      });
+    this.intersectionPlaneService.createIntersectionPlane();
+    this.inputHandlerService.initializeInputHandlers(this.rendererService.renderer.domElement);
+  }
+
+  /**
+   * Animation loop
+   */
+  private animate(): void {
+    requestAnimationFrame(this.animate.bind(this));
+    this.intersectionPlaneService.updatePlaneOrientation(this.rendererService.camera);
+    this.rendererService.render();
+  }
+
+  /**
+   * Get whether the plane is locked
+   */
+  public get isPlaneLocked(): boolean {
+    return this.intersectionPlaneService.isPlaneLocked();
+  }
+
+  /**
+   * Toggle the plane locked state
+   */
+  public togglePlaneLock(): void {
+    const newLockedState = !this.isPlaneLocked;
+    this.intersectionPlaneService.setPlaneLocked(newLockedState);
+  }
+
+  /**
+   * Get the current plane orientation
+   */
+  public get currentPlaneOrientation(): PlaneOrientation {
+    return this.intersectionPlaneService.getCurrentOrientation();
+  }
+
+  /**
+   * Set the plane orientation
+   */
+  public setPlaneOrientation(orientation: PlaneOrientation): void {
+    this.intersectionPlaneService.setPlaneOrientation(orientation);
+  }
+
+  /**
+   * Get all available plane orientations
+   */
+  public get planeOrientations(): typeof PlaneOrientation {
+    return PlaneOrientation;
+  }
+}

frontend/src/app/particles/models/particle.model.ts

@@ -0,0 +1,40 @@
+/**
+ * Defines the types of particles available in the system
+ */
+export enum ParticleType {
+  REDSTONE = 'REDSTONE',
+  // Other particle types can be added later
+}
+
+/**
+ * Represents a single particle's information
+ */
+export interface ParticleInfo {
+  particle_type: string;
+  x: number;
+  y: number;
+  z: number;
+  color: string;
+  extra: number;
+}
+
+/**
+ * Represents the complete particle data structure
+ */
+export interface ParticleData {
+  particle_name: string;
+  display_name: string;
+  particle_type: string;
+  lore: string;
+  display_item: string;
+  permission: string;
+  package_permission: string;
+  frame_delay: number;
+  repeat: number;
+  repeat_delay: number;
+  random_offset: number;
+  stationary: boolean;
+  frames: {
+    [frameId: string]: ParticleInfo[];
+  };
+}

frontend/src/app/particles/particles.component.html

@@ -0,0 +1,40 @@
+<app-header current_page="particles" height="200px" background_image="/public/img/backgrounds/staff.png"
+            [overlay_gradient]="0.5">
+  <div class="title" header-content>
+    <h1>Particle Creator</h1>
+  </div>
+</app-header>
+
+<main>
+  <section class="darkmodeSection">
+    <section class="column">
+      <div class="renderer-section column">
+        <div class="flex row">
+          <div class="flex side-column">
+            <app-particle-properties></app-particle-properties>
+          </div>
+          <div class="flex middle-column">
+            <app-render-container></app-render-container>
+            <div class="plane-controls">
+              <label>Plane Position (Z-axis):</label>
+              <mat-slider [min]="minOffset" [max]="maxOffset" step="1" #planeSlider>
+                <input matSliderThumb [(ngModel)]="planePosition" (input)="updatePlanePosition($event)">
+              </mat-slider>
+              <span>{{ planePosition }} offset from center</span>
+            </div>
+          </div>
+          <div class="flex side-column">
+            <app-particle></app-particle>
+            <app-frames></app-frames>
+            <div>
+              <button mat-fab extended (click)="copyJson()">
+                <mat-icon>content_copy</mat-icon>
+                Copy JSON to clipboard
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </section>
+</main>

frontend/src/app/particles/particles.component.scss

@@ -0,0 +1,39 @@
+.renderer-section {
+  flex: 1;
+  min-width: 300px;
+  display: flex;
+}
+
+.side-column {
+  flex: 1;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.middle-column {
+  flex: 2;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.plane-controls {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.plane-controls mat-slider {
+  flex: 1;
+}
+
+.form-row {
+  margin-bottom: 15px;
+}
+
+mat-form-field {
+  width: 100%;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParticlesComponent } from './particles.component';
+
+describe('ParticlesComponent', () => {
+  let component: ParticlesComponent;
+  let fixture: ComponentFixture<ParticlesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ParticlesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ParticlesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,101 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {HeaderComponent} from '../header/header.component';
+
+// Services
+import {IntersectionPlaneService} from './services/intersection-plane.service';
+import {ParticleManagerService} from './services/particle-manager.service';
+
+// Models
+import {PropertiesComponent} from './components/properties/properties.component';
+import {ParticleComponent} from './components/particle/particle.component';
+import {FramesComponent} from './components/frames/frames.component';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import {RenderContainerComponent} from './components/render-container/render-container.component';
+
+@Component({
+  selector: 'app-particles',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatCheckboxModule,
+    MatTabsModule,
+    MatCardModule,
+    MatIconModule,
+    HeaderComponent,
+    PropertiesComponent,
+    ParticleComponent,
+    FramesComponent,
+    RenderContainerComponent,
+  ],
+  templateUrl: './particles.component.html',
+  styleUrl: './particles.component.scss'
+})
+export class ParticlesComponent {
+  @ViewChild('planeSlider') planeSlider!: ElementRef;
+
+  constructor(
+    private intersectionPlaneService: IntersectionPlaneService,
+    private particleManagerService: ParticleManagerService,
+    private matSnackBar: MatSnackBar,
+  ) {
+  }
+
+  /**
+   * Update plane position based on slider
+   */
+  public updatePlanePosition(event: Event): void {
+    const slider = event.target as HTMLInputElement;
+    const value = Number(slider.value);
+    this.intersectionPlaneService.updatePlanePosition(value);
+  }
+
+  /**
+   * Get the current plane position
+   */
+  public get planePosition(): number {
+    return this.intersectionPlaneService.getPlanePosition();
+  }
+
+  public set planePosition(newPlanePosition: number) {
+    this.intersectionPlaneService.updatePlanePosition(newPlanePosition);
+  }
+
+  public get maxOffset(): number {
+    return this.intersectionPlaneService.getMaxOffset();
+  }
+
+  public get minOffset(): number {
+    return this.intersectionPlaneService.getMinOffset();
+  }
+
+  /**
+   * Generate JSON output
+   */
+  public generateJson(): string {
+    return this.particleManagerService.generateJson();
+  }
+
+  public copyJson() {
+    navigator.clipboard.writeText(this.generateJson()).then(() => {
+      this.matSnackBar.open('Copied to clipboard', '', {duration: 2000})
+    });
+  }
+}

frontend/src/app/particles/services/frame-manager.service.ts

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { ParticleManagerService } from './particle-manager.service';
+
+/**
+ * Service responsible for managing animation frames
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class FrameManagerService {
+
+  constructor(private particleManager: ParticleManagerService) {}
+
+  /**
+   * Adds a new frame
+   */
+  addFrame(): void {
+    const frames = this.particleManager.getFrames();
+    const frameId = `frame${frames.length + 1}`;
+
+    frames.push(frameId);
+    this.particleManager.setFrames(frames);
+
+    const particleData = this.particleManager.getParticleData();
+    particleData.frames[frameId] = [];
+    this.particleManager.setParticleData(particleData);
+
+    this.switchFrame(frameId);
+  }
+
+  /**
+   * Switches to a different frame
+   */
+  switchFrame(frameId: string): void {
+    this.particleManager.setCurrentFrame(frameId);
+    this.particleManager.clearParticleVisuals();
+    this.particleManager.renderFrameParticles(frameId);
+  }
+
+  /**
+   * Removes a frame
+   */
+  removeFrame(frameId: string): void {
+    const frames = this.particleManager.getFrames();
+    const index = frames.indexOf(frameId);
+
+    if (index !== -1) {
+      frames.splice(index, 1);
+      this.particleManager.setFrames(frames);
+
+      const particleData = this.particleManager.getParticleData();
+      delete particleData.frames[frameId];
+      this.particleManager.setParticleData(particleData);
+
+      // Switch to first frame if we removed the current one
+      if (frameId === this.particleManager.getCurrentFrame() && frames.length > 0) {
+        this.switchFrame(frames[0]);
+      } else if (frames.length === 0) {
+        // If no frames left, add one
+        this.addFrame();
+      }
+    }
+  }
+}

frontend/src/app/particles/services/input-handler.service.ts

@@ -0,0 +1,105 @@
+import { Injectable, ElementRef } from '@angular/core';
+import * as THREE from 'three';
+import { RendererService } from './renderer.service';
+import { IntersectionPlaneService } from './intersection-plane.service';
+import { ParticleManagerService } from './particle-manager.service';
+
+/**
+ * Service responsible for handling user input interactions
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class InputHandlerService {
+  private raycaster = new THREE.Raycaster();
+  private mouse = new THREE.Vector2();
+  private isDragging = false;
+  private mouseDownTime = 0;
+
+  constructor(
+    private rendererService: RendererService,
+    private intersectionPlaneService: IntersectionPlaneService,
+    private particleManagerService: ParticleManagerService
+  ) {}
+
+  /**
+   * Initializes input event listeners
+   */
+  initializeInputHandlers(rendererElement: HTMLElement): void {
+    rendererElement.addEventListener('mousedown', this.onMouseDown.bind(this));
+    rendererElement.addEventListener('mouseup', this.onMouseUp.bind(this));
+    rendererElement.addEventListener('mousemove', this.onMouseMove.bind(this));
+    window.addEventListener('resize', this.onWindowResize.bind(this));
+  }
+
+  /**
+   * Handles mouse down event
+   */
+  private onMouseDown(event: MouseEvent): void {
+    this.isDragging = false;
+    this.mouseDownTime = Date.now();
+  }
+
+  /**
+   * Handles mouse up event
+   */
+  private onMouseUp(event: MouseEvent): void {
+    // If mouse was down for less than 200ms and didn't move much, consider it a click, not a drag
+    if (Date.now() - this.mouseDownTime < 200 && !this.isDragging) {
+      this.handlePlaneClick(event);
+    }
+    this.isDragging = false;
+  }
+
+  /**
+   * Handles mouse move event
+   */
+  private onMouseMove(event: MouseEvent): void {
+    // If mouse moves while button is pressed, it's a drag
+    if (event.buttons > 0) {
+      this.isDragging = true;
+    }
+  }
+
+  /**
+   * Handles mouse click on the plane
+   */
+  private handlePlaneClick(event: MouseEvent): void {
+    // Calculate mouse position in normalized device coordinates
+    const rect = this.rendererService.renderer.domElement.getBoundingClientRect();
+    this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+    // Update the picking ray with the camera and mouse position
+    this.raycaster.setFromCamera(this.mouse, this.rendererService.camera);
+
+    // Calculate objects intersecting the picking ray
+    const intersects = this.raycaster.intersectObject(this.intersectionPlaneService.getIntersectionPlane());
+
+    if (intersects.length > 0) {
+      const point = intersects[0].point;
+      this.particleManagerService.addParticle(point.x, point.y, point.z);
+    }
+  }
+
+  /**
+   * Handles window resize event
+   */
+  private onWindowResize(): void {
+    // This is delegated to the renderer service
+    const container = this.rendererService.renderer.domElement.parentElement;
+    if (container) {
+      this.rendererService.onWindowResize(new ElementRef(container));
+    }
+  }
+
+  /**
+   * Removes event listeners
+   */
+  cleanup(rendererElement: HTMLElement): void {
+    rendererElement.removeEventListener('mousedown', this.onMouseDown.bind(this));
+    rendererElement.removeEventListener('mouseup', this.onMouseUp.bind(this));
+    rendererElement.removeEventListener('mousemove', this.onMouseMove.bind(this));
+    window.removeEventListener('resize', this.onWindowResize.bind(this));
+  }
+}

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

@@ -0,0 +1,256 @@
+import {Injectable} from '@angular/core';
+import * as THREE from 'three';
+import {RendererService} from './renderer.service';
+
+/**
+ * Represents the possible orientations of the intersection plane
+ */
+export enum PlaneOrientation {
+  VERTICAL_ABOVE,
+  VERTICAL_BELOW,
+  HORIZONTAL_FRONT,
+  HORIZONTAL_BEHIND,
+  HORIZONTAL_RIGHT,
+  HORIZONTAL_LEFT
+}
+
+/**
+ * Service responsible for managing the intersection plane
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class IntersectionPlaneService {
+  private intersectionPlane!: THREE.Mesh;
+  private planePosition: number = 0; // Position in 1/16th of a block
+  private currentOrientation: PlaneOrientation = PlaneOrientation.HORIZONTAL_FRONT;
+  private planeLocked: boolean = false;
+
+  constructor(private rendererService: RendererService) {
+  }
+
+  /**
+   * Creates the intersection plane and adds it to the scene
+   */
+  createIntersectionPlane(): THREE.Mesh {
+    const planeGeometry = new THREE.PlaneGeometry(3, 3);
+    const planeMaterial = new THREE.MeshBasicMaterial({
+      color: 0x00AA00,
+      transparent: true,
+      opacity: 0.05,
+      side: THREE.DoubleSide
+    });
+
+    this.intersectionPlane = new THREE.Mesh(planeGeometry, planeMaterial);
+    this.intersectionPlane.position.z = 0;
+    // Center the plane vertically with the player (player is about 2 blocks tall)
+    this.intersectionPlane.position.y = 1;
+    this.rendererService.scene.add(this.intersectionPlane);
+    this.intersectionPlane.renderOrder = 1;
+
+    return this.intersectionPlane;
+  }
+
+  /**
+   * Determines the plane orientation based on camera position
+   */
+  private determinePlaneOrientation(camera: THREE.Camera): PlaneOrientation {
+    // Check if camera is looking from above or below first
+    const verticalAngle = Math.atan2(
+      camera.position.y,
+      Math.sqrt(camera.position.x * camera.position.x + camera.position.z * camera.position.z)
+    );
+
+    // Threshold angle for considering the camera to be above/below (about 45 degrees)
+    const verticalThreshold = Math.PI / 4;
+
+    if (verticalAngle > verticalThreshold) {
+      return PlaneOrientation.VERTICAL_ABOVE;
+    } else if (verticalAngle < -verticalThreshold) {
+      return PlaneOrientation.VERTICAL_BELOW;
+    } else {
+      // Calculate the angle between camera and player (in the XZ plane)
+      const cameraAngle = Math.atan2(
+        camera.position.x,
+        camera.position.z
+      );
+
+      // Determine which quadrant the camera is in with a 45-degree offset
+      const quadrant = Math.floor((cameraAngle + Math.PI + Math.PI / 4) / (Math.PI / 2)) % 4;
+
+      switch (quadrant) {
+        case 0:
+          return PlaneOrientation.HORIZONTAL_FRONT;
+        case 1:
+          return PlaneOrientation.HORIZONTAL_RIGHT;
+        case 2:
+          return PlaneOrientation.HORIZONTAL_BEHIND;
+        case 3:
+          return PlaneOrientation.HORIZONTAL_LEFT;
+        default:
+          return PlaneOrientation.HORIZONTAL_FRONT;
+      }
+    }
+  }
+
+  /**
+   * Updates the plane orientation based on camera position
+   */
+  public updatePlaneOrientation(camera: THREE.Camera): void {
+    if (!this.intersectionPlane) return;
+
+    if (!this.planeLocked) {
+      this.currentOrientation = this.determinePlaneOrientation(camera);
+    }
+
+    this.updateIntersectionPlaneOrientation()
+
+    //Restrict plane position to the new bounds and update it
+    this.planePosition = Math.max(this.getMinOffset(), Math.min(this.getMaxOffset(), this.planePosition));
+    this.updatePlanePosition(this.planePosition);
+  }
+
+  /**
+   * Updates the plane position based on slider value
+   */
+  public updatePlanePosition(value: number): void {
+    this.planePosition = value;
+    // Convert from 1/16th block to Three.js units
+    const position = (this.planePosition / 16)
+
+    this.intersectionPlane.position.y = 0.8;
+    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;
+        break;
+      case PlaneOrientation.VERTICAL_BELOW:
+        this.intersectionPlane.position.y = 0.8 + position;
+        break;
+      case PlaneOrientation.HORIZONTAL_FRONT:
+        this.intersectionPlane.position.z = position;
+        break;
+      case PlaneOrientation.HORIZONTAL_BEHIND:
+        this.intersectionPlane.position.z = -position;
+        break;
+      case PlaneOrientation.HORIZONTAL_RIGHT:
+        this.intersectionPlane.position.x = position;
+        break;
+      case PlaneOrientation.HORIZONTAL_LEFT:
+        this.intersectionPlane.position.x = -position;
+        break;
+    }
+  }
+
+  /**
+   * Updates the plane material color
+   */
+  private updatePlaneMaterial(color: number): void {
+    this.intersectionPlane.material = new THREE.MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.05,
+      side: THREE.DoubleSide
+    });
+  }
+
+  /**
+   * Gets the intersection plane
+   */
+  public getIntersectionPlane(): THREE.Mesh {
+    return this.intersectionPlane;
+  }
+
+  /**
+   * Gets the current plane position
+   */
+  public getPlanePosition(): number {
+    return this.planePosition;
+  }
+
+  public getMaxOffset(): number {
+    switch (this.currentOrientation) {
+      case PlaneOrientation.VERTICAL_ABOVE:
+      case PlaneOrientation.VERTICAL_BELOW:
+        return 16;
+      case PlaneOrientation.HORIZONTAL_FRONT:
+      case PlaneOrientation.HORIZONTAL_BEHIND:
+        return 8;
+      case PlaneOrientation.HORIZONTAL_RIGHT:
+      case PlaneOrientation.HORIZONTAL_LEFT:
+        return 8;
+    }
+  }
+
+  public getMinOffset(): number {
+    return this.getMaxOffset() * -1;
+  }
+
+  /**
+   * Gets the current plane orientation
+   */
+  public getCurrentOrientation(): PlaneOrientation {
+    return this.currentOrientation;
+  }
+
+  /**
+   * Sets the plane orientation manually
+   */
+  public setPlaneOrientation(orientation: PlaneOrientation): void {
+    this.currentOrientation = orientation;
+    this.updateIntersectionPlaneOrientation();
+    this.updatePlanePosition(this.planePosition);
+  }
+
+  private updateIntersectionPlaneOrientation() {
+    switch (this.currentOrientation) {
+      case PlaneOrientation.VERTICAL_ABOVE:
+        this.intersectionPlane.rotation.x = -Math.PI / 2;
+        this.intersectionPlane.rotation.y = 0;
+        this.updatePlaneMaterial(0xAA0000);
+        break;
+      case PlaneOrientation.VERTICAL_BELOW:
+        this.intersectionPlane.rotation.x = Math.PI / 2;
+        this.intersectionPlane.rotation.y = 0;
+        this.updatePlaneMaterial(0xAA0000);
+        break;
+      case PlaneOrientation.HORIZONTAL_FRONT:
+        this.intersectionPlane.rotation.x = 0;
+        this.intersectionPlane.rotation.y = 0;
+        this.updatePlaneMaterial(0x00AA00);
+        break;
+      case PlaneOrientation.HORIZONTAL_BEHIND:
+        this.intersectionPlane.rotation.x = 0;
+        this.intersectionPlane.rotation.y = Math.PI;
+        this.updatePlaneMaterial(0x00AA00);
+        break;
+      case PlaneOrientation.HORIZONTAL_RIGHT:
+        this.intersectionPlane.rotation.x = 0;
+        this.intersectionPlane.rotation.y = Math.PI / 2;
+        this.updatePlaneMaterial(0x0000AA);
+        break;
+      case PlaneOrientation.HORIZONTAL_LEFT:
+        this.intersectionPlane.rotation.x = 0;
+        this.intersectionPlane.rotation.y = -Math.PI / 2;
+        this.updatePlaneMaterial(0x0000AA);
+        break;
+    }
+  }
+
+  /**
+   * Gets whether the plane orientation is locked
+   */
+  public isPlaneLocked(): boolean {
+    return this.planeLocked;
+  }
+
+  /**
+   * Sets whether the plane orientation is locked
+   */
+  public setPlaneLocked(locked: boolean): void {
+    this.planeLocked = locked;
+  }
+}

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

@@ -0,0 +1,185 @@
+import { Injectable } from '@angular/core';
+import * as THREE from 'three';
+import { RendererService } from './renderer.service';
+import { ParticleData, ParticleInfo, ParticleType } from '../models/particle.model';
+
+/**
+ * Service responsible for managing particles in the scene
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class ParticleManagerService {
+  private particles: THREE.Mesh[] = [];
+  private particleData: ParticleData = {
+    particle_name: '',
+    display_name: '',
+    particle_type: ParticleType.REDSTONE,
+    lore: '',
+    display_item: 'REDSTONE',
+    permission: '',
+    package_permission: '',
+    frame_delay: 1,
+    repeat: 1,
+    repeat_delay: 0,
+    random_offset: 0,
+    stationary: true,
+    frames: {
+      'frame1': []
+    }
+  };
+  private currentFrame: string = 'frame1';
+  private frames: string[] = ['frame1'];
+  private selectedColor: string = '#ff0000';
+
+  constructor(private rendererService: RendererService) {}
+
+  /**
+   * Adds a particle at the specified position
+   */
+  addParticle(x: number, y: number, z: number): void {
+    // Create a visual representation of the particle
+    const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
+    const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
+    const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
+
+    particleMesh.position.set(x, y, z);
+    this.rendererService.scene.add(particleMesh);
+    this.particles.push(particleMesh);
+
+    // Add to particle data
+    const hexColor = this.selectedColor.replace('#', '');
+    const r = parseInt(hexColor.substring(0, 2), 16) / 255;
+    const g = parseInt(hexColor.substring(2, 4), 16) / 255;
+    const b = parseInt(hexColor.substring(4, 6), 16) / 255;
+
+    const particleInfo: ParticleInfo = {
+      particle_type: ParticleType.REDSTONE,
+      x: x,
+      y: y,
+      z: z,
+      color: `${r},${g},${b}`,
+      extra: 1
+    };
+
+    if (!this.particleData.frames[this.currentFrame]) {
+      this.particleData.frames[this.currentFrame] = [];
+    }
+
+    this.particleData.frames[this.currentFrame].push(particleInfo);
+  }
+
+  /**
+   * Clears all particle visuals from the scene
+   */
+  clearParticleVisuals(): void {
+    for (const particle of this.particles) {
+      this.rendererService.scene.remove(particle);
+    }
+    this.particles = [];
+  }
+
+  /**
+   * Renders particles for a specific frame
+   */
+  renderFrameParticles(frameId: string): void {
+    if (!this.particleData.frames[frameId]) return;
+
+    for (const particleInfo of this.particleData.frames[frameId]) {
+      const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
+
+      // Parse color
+      const colorParts = particleInfo.color.split(',');
+      const color = new THREE.Color(
+        parseFloat(colorParts[0]),
+        parseFloat(colorParts[1]),
+        parseFloat(colorParts[2])
+      );
+
+      const particleMaterial = new THREE.MeshBasicMaterial({color});
+      const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
+
+      particleMesh.position.set(particleInfo.x, particleInfo.y, particleInfo.z);
+      this.rendererService.scene.add(particleMesh);
+      this.particles.push(particleMesh);
+    }
+  }
+
+  /**
+   * Removes a particle from a specific frame
+   */
+  removeParticle(frameId: string, index: number): void {
+    if (this.particleData.frames[frameId] && this.particleData.frames[frameId].length > index) {
+      this.particleData.frames[frameId].splice(index, 1);
+
+      // Update visuals if this is the current frame
+      if (frameId === this.currentFrame) {
+        this.clearParticleVisuals();
+        this.renderFrameParticles(frameId);
+      }
+    }
+  }
+
+  /**
+   * Sets the selected color for new particles
+   */
+  setSelectedColor(color: string): void {
+    this.selectedColor = color;
+  }
+
+  /**
+   * Gets the selected color
+   */
+  getSelectedColor(): string {
+    return this.selectedColor;
+  }
+
+  /**
+   * Gets the particle data
+   */
+  getParticleData(): ParticleData {
+    return this.particleData;
+  }
+
+  /**
+   * Sets the particle data
+   */
+  setParticleData(data: ParticleData): void {
+    this.particleData = data;
+  }
+
+  /**
+   * Gets the current frame
+   */
+  getCurrentFrame(): string {
+    return this.currentFrame;
+  }
+
+  /**
+   * Sets the current frame
+   */
+  setCurrentFrame(frameId: string): void {
+    this.currentFrame = frameId;
+  }
+
+  /**
+   * Gets all frames
+   */
+  getFrames(): string[] {
+    return this.frames;
+  }
+
+  /**
+   * Sets all frames
+   */
+  setFrames(frames: string[]): void {
+    this.frames = frames;
+  }
+
+  /**
+   * Generates JSON output of the particle data
+   */
+  generateJson(): string {
+    return JSON.stringify(this.particleData, null, 2);
+  }
+}

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

@@ -0,0 +1,254 @@
+import {Injectable} from '@angular/core';
+import * as THREE from 'three';
+import {RendererService} from './renderer.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlayerModelService {
+  private playerModel!: THREE.Group;
+  private skinTexture!: THREE.Texture;
+  private textureLoaded = false;
+
+  constructor(private rendererService: RendererService) {
+  }
+
+  /**
+   * Loads a Minecraft skin texture from a URL
+   * @param textureUrl The URL of the skin texture to load
+   * @returns A promise that resolves when the texture is loaded
+   */
+  loadSkinTexture(textureUrl: string): Promise<void> {
+    return new Promise((resolve) => {
+      const loader = new THREE.TextureLoader();
+      loader.load(textureUrl, (texture) => {
+        // Set texture parameters
+        texture.magFilter = THREE.NearestFilter;
+        texture.minFilter = THREE.NearestFilter;
+        this.skinTexture = texture;
+        this.textureLoaded = true;
+
+        // If the player model already exists, rebuild it with textures
+        if (this.playerModel) {
+          // Remove old model
+          this.rendererService.scene.remove(this.playerModel);
+          // Create new model with textures
+          this.createPlayerModel();
+        }
+
+        resolve();
+      });
+    });
+  }
+
+  /**
+   * Creates a player model with Minecraft-style textures and adds it to the scene
+   */
+  createPlayerModel(): THREE.Group {
+    this.playerModel = new THREE.Group();
+
+    if (this.textureLoaded) {
+      // Create textured model if texture is loaded
+      this.createTexturedPlayerModel();
+    } else {
+      // Create simple colored model if no texture is loaded
+      this.createSimplePlayerModel();
+    }
+
+    this.playerModel.renderOrder = 0;
+    this.rendererService.scene.add(this.playerModel);
+    return this.playerModel;
+  }
+
+  /**
+   * Creates a simple colored player model (without textures)
+   */
+  private createSimplePlayerModel(): void {
+    // Head
+    const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
+    const headMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
+    const head = new THREE.Mesh(headGeometry, headMaterial);
+    head.position.y = 1.35;
+    this.playerModel.add(head);
+
+    // Body
+    const bodyGeometry = new THREE.BoxGeometry(0.5, 0.7, 0.25);
+    const bodyMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff});
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    body.position.y = 0.75;
+    this.playerModel.add(body);
+
+    // Arms
+    const armGeometry = new THREE.BoxGeometry(0.2, 0.7, 0.25);
+    const armMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
+
+    const leftArm = new THREE.Mesh(armGeometry, armMaterial);
+    leftArm.position.set(-0.35, 0.75, 0);
+    this.playerModel.add(leftArm);
+
+    const rightArm = new THREE.Mesh(armGeometry, armMaterial);
+    rightArm.position.set(0.35, 0.75, 0);
+    this.playerModel.add(rightArm);
+
+    // Legs
+    const legGeometry = new THREE.BoxGeometry(0.25, 0.7, 0.25);
+    const legMaterial = new THREE.MeshLambertMaterial({color: 0x000000});
+
+    const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
+    leftLeg.position.set(-0.125, 0.15, 0);
+    this.playerModel.add(leftLeg);
+
+    const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
+    rightLeg.position.set(0.125, 0.15, 0);
+    this.playerModel.add(rightLeg);
+  }
+
+  /**
+   * Creates a textured player model using the Minecraft skin
+   */
+  private createTexturedPlayerModel(): void {
+    // Create the player with properly mapped textures
+
+    // Head - 8x8x8 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.5, 0.5, 0.5, // width, height, depth
+      [
+        {x: 8, y: 0, w: 8, h: 8},   // top
+        {x: 16, y: 0, w: 8, h: 8},  // bottom
+        {x: 16, y: 8, w: 8, h: 8},  // right
+        {x: 0, y: 8, w: 8, h: 8},   // left
+        {x: 8, y: 8, w: 8, h: 8},   // front
+        {x: 24, y: 8, w: 8, h: 8}   // back
+      ],
+      {x: 0, y: 1.35, z: 0}         // position
+    ));
+
+    // Body - 8x12x4 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.5, 0.7, 0.25, // width, height, depth
+      [
+        {x: 20, y: 16, w: 8, h: 4},  // top
+        {x: 28, y: 16, w: 8, h: 4},  // bottom
+        {x: 28, y: 20, w: 4, h: 12}, // right
+        {x: 16, y: 20, w: 4, h: 12}, // left
+        {x: 20, y: 20, w: 8, h: 12}, // front
+        {x: 32, y: 20, w: 8, h: 12}  // back
+      ],
+      {x: 0, y: 0.75, z: 0}          // position
+    ));
+
+    // Left Arm - 4x12x4 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.2, 0.7, 0.25, // width, height, depth
+      [
+        {x: 44, y: 16, w: 4, h: 4},  // top
+        {x: 48, y: 16, w: 4, h: 4},  // bottom
+        {x: 48, y: 20, w: 4, h: 12}, // right
+        {x: 40, y: 20, w: 4, h: 12}, // left
+        {x: 44, y: 20, w: 4, h: 12}, // front
+        {x: 52, y: 20, w: 4, h: 12}  // back
+      ],
+      {x: -0.35, y: 0.75, z: 0}      // position
+    ));
+
+    // Right Arm - 4x12x4 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.2, 0.7, 0.25, // width, height, depth
+      [
+        {x: 44, y: 16, w: 4, h: 4},  // top - mirror of left arm
+        {x: 48, y: 16, w: 4, h: 4},  // bottom - mirror of left arm
+        {x: 40, y: 20, w: 4, h: 12}, // right - mirror of left arm's left
+        {x: 48, y: 20, w: 4, h: 12}, // left - mirror of left arm's right
+        {x: 44, y: 20, w: 4, h: 12}, // front - same as left arm
+        {x: 52, y: 20, w: 4, h: 12}  // back - same as left arm
+      ],
+      {x: 0.35, y: 0.75, z: 0}       // position
+    ));
+
+    // Left Leg - 4x12x4 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.26, 0.7, 0.26, // width, height, depth
+      [
+        {x: 4, y: 16, w: 4, h: 4},   // top
+        {x: 8, y: 16, w: 4, h: 4},   // bottom
+        {x: 8, y: 20, w: 4, h: 12},  // right
+        {x: 0, y: 20, w: 4, h: 12},  // left
+        {x: 4, y: 20, w: 4, h: 12},  // front
+        {x: 12, y: 20, w: 4, h: 12}  // back
+      ],
+      {x: -0.125, y: 0.15, z: 0}     // position
+    ));
+
+    // Right Leg - 4x12x4 pixels in the texture
+    this.playerModel.add(this.createBoxWithUvMapping(
+      0.26, 0.7, 0.26, // width, height, depth
+      [
+        {x: 4, y: 16, w: 4, h: 4},   // top - mirror of left leg
+        {x: 8, y: 16, w: 4, h: 4},   // bottom - mirror of left leg
+        {x: 0, y: 20, w: 4, h: 12},  // right - mirror of left leg's left
+        {x: 8, y: 20, w: 4, h: 12},  // left - mirror of left leg's right
+        {x: 4, y: 20, w: 4, h: 12},  // front - same as left leg
+        {x: 12, y: 20, w: 4, h: 12}  // back - same as left leg
+      ],
+      {x: 0.125, y: 0.15, z: 0}      // position
+    ));
+  }
+
+  /**
+   * Creates a box with proper UV mapping for a Minecraft character part
+   * @param width Width of the box
+   * @param height Height of the box
+   * @param depth Depth of the box
+   * @param uvMapping Array of UV coordinates for each face (top, bottom, right, left, front, back)
+   * @param position Position of the box
+   * @returns THREE.Mesh with properly mapped textures
+   */
+  private createBoxWithUvMapping(
+    width: number,
+    height: number,
+    depth: number,
+    uvMapping: Array<{ x: number, y: number, w: number, h: number }>,
+    position: { x: number, y: number, z: number }
+  ): THREE.Mesh {
+    const geometry = new THREE.BoxGeometry(width, height, depth);
+
+    // Remap the custom face order to BoxGeometry face order: px, nx, py, ny, pz, nz
+    const faceOrder = [2, 3, 0, 1, 4, 5]; // right, left, top, bottom, front, back
+    const textureWidth = 64;
+    const textureHeight = 64;
+    const uv = geometry.attributes['uv'];
+
+    for (let i = 0; i < 6; i++) {
+      const face = uvMapping[faceOrder[i]];
+      const x1 = face.x / textureWidth;
+      const y1 = 1 - face.y / textureHeight;
+      const x2 = (face.x + face.w) / textureWidth;
+      const y2 = 1 - (face.y + face.h) / textureHeight;
+
+      let uvs: [number, number][] = [
+        [x1, y1], // top-left
+        [x2, y1], // top-right
+        [x1, y2], // bottom-left
+        [x2, y2]  // bottom-right
+      ];
+
+      const uvOffset = i * 8;
+      for (let j = 0; j < 4; j++) {
+        uv.array[uvOffset + j * 2] = uvs[j][0];
+        uv.array[uvOffset + j * 2 + 1] = uvs[j][1];
+      }
+    }
+
+    uv.needsUpdate = true;
+
+    const material = new THREE.MeshBasicMaterial({
+      map: this.skinTexture,
+      transparent: true,
+    });
+
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(position.x, position.y, position.z);
+
+    return mesh;
+  }
+}

frontend/src/app/particles/services/renderer.service.ts

@@ -0,0 +1,91 @@
+import {ElementRef, Injectable} from '@angular/core';
+import * as THREE from 'three';
+import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
+
+/**
+ * Service responsible for managing the Three.js rendering environment
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class RendererService {
+  scene!: THREE.Scene;
+  camera!: THREE.PerspectiveCamera;
+  renderer!: THREE.WebGLRenderer;
+  controls!: OrbitControls;
+
+  /**
+   * Initializes the Three.js scene, camera, renderer, and controls
+   */
+  initializeRenderer(container: ElementRef): void {
+    // Create scene
+    this.scene = new THREE.Scene();
+    this.scene.background = new THREE.Color(0xf0f0f0);
+
+    // Get container dimensions
+    const containerWidth = container.nativeElement.clientWidth;
+    const containerHeight = container.nativeElement.clientHeight;
+
+    // Create camera
+    this.camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 0.1, 1000);
+    this.camera.position.set(-1, 2, 3);
+    this.camera.lookAt(0, 1, 0);
+
+    // Create renderer
+    this.renderer = new THREE.WebGLRenderer({antialias: true});
+    this.renderer.setSize(containerWidth, containerHeight);
+
+    // Center the canvas in the container
+    this.renderer.domElement.style.display = 'block';
+    this.renderer.domElement.style.margin = 'auto';
+
+    container.nativeElement.appendChild(this.renderer.domElement);
+
+    // Initialize orbit controls
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.enableDamping = true;
+    this.controls.dampingFactor = 0.05;
+    this.controls.minDistance = 0.5;
+    this.controls.maxDistance = 4;
+    this.controls.target.set(0, 1, 0);
+    this.controls.update();
+
+    // Add lights
+    this.addLights();
+  }
+
+  /**
+   * Adds lighting to the scene
+   */
+  private addLights(): void {
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    this.scene.add(ambientLight);
+
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(1, 1, 1);
+    this.scene.add(directionalLight);
+  }
+
+  /**
+   * Handles window resize events
+   */
+  onWindowResize(container: ElementRef): void {
+    const containerWidth = container.nativeElement.clientWidth;
+    const containerHeight = 400; // Fixed height as defined in CSS
+
+    this.camera.aspect = containerWidth / containerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(containerWidth, containerHeight);
+  }
+
+  /**
+   * Renders the scene
+   */
+  render(): void {
+    if (this.controls) {
+      this.controls.update();
+    }
+
+    this.renderer.render(this.scene, this.camera);
+  }
+}

frontend/src/styles.scss

@@ -1,4 +1,5 @@
 @import '@angular/material/prebuilt-themes/azure-blue.css';
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
 :root {
   --white: #FFFFFF;