la-visitor/assets/render-engine.js

import * as three from "three-js";

class render_engine {
    #renderer;
    #scene;
    #camera;
    #canvas;
    #actors;

    constructor(canvas, context) {
        if (!(canvas instanceof HTMLCanvasElement)) {
            throw TypeError("Canvas must be an HTMLCanvasElement.");
        }

        if (!(context instanceof WebGL2RenderingContext)) {
            throw TypeError("Context must be WebGL2 RenderingContext.");
        }

        this.#actors = {};
        this.#canvas = canvas;
        this.#scene = new three.Scene();
        this.#camera = new three.PerspectiveCamera(75, 1, 0.1, 1000);

        this.#renderer = new three.WebGLRenderer({ 
            canvas: this.#canvas,
            context: context
        });
   
        this.#update_camera();
        this.#resize_canvas();

        window.addEventListener("resize", () => {
            this.#resize_canvas();
            this.#update_camera();
        });
    }

    #resize_canvas() {
        this.#canvas.width = window.innerWidth;
        this.#canvas.height = window.innerHeight;

        this.#renderer.setSize(window.innerWidth, window.innerHeight);
    }

    #update_camera() {
        this.#camera.aspect = this.#canvas.width / this.#canvas.height;
    }

    run() {
        this.#init();
        this.#renderer.setAnimationLoop(() => { this.#render(); });
    }

    #init() {
        const geometry = new three.BoxGeometry(1, 1, 1);
        const material = new three.MeshBasicMaterial({ color: 0x004000 });
        this.#actors.cube = new three.Mesh(geometry, material);

        this.#scene.add(this.#actors.cube);

        this.#camera.position.z = 5;
    }

    #render() {
        this.#actors.cube.rotation.x += 0.01;
        this.#actors.cube.rotation.y += 0.01;

        this.#renderer.render(this.#scene, this.#camera);
    }
}

export { render_engine };