Add opacity control for intersection plane

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

@@ -1,5 +1,11 @@
 <div #rendererContainer class="renderer-container">
   <div class="plane-controls-overlay">
+    <div>
+      <mat-form-field appearance="outline" style="width: 10ch">
+        <mat-label>Opacity</mat-label>
+        <input matInput type="number" [(ngModel)]="opacity" min="0" max="1" step="0.01" placeholder="">
+      </mat-form-field>
+    </div>
     <div class="button-row">
       <button mat-mini-fab color="primary" (click)="resetCamera()"
               matTooltip="Reset camera">

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

@@ -7,6 +7,8 @@ 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';
+import {FormsModule} from '@angular/forms';
+import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
 
 @Component({
   selector: 'app-render-container',
@@ -14,7 +16,11 @@ import {InputHandlerService} from '../../services/input-handler.service';
     MatIcon,
     MatMiniFabButton,
     MatTooltip,
-    NgIf
+    NgIf,
+    FormsModule,
+    MatInput,
+    MatFormField,
+    MatLabel
   ],
   templateUrl: './render-container.component.html',
   styleUrl: './render-container.component.scss'
@@ -74,6 +80,14 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.intersectionPlaneService.isPlaneLocked();
   }
 
+  public set opacity(opacity: number) {
+    this.intersectionPlaneService.currentOpacity = opacity;
+  }
+
+  public get opacity(): number {
+    return this.intersectionPlaneService.currentOpacity;
+  }
+
   /**
    * Toggle the plane locked state
    */

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

@@ -25,6 +25,7 @@ export class IntersectionPlaneService {
   private planePosition: number = 0; // Position in 1/16th of a block
   private currentOrientation: PlaneOrientation = PlaneOrientation.HORIZONTAL_FRONT;
   private planeLocked: boolean = false;
+  private opacity: number = 0.05;
 
   constructor(private rendererService: RendererService) {
   }
@@ -152,11 +153,19 @@ export class IntersectionPlaneService {
     this.intersectionPlane.material = new THREE.MeshBasicMaterial({
       color: color,
       transparent: true,
-      opacity: 0.05,
+      opacity: this.opacity,
       side: THREE.DoubleSide
     });
   }
 
+  public set currentOpacity(opacity: number) {
+    this.opacity = opacity;
+  }
+
+  public get currentOpacity(): number {
+    return this.opacity;
+  }
+
   /**
    * Gets the intersection plane
    */