Modèle de modèle de vue-contrôleur pour le jeu javascript (Three.js). Bonne idée?

Question

Je suis en train de développer un jeu 3D dans three.js qui fonctionne complètement sur frontend (actuellement). Est-ce une bonne idée que je sépare complètement le modèle (état) et la vue? Par exemple, je manipule directement (traduisons, pivotons) mes objets en mouvement si nécessaire, mais je pense plutôt à maintenir et manipuler un vecteur de leur position dans un modèle (état du jeu), puis définir la position de l'objet à ce vecteur chaque image. Le même je dois en quelque sorte stocker la rotation de l'objet, et placez chaque image dans la vue.

Exemple concret: Lorsque vous appuyez sur la touche fléchée gauche, je traduis simplement l'objet joueur vers la gauche. Je préférerais, pour chaque image, définir l'objet joueur sur le vecteur courant dans le modèle, et sur la flèche gauche traduire le vecteur dans le modèle.

Le modèle de vue de modèle semble être une bonne idée architecturale, mais je crains que cela ne nuise aux performances?

Answer 1

Vous avez manqué le contrôleur dans le modèle MVC (Model View Controller). Le contrôleur décide comment la vue doit être mise à jour lorsque le modèle change.

Dans la première partie de votre exemple concret, le code de vue surveille le déplacement de la touche fléchée vers la gauche. C'est une mauvaise idée car chaque image est ralentie en vérifiant si une flèche gauche a été enfoncée. Dans la seconde partie de votre exemple concret, le contrôleur surveille la course de la flèche gauche et met à jour le modèle en conséquence. C'est bien parce que le contrôleur n'exécute le code d'une flèche gauche qu'une seule fois quand cela arrive. Cela signifie également que le contrôleur peut décider de la façon de gérer des choses telles que plusieurs pressions de touches ou une touche maintenue enfoncée.

Le code de vue s'exécute dans la partie WebGL (rapide = 60 images par seconde) du navigateur. Le code de touche flèche gauche s'exécute dans la partie (lente) de la file d'attente des événements du navigateur. En termes de performances, vous devez optimiser le code qui s'exécute dans la mise à jour du cadre.