add settings panel

js/Env.js

@@ -1,10 +1,5 @@
 import { Element } from "./Element.js";
-
-export class Quality {
-    static ultra = 1;
-    static medium = 2;
-    static low = 3;
-}
+import { Quality } from "./utils.js";
 
 export class Env {
     constructor() {
@@ -21,13 +16,8 @@ export class Env {
         this.renderer = new THREE.WebGLRenderer();
         this.renderer.setSize(window.innerWidth, window.innerHeight);
 
-        // Modification of the scene scale without modifying the size
-        this.quality = Quality.ultra;
-        this.renderer.setSize(
-            window.innerWidth / this.quality,
-            window.innerHeight / this.quality,
-            false
-        );
+        // Change the default quality of the rendered scene
+        this.setQuality(Quality.medium);
 
         // Store all elements in the env
         this.elements = [];
@@ -76,7 +66,15 @@ export class Env {
      * @param {Quality} quality
      * @returns
      */
-    setQuality = (quality) => (this.quality = quality);
+    setQuality = (quality) => {
+        this.quality = quality;
+
+        this.renderer.setSize(
+            window.innerWidth / quality,
+            window.innerHeight / quality,
+            false
+        );
+    };
 
     /**
      * Add an element to the scene

js/main.js

@@ -1,14 +1,16 @@
 import { Env } from "./Env.js";
 import { Plane } from "./Plane.js";
 import { Player } from "./Player.js";
+import { Quality } from "./utils.js";
 
 window.addEventListener("load", () => main());
 
 const main = () => {
+    // THREE.js
     const env = new Env();
-
     document.body.appendChild(env.getDomElement());
 
+    // World
     const plan = new Plane(
         window.innerWidth / 50,
         10,
@@ -17,11 +19,22 @@ const main = () => {
     );
     env.addToScene(plan);
 
+    // Player
     const player = new Player(THREE.Color.NAMES.red);
     env.addToScene(player);
-
     addEventListener("keypress", player.controlUser);
 
+    // GUI
+    const gui = new dat.gui.GUI({ hideable: false, closeOnTop: true });
+    const menu = Quality.buildGUI(env.quality);
+    for (const quality in menu) {
+        gui.add(menu, quality)
+            .listen()
+            .onFinishChange(() => {
+                Quality.update(env.setQuality, menu, quality);
+            });
+    }
+
     /**
      * Run the game
      */
@@ -35,5 +48,6 @@ const main = () => {
         requestAnimationFrame(animate);
     };
 
+    // Run it
     animate();
 };

js/utils.js

@@ -65,3 +65,67 @@ export class Rotation {
         return this.jump == this.default.y;
     };
 }
+
+export class Quality {
+    static ultra = 1;
+    static medium = 2;
+    static low = 3;
+
+    /**
+     * Build an object of the settings panel
+     * @param {Quality} defaultValue Default quality
+     * @returns An object for dat.gui
+     */
+    static buildGUI = (defaultValue) => {
+        const res = {
+            Low: false,
+            Medium: false,
+            Ultra: false,
+        };
+
+        // Update the default value to true
+        switch (defaultValue) {
+            case this.low:
+                res.Low = true;
+                break;
+            case this.medium:
+                res.Medium = true;
+                break;
+            case this.ultra:
+                res.Ultra = true;
+                break;
+        }
+
+        // Return the object
+        return res;
+    };
+
+    /**
+     * Update the quality of the renderer
+     * @param {property} fnQuality
+     * @param {{string: boolean}} menu
+     * @param {string} quality
+     */
+    static update = (fnQuality, menu, quality) => {
+        // All the field to false
+        for (const field in menu) {
+            menu[field] = false;
+        }
+
+        // The select field to true
+        menu[quality] = true;
+
+        // Update the quality
+        switch (quality) {
+            case "Low":
+                fnQuality(this.low);
+                break;
+            case "Medium":
+                fnQuality(this.medium);
+                break;
+            case "Ultra":
+                fnQuality(this.ultra);
+                break;
+        }
+    };
+}