diff --git a/js/Env.js b/js/Env.js index 1d289eb..53283ab 100644 --- a/js/Env.js +++ b/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 diff --git a/js/main.js b/js/main.js index 65980ee..c0681cd 100644 --- a/js/main.js +++ b/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(); }; diff --git a/js/utils.js b/js/utils.js index 1251b1e..6b034ef 100644 --- a/js/utils.js +++ b/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; + } + }; +}