Pipeline.ts

import * as THREE from "three";

import { DragControls } from "three/examples/jsm/controls/DragControls";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Shape } from "./Shapes";

interface PipelineObserver {
    /**
     * @breif RendererObserver is an abstract class that is used to observe the renderer.
     * The renderer calls in the rendering loop update of this observer.
     * @param {number} _deltaTime gives the time in seconds between two frames
     */
    update(_deltaTime: number): void;
}

abstract class PipelineData {
    observers: Array<PipelineObserver>;
    draggables: Array<THREE.Object3D>;
    scene: THREE.Scene;

    allowOrbit: boolean = true;

    constructor() {
        this.observers = new Array<PipelineObserver>();
        this.draggables = new Array<THREE.Object3D>();
        this.scene = new THREE.Scene();
        this.data();
    }

    protected addShape(shape: Shape, observer: boolean = true, draggable: boolean = false) {
        this.scene.add(shape.object3d);
        if (observer) {
            this.observers.push(shape);
        }
        if (draggable) {
            this.draggables.push(shape.object3d);
        }
    } 

    /**
     * @brief Should define a scenario with observers, draggables and scene.
     * It initializes the scene and adds the draggables to the scene.
     * Based on that the pipeline can be initialized.
     */
    abstract data(): void;
}

class Pipeline {

    public readonly renderer: THREE.WebGLRenderer;
    public readonly camera: THREE.PerspectiveCamera;

    public readonly orbitControls: OrbitControls;
    public readonly dragControls: DragControls;

    private scene?: THREE.Scene;
    private observer: Array<PipelineObserver>;
    private startTime: number;

    constructor() {
        // CREATE CAMERA
        this.camera = new THREE.PerspectiveCamera(75, 
            window.innerWidth / window.innerHeight, 0.1, 1000);
        this.camera.position.z = 5;

        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight
            this.camera.updateProjectionMatrix()
        }, false);