End first part of clean up.

assets/core.js

@@ -2,7 +2,8 @@ import { color_mode } from "./color-mode.js";
 import { push } from "./push.js";
 import { material_icon } from "./icons.js";
 import { scene } from "./scene.js";
-import { scene_ui } from "./scene-ui.js"
+import { scene_ui } from "./scene-ui.js";
+import { room } from "./room.js";
 
 document.addEventListener("DOMContentLoaded", () => {
     const app = document.querySelector(".app");
@@ -14,9 +15,11 @@ document.addEventListener("DOMContentLoaded", () => {
         target.appendChild(material_icon("invert_colors"));
     });
 
-    const space = new scene();
+    const space = new scene(room);
     const controls = new scene_ui(space);
 
+    space.background = 0x303030;
+
     app.appendChild(space.canvas);
     app.appendChild(controls.box);
     app.appendChild(colors_changer);

assets/factor.js

@@ -4,18 +4,14 @@ class factor {
     #mesh;
 
     constructor(mesh) {
-        if (!(mesh instanceof three.Mesh)) {
-            throw new TypeError("Must initialize with Mesh.");
+        if (!(mesh instanceof three.Object3D)) {
+            throw new TypeError("Must initialize with Object3D.");
         }
 
         this.#mesh = mesh;
     }
 
     get mesh() {
-        if (!(this.#mesh instanceof three.Mesh)) {
-            throw new TypeError("Mesh is not initialized.");
-        }
-
         return this.#mesh;
     }
 
@@ -25,7 +21,7 @@ class factor {
 }
 
 class functional_factor extends factor {
-    #animation
+    #animation;
     
     constructor (init, animation = null) {
         if (typeof(init) !== "function") {
@@ -36,10 +32,10 @@ class functional_factor extends factor {
             throw new TypeError("Animation could only be null or function.");
         }
 
-        const mesh = init(this);
+        const mesh = init();
         
-        if (!(mesh instanceof three.Mesh)) {
-            throw new TypeError("Factor initializer must return mesh.");  
+        if (!(mesh instanceof three.Object3D)) {
+            throw new TypeError("Factor initializer must return Object3D.");  
         }
 
         super(mesh);

assets/render-engine.js

@@ -1,5 +1,6 @@
 import * as three from "three-js";
 import { actor } from "./actor.js";
+import { factor } from "./factor.js";
 
 class render_engine {
     #renderer;
@@ -15,7 +16,7 @@ class render_engine {
             throw new TypeError("Canvas must be an HTMLCanvasElement.");
         }
 
-        if (!(context instanceof WebGLRenderingContext)) {
+        if (!(context instanceof WebGL2RenderingContext)) {
             throw new TypeError("Context must be WebGL RenderingContext.");
         }
 
@@ -23,11 +24,10 @@ class render_engine {
             throw new TypeError("Player must be an actor.");
         }
 
-        this.#actors = {};
+        this.#actors = new Array();
         this.#player = player;
         this.#canvas = canvas;
         this.#scene = new three.Scene();
-        this.#scene.background = new three.Color(0x101010);
         this.#camera = new three.PerspectiveCamera(75, 1, 0.1, 1000);
 
         this.#renderer = new three.WebGLRenderer({ 
@@ -47,6 +47,26 @@ class render_engine {
         });
     }
 
+    get player() {
+        return this.#player;
+    }
+
+    get canvas() {
+        return this.#canvas;
+    }
+
+    set background(target) {
+        if (typeof(target) !== "number") {
+            throw new TypeError("Background must be an number.");
+        }
+
+        this.#scene.background = target;
+    }
+
+    get background() {
+        return this.#scene.background;
+    }
+
     #resize_canvas() {
         this.#canvas.width = window.innerWidth;
         this.#canvas.height = window.innerHeight;
@@ -61,7 +81,6 @@ class render_engine {
 
     run() {
         this.#looped = true;
-        this.#init();
         this.#loop();
     }
 
@@ -88,24 +107,13 @@ class render_engine {
         setTimeout(() => { this.#loop(); }, new_frame);
     }
 
-    #init() {
-        const geometry = new three.BoxGeometry(1, 1, 1);
-        const material = new three.MeshStandardMaterial({ color: 0x009000 });
-        this.#actors.cube = new three.Mesh(geometry, material);
-        this.#actors.cube.position.x = 10;
-        this.#actors.cube.position.y = 0;
-        this.#actors.cube.position.z = 10;
-
-        const light = new three.HemisphereLight(0x707070);
-        light.position.x = 0;
-        light.position.y = 10;
-        light.position.z = 0;
-
-        this.#scene.add(this.#actors.cube);
-        this.#scene.add(light);
+    add_factor(target) {
+        if (!(target instanceof factor)) {
+            throw new TypeError("New factor must be in factor class.");
+        }
 
-        this.#camera.position.y = 0;
-        this.#player.rotate = 270;
+        this.#actors.push(target);
+        this.#scene.add(target.mesh);
     }
 
     #sync_camera() {
@@ -120,8 +128,10 @@ class render_engine {
 
     #render() {
         this.#sync_camera();
-        this.#actors.cube.rotation.x += 0.01;
-        this.#actors.cube.rotation.y += 0.01;
+
+        this.#actors.forEach(actor => {
+            actor.loop();
+        });
 
         this.#renderer.render(this.#scene, this.#camera);
     }

assets/room.js

@@ -0,0 +1,34 @@
+import * as three from "three-js";
+import { functional_factor } from "./factor.js";
+
+const room = (space) => {
+    const cube = new functional_factor(() => {
+        const material = new three.MeshStandardMaterial({
+            color: 0xA000A0
+        });
+
+        const geometry = new three.BoxGeometry(1, 1, 1);
+        const mesh = new three.Mesh(geometry, material);
+
+        mesh.position.x = 10;
+        mesh.position.z = -10;
+        mesh.position.y = 1;
+
+        return mesh;
+    });
+
+    const light = new functional_factor(() => {
+        const light = new three.HemisphereLight(0x707070);
+        
+        light.position.x = -10;
+        light.position.z = 10;
+        light.position.y = 10;
+
+        return light;
+    });
+
+    space.add_factor(cube);
+    space.add_factor(light);
+};
+
+export { room };

assets/scene.js

@@ -1,34 +1,26 @@
 import { actor } from "./actor.js";
 import { render_engine } from "./render-engine.js"
 
-class scene {
-    #canvas;
-    #player;
-    #engine;
+class scene extends render_engine {
+    constructor(initializer = null) {
+        if (initializer !== null && typeof(initializer) !== "function") {
+            throw new TypeError("Initializer or function.");
+        }
 
-    constructor() {
-        this.#player = new actor();
-        this.#canvas = document.createElement("canvas");
-        const context = this.#canvas.getContext("webgl2");
+        const player = new actor();
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("webgl2");
 
         if (!context) {
             throw new TypeError("Browser does not support WebGL.");
         }
 
-        this.#engine = new render_engine(this.#canvas, context, this.#player);
-        this.#canvas.classList.add("space-render");
-    }
-
-    get player() {
-        return this.#player;
-    }
+        canvas.classList.add("space-render");
+        super(canvas, context, player);
 
-    get canvas() {
-        return this.#canvas;
-    }
-
-    run() {
-        this.#engine.run();
+        if (initializer) {
+            initializer(this);
+        }
     }
 }