What are your thoughts on implementing the model-view-controller pattern for a JavaScript game using Three.js?

As I work on a 3D game in three.js that is entirely frontend-based at the moment, I'm considering whether separating the model (state) and view is a wise decision.

Currently, I directly manipulate the movement of objects by translating and rotating them when necessary. However, I am contemplating keeping a vector representing their position in the model (game state) and updating the object's position every frame based on this vector. Similarly, I would need to store the rotation of the object in the model and update it in the view each frame.

For example, instead of directly translating the player object to the left when the left arrow key is pressed, I could set the player object to the current vector in the model per frame and adjust the vector in the model for leftward translation upon pressing the left arrow.

While the model-view pattern appears promising from an architectural standpoint, I have concerns about its potential impact on performance. Is this separation worth exploring despite the possible performance implications?

Answer №1

One aspect often overlooked in the Model View Controller (MVC) pattern is the role of the Controller. It plays a crucial role in determining how the view should be updated based on changes in the model.

In your specific example, you initially have the view code monitoring the left arrow key stroke. However, this approach is not efficient as it slows down each frame by continuously checking for a left arrow press.

Contrastingly, when the controller takes charge of monitoring the left arrow key stroke and updating the model accordingly, it leads to better performance. The controller executes the code related to a left arrow only once when triggered, allowing it to handle multiple key presses or a key being held down effectively.

The view code operates within the fast-paced frame update (typically 60 frames per second) WebGL section of the browser, while the left arrow key code functions in the slower event queue segment. To enhance performance, it's advisable to optimize the code running in the frame update part.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

React is giving me trouble as I try to map my tables. I am struggling to figure out how to do this

I have two .CSV files: "1.csv" and "2.csv". I need to display the data from each file in a table using the BootstrapTable component. My async functions, GetData(file) and FetchCSV(file), are working fine and providing the necessary array of objects for the ...

Successive Alerts with Material-UI and React-Redux

After realizing that having multiple snackbars scattered across different components was messy, I decided to revamp my app by creating a single custom component that can be called using Redux to display any type of snackbar needed. Desired outcome: I exp ...

The function and if-else statement are experiencing malfunctions

Currently in the early stages of learning coding, I've been focusing on building a solid foundation by practicing with CodeWars. Utilizing this platform for practice has been beneficial because it offers solutions for guidance. While attempting to wor ...

Utilizing a custom vertex shader in Three.js for ray tracing on a Point Cloud

Is it possible to apply ray tracing to a Point Cloud using a custom vertex shader in three.js? Below is an example of a vertex shader: void main() { vUvP = vec2( position.x / (width*2.0), position.y / (height*2.0)+0.5 ); colorP = vec2( position.x / ( ...

The MUI toggle button does not indicate the selected input despite being configured with a value

Although the MUI toggle successfully registers user input, the selected option is not highlighted when clicked. I have included a value parameter and implemented an onChange function to update the value parameter on change. Initially, it does highlight " ...

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

What could be causing my console to display "NaN" when working with the class extension feature

During the development of my project, I encountered a problem with getting the parameter from the parent class. The value returned is NaN while the other one returns true. Here is the code snippet: class transportasi {//class parent constructor(nama ...

Vue-Router: Identified an ongoing redirection loop in a navigation guard while transitioning from the home page to the login page

I need to implement a feature where pages are blocked if there is no authentication token and users are redirected to the login page. I have two .ts pages (main and routes) routes: import { RouteRecordRaw } from 'vue-router'; const routes: Route ...

Prevent Angular Material Autocomplete from automatically updating the input field

As part of my project, I am working on creating a country autocomplete input feature. To make the input more reusable, I am looking to turn it into a component using the ControlValueAccessor interface. The goal is to have the component accept a FormControl ...

Improprove Your Code Efficiency Using ng-repeat and ng-if

Hello everyone, Here is the structure of my table : https://i.sstatic.net/rTbiC.png The code for the table is as follows: <tr ng-repeat="item in captions | filter:search:strict"> <td>{{item.CodeId}}</td> <td>{{item.EnumC ...

Using NodeJS Script in conjunction with Express and setInterval

Feeling stuck and unable to find clear answers for the best solution. I have a Node.js app that serves APIs with MongoDB as the database. I created a setInterval within the request to update the data every 30 seconds. This was done to prevent the Node.js ...

Tips for preventing a function from being triggered twice during a state change

I'm currently working with a react component that looks like this: const [filter, setFilter] = useState(valueFromProps); const [value, setValue] = useState(valueFromProps); const initialRender = useRef(true); useEffect(() => { if (initialRender. ...

Prevent a dynamically generated text input from being used if it exceeds a specific character limit in VUE.JS

I am currently working on a Vue template that dynamically creates Bootstrap text inputs. The goal is to allow the user to retrieve the values onSubmit from these inputs. One requirement I have is to disable an input if the length of the text exceeds 10 ch ...

Make the checkbox font-weight bold when it is checked

Attempting to apply custom CSS to enhance the appearance of checkboxes using input and label elements. The goal is to make the font-weight bold when a user clicks on the checkbox, and then revert it back to regular if clicked again. Currently stuck on this ...

Generating objects dynamically using an array of paths in dot notation

Is it possible to dynamically generate an object with an array of strings in dot notation? The idea is to construct a JSON object from a CSV file, filter the properties, and create a new JSON object. Let's say we want to pass something like this... ...

Transform the API response into a map in Angular version 16

When I receive a JSON response from a Java server, the structure looks like this: { "summary": { }, "runs": { "key_1": { "object_1": { }, "object_2": { ...

Pass a reply from a function to a route in expressjs

I'm currently working on a project where I need to retrieve JSON data from an API using an Express server in Node.js. However, I'm facing some confusion regarding how Node.js manages this process. In my code, I have both a function and a route de ...

Trouble arises when attempting to add an image to a spherical object

I've searched through various threads, Googled extensively, watched YouTube tutorials.... But I can't seem to figure out how to apply a texture to my Sphere. When I run this code, all I see is a white Sphere without any texture showing up. Can so ...

The functionality of event.charCode is ineffective in Firefox

I'm in a dilemma with restricting my text field to only accept numbers. Currently, I have the following code snippet: onkeypress="return (event.charCode >= 48 && event.charCode <= 57)" The issue arises when I attempt to delete (using b ...

How to visually deactivate a flat button ( <input type="button"> ) programmatically with JavaScript

I am facing an issue with my buttons. I have one regular button and another flat button created using input elements. After every click, I want to disable the buttons for 5 seconds. The disable function is working properly for the normal button, but for th ...