Add toggle for showing/hiding the character in RenderContainerComponent and implement binding to PlayerModelService

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

@@ -17,8 +17,13 @@
         <mat-icon>{{ onlyIntersecting ? 'visibility_off' : 'visibility' }}</mat-icon>
       </button>
 
+      <button mat-mini-fab color="primary" (click)="toggleShowCharacter()"
+              [matTooltip]="showCharacter ? 'Hide character' : 'Show character'">
+        <mat-icon>{{ showCharacter ? 'person' : 'person_off' }}</mat-icon>
+      </button>
+
       <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
-              [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+              [matTooltip]="isPlaneLocked ? 'Unlock plane' : 'Lock plane'">
         <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
       </button>
     </div>

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

@@ -102,6 +102,10 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     this.particleManagerService.onlyIntersectingParticles = !this.particleManagerService.onlyIntersectingParticles;
   }
 
+  public toggleShowCharacter(): void {
+    this.playerModelService.showCharacter = !this.playerModelService.showCharacter;
+  }
+
   /**
    * Get the current plane orientation
    */
@@ -116,6 +120,13 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.particleManagerService.onlyIntersectingParticles;
   }
 
+  /**
+   * Retrieves the value indicating whether the character is being rendered.
+   */
+  public get showCharacter(): boolean {
+    return this.playerModelService.showCharacter;
+  }
+
   /**
    * Set the plane orientation
    */

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

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
 
@@ -6,13 +6,13 @@ import {RendererService} from './renderer.service';
   providedIn: 'root'
 })
 export class PlayerModelService {
+  private readonly rendererService = inject(RendererService);
+
   private playerModel!: THREE.Group;
   private skinTexture!: THREE.Texture;
+  private characterVisible: boolean = true;
   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
@@ -60,6 +60,15 @@ export class PlayerModelService {
     return this.playerModel;
   }
 
+  public get showCharacter(): boolean {
+    return this.characterVisible;
+  }
+
+  public set showCharacter(showCharacter: boolean) {
+    this.playerModel.visible = showCharacter;
+    this.characterVisible = showCharacter;
+  }
+
   /**
    * Creates a simple colored player model (without textures)
    */