End first part of clean up.

assets/actor.js

@@ -1,7 +1,6 @@
 import { coordinates } from "./coordinates.js";
 import { position } from "./position.js";
 import { moving } from "./moving.js";
-import { rotating } from "./rotating.js";
 
 class actor extends coordinates {
     #movement;
@@ -13,7 +12,7 @@ class actor extends coordinates {
 
         this.#speed = 0.25;    
         this.#movement = new moving();
-        this.#rotation = new rotating();
+        this.#rotation = new moving();
     }
 
     set speed(target) {
@@ -62,20 +61,12 @@ class actor extends coordinates {
     }
 
     #update_rotation() {
-        if (this.rotation.is_right) {
-            this.rotate_clockwise(this.#speed * 10);
-        }
-
-        if (this.rotation.is_left) {
-            this.rotate_counterclockwise(this.#speed * 10);
-        }
+        this.rotate_clockwise(this.#speed * 10 * this.rotation.z);
     }
 
     #update_position() {
-        if (this.movement.is_front) this.move_front(this.#speed);
-        if (this.movement.is_back) this.move_back(this.#speed);
-        if (this.movement.is_left) this.move_left(this.#speed);
-        if (this.movement.is_right) this.move_right(this.#speed);
+        this.move_front(this.#speed * this.movement.y);
+        this.move_right(this.#speed * this.movement.x);
     }
 }
 

assets/coordinates.js

@@ -1,60 +1,22 @@
-class coordinates {
-    #x;
-    #y;
-    #z;
+import { position } from "./position.js";
+
+class coordinates extends position {
     #rotate;
     #head_rotate;
 
     constructor() {
-        this.#x = 0;
-        this.#y = 0;
-        this.#z = 0;
+        super();
+        
         this.#rotate = 0;
         this.#head_rotate = 0;
     }
 
-    get x() {
-        return this.#x;
-    }
-
-    get y() {
-        return this.#y;
-    }
-
-    get z() {
-        return this.#z;
-    }
-
     get rotate() {
         this.#check_rotate();
         
         return this.#rotate;
     }
 
-    set x(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Coordinate must be numer.");
-        }
-
-        this.#x = target;
-    }
-
-    set y(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Coordinate must be number.");
-        }
-
-        this.#y = target;
-    }
-
-    set z(target) {
-        if (typeof(target) !== "number") {
-            throw new TypeError("Coordinate must be number.");
-        }
-
-        this.#z = target;
-    }
-
     set rotate(target) {
         if (typeof(target) !== "number") {
             throw new TypeError("Coordinate must be number.");
@@ -101,8 +63,8 @@ class coordinates {
             throw new TypeError("Steps must be number.");
         }
     
-        this.#y -= Math.cos(this.#radians()) * target;
-        this.#x -= Math.sin(this.#radians()) * target;
+        this.y -= Math.cos(this.#radians()) * target;
+        this.x -= Math.sin(this.#radians()) * target;
     }
 
     move_back(target = 1) {
@@ -118,8 +80,8 @@ class coordinates {
             throw new TypeError("Steps must be number.");
         }
         
-        this.#y += Math.cos(this.#radians(-90)) * target;
-        this.#x += Math.sin(this.#radians(-90)) * target;
+        this.y += Math.cos(this.#radians(-90)) * target;
+        this.x += Math.sin(this.#radians(-90)) * target;
     }
 
     move_right(target = 1) {

assets/factor.js

@@ -20,33 +20,4 @@ class factor {
     }
 }
 
-class functional_factor extends factor {
-    #animation;
-    
-    constructor (init, animation = null) {
-        if (typeof(init) !== "function") {
-            throw new TypeError("Init must be an function.");
-        }   
-
-        if (animation !== null && typeof(animation) !== "function") {
-            throw new TypeError("Animation could only be null or function.");
-        }
-
-        const mesh = init();
-        
-        if (!(mesh instanceof three.Object3D)) {
-            throw new TypeError("Factor initializer must return Object3D.");  
-        }
-
-        super(mesh);
-        this.#animation = animation;
-    }   
-
-    loop() {
-        if (this.#animation !== null) {
-            this.#animation(this);   
-        }
-    }
-} 
-
-export { factor, functional_factor }
+export { factor }

assets/functional_factor.js

@@ -0,0 +1,33 @@
+import * as three from "three-js";
+import { factor } from "./factor";
+
+class functional_factor extends factor {
+    #animation;
+
+    constructor(init, animation = null) {
+        if (typeof (init) !== "function") {
+            throw new TypeError("Init must be an function.");
+        }
+
+        if (animation !== null && typeof (animation) !== "function") {
+            throw new TypeError("Animation could only be null or function.");
+        }
+
+        const mesh = init();
+
+        if (!(mesh instanceof three.Object3D)) {
+            throw new TypeError("Factor initializer must return Object3D.");
+        }
+
+        super(mesh);
+        this.#animation = animation;
+    }
+
+    loop() {
+        if (this.#animation !== null) {
+            this.#animation(this.mesh);
+        }
+    }
+}
+
+export { functional_factor };

assets/moving.js

@@ -1,71 +1,77 @@
-class moving {
-    #front_back;
-    #left_right;
-
-    static get left() {
-        return -1;
-    }
-
-    static get right() {
+class move_direction {
+    static get add() {
         return 1;
     }
 
-    static get front() {
-        return 1;
+    static get stop() {
+        return 0;
     }
 
-    static get back() {
+    static get sub() {
         return -1;
     }
 
-    constructor() {
-        this.stop();
+    static contains(target) {
+        if (target === move_direction.add) return true;
+        if (target === move_direction.stop) return true;
+        if (target === move_direction.sub) return true;
+    
+        return false;
     }
+}
 
-    stop() {
-        this.#left_right = 0;
-        this.#front_back = 0;
-    }
+class moving {
+    #x;
+    #y;
+    #z;
 
-    add_left() {
-        this.#left_right = moving.left;
+    constructor() {
+        this.#x = 0;
+        this.#y = 0;
+        this.#z = 0;
     }
 
-    add_right() {
-        this.#left_right = moving.right;
+    get x() {
+        return this.#x;
     }
 
-    add_front() {
-        this.#front_back = moving.front;
+    get y() {
+        return this.#y;
     }
 
-    add_back() {
-        this.#front_back = moving.back;
+    get z() {
+        return this.#z;
     }
 
-    stop_front_back() {
-        this.#front_back = 0;
-    }
+    set x(target) {
+        if (!move_direction.contains(target)) {
+            throw new TypeError("New direction must be from move direction.");
+        }
 
-    stop_left_right() {
-        this.#left_right = 0;
+        this.#x = target;
     }
 
-    get is_back() {
-        return this.#front_back === moving.back;
-    }
+    set y(target) {
+        if (!move_direction.contains(target)) {
+            throw new TypeError("New direction must be from move direction.");
+        }
 
-    get is_front() {
-        return this.#front_back === moving.front;
+        this.#y = target;
     }
 
-    get is_left() {
-        return this.#left_right === moving.left;
+    set z(target) {
+        if (!move_direction.contains(target)) {
+            throw new TypeError("New direction must be from move direction.");
+        }
+
+        this.#z = target;
     }
 
-    get is_right() {
-        return this.#left_right === moving.right;
+    stop() {
+        this.x = move_direction.stop;
+        this.y = move_direction.stop;
+        this.z = move_direction.stop;
     }
 }
 
-export { moving }
+export { moving, move_direction }

assets/position.js

@@ -1,10 +1,12 @@
 class position {
     #x;
     #y;
+    #z;
 
-    constructor(x = 0, y = 0) {
+    constructor(x = 0, y = 0, z = 0) {
         this.x = x;
         this.y = y;
+        this.z = z;
     }
 
     set x(target) {
@@ -22,6 +24,14 @@ class position {
 
         this.#y = target;
     }
+    
+    set z(target) {
+        if (typeof(target) !== "number") {
+            throw new TypeError("Z cord must be an number.");
+        }
+
+        this.#z = target;
+    }
 
     get x() {
         return this.#x;
@@ -31,6 +41,10 @@ class position {
         return this.#y;
     }
 
+    get z() {
+        return this.#z;
+    }
+
     compare(target) {
         if (!(target instanceof position)) {
             throw new TypeError("Can only compare position with position.");   
@@ -40,6 +54,7 @@ class position {
 
         result.x = target.x - this.x;
         result.y = target.y - this.y;
+        result.z = target.z - this.z;
 
         return result;
     }

assets/room.js

@@ -1,5 +1,5 @@
 import * as three from "three-js";
-import { functional_factor } from "./factor.js";
+import { functional_factor } from "./functional_factor.js";
 
 const room = (space) => {
     const cube = new functional_factor(() => {
@@ -15,6 +15,8 @@ const room = (space) => {
         mesh.position.y = 1;
 
         return mesh;
+    }, (item) => {
+        item.rotation.x += 0.01;    
     });
 
     const light = new functional_factor(() => {
@@ -25,6 +27,20 @@ const room = (space) => {
         light.position.y = 10;
 
         return light;
+    }, (item) => {
+        if (item.rotation.x == 0) {
+            item.position.y += 0.1;
+        } else {
+            item.position.y -= 0.1;
+        }
+
+        if (item.position.y > 10) {
+            item.rotation.x = 0.1;
+        }
+
+        if (item.position.y < 0) {
+            item.rotation.x = 0;
+        }
     });
 
     space.add_factor(cube);

assets/rotating.js

@@ -1,71 +0,0 @@
-class rotating {
-    #sideways;
-    #up_down;
-
-    static get top() {
-        return 1;
-    }
-
-    static get bottom() {
-        return -1;
-    }   
-
-    static get left() {
-        return -1;
-    }
-
-    static get right() {
-        return 1;
-    }
-
-    constructor() {
-        this.stop();
-    }
-
-    stop() {
-        this.#sideways = 0;
-        this.#up_down = 0;
-    }
-
-    add_top() {
-        this.#up_down = rotating.top;
-    }
-
-    add_bottom() {
-        this.#up_down = rotating.bottom;
-    }
-
-    add_left() {
-        this.#sideways = rotating.left;
-    }
-
-    add_right() {
-        this.#sideways = rotating.right;
-    }
-
-    stop_sideways() {
-        this.#sideways = 0;
-    }
-
-    stop_up_down() {
-        this.#up_down = 0;
-    }
-
-    get is_left() {
-        return this.#sideways === rotating.left;
-    }
-
-    get is_right() {
-        return this.#sideways === rotating.right;
-    }
-
-    get is_top() {
-        return this.#up_down === rotating.top;
-    }   
-
-    get is_bottom() {
-        return this.#up_down === rotating.bottom;
-    }
-}
-
-export { rotating }

assets/scene-ui.js

@@ -3,6 +3,7 @@ import { push } from "./push.js";
 import { material_icon } from "./icons.js";
 import { container } from "./container.js";
 import { position } from "./position.js";
+import { move_direction } from "./moving.js";
 
 class scene_ui {
     #box;
@@ -25,32 +26,32 @@ class scene_ui {
 
         this.#step_front = this.#create_push(
             "front", "arrow_drop_up", 
-            (player) => { player.movement.add_front(); }
+            (player) => { player.movement.y = move_direction.add; }
         );
         
         this.#step_back = this.#create_push(
             "back", "arrow_drop_down",
-            (player) => { player.movement.add_back(); }
+            (player) => { player.movement.y = move_direction.sub; }
         );
 
         this.#step_left = this.#create_push(
             "left", "arrow_left",
-            (player) => { player.movement.add_left(); }
+            (player) => { player.movement.x = move_direction.sub; }
         );
 
         this.#step_right = this.#create_push(
             "right", "arrow_right", 
-            (player) => { player.movement.add_right(); }
+            (player) => { player.movement.x = move_direction.add; }
         );
 
         this.#rotate_clockwise = this.#create_push(
             "clockwise", "rotate_right", 
-            (player) => { player.rotation.add_right(); }
+            (player) => { player.rotation.z = move_direction.add; }
         );
 
         this.#rotate_countclockwise = this.#create_push(
             "countclockwise", "rotate_left", 
-            (player) => { player.rotation.add_left(); }
+            (player) => { player.rotation.z = move_direction.sub; }
         );
 
         this.#setup_stopers();
@@ -80,19 +81,19 @@ class scene_ui {
         document.addEventListener("keydown", (action) => {
             switch (action.key) {
                 case "w":
-                    this.#worker.player.movement.add_front();
+                    this.#worker.player.movement.y = move_direction.add;
                     break;
                 
                 case "s":
-                    this.#worker.player.movement.add_back();
+                    this.#worker.player.movement.y = move_direction.sub;
                     break;
 
                 case "d":
-                    this.#worker.player.movement.add_right();
+                    this.#worker.player.movement.x = move_direction.add;
                     break;
 
                 case "a":
-                    this.#worker.player.movement.add_left();
+                    this.#worker.player.movement.x = move_direction.sub;
                     break;
 
                 default:
@@ -104,12 +105,12 @@ class scene_ui {
             switch (action.key) {
                 case "w":
                 case "s":
-                    this.#worker.player.movement.stop_front_back();
+                    this.#worker.player.movement.y = move_direction.stop;
                     break;
 
                 case "a":
                 case "d":
-                    this.#worker.player.movement.stop_left_right();
+                    this.#worker.player.movement.x = move_direction.stop;
                     break;
 
                 default:

index.html

@@ -6,6 +6,7 @@
         <script type="importmap">
             {
               "imports": {
+                "space": "./assets/space/",
                 "three-js": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
                 "three-js/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
               }