Three.js and MVC

Question

In three.js I've created a basic 'hero creation' program. Similar to Elder Scrolls swapping through heads,body etc to create a full character. I'd like to make it more interactive by letting other users edit the same hero. Each user will just read the same JSON file off the server.

To structure my code better I want to use MVC pattern but I'm confused about how to apply it. I think all my event listeners will be a controller but would the View just be my three.js render() and the Model just the underlying JSON? Specifically applying MVC to this graphics domain is my big problem. If this is very bad form, would you have any suggestions on a different pattern/way to structure?

Answer 1

The View layer should:

• Contain the rendering logic
• Process user input and forward it to the controller layer (using the strategy pattern)
• Keep your three.js objects in sync with the models

The Controller layer should:

• Process the user input and update the models

The Models are your main entities. They shouldn't have any three.js related functionality.

I wrote a blog post that explains how to combine MVC and Three.js in detail: http://hecodes.com/2016/07/using-mvc-pattern-for-building-complex-three-js-applications/ .

You might find it helpful.

Answer 2

You may use a combination of MVC and Bridge pattern.

In this combination, you may abstract your view and use bridge pattern to allow your view to be created in several different formats.

Following link might help you : http://www.oodesign.com/bridge-pattern.html

Answer 3

To understand easily, you may consider this:

var modelObject = {};
var viewObject = {};
var controllerObject = {};

modelObject.str = "Welcome";

viewObject.showStr = function(modelObject) {
    console.log(modelObject.str);
}

controllerObject.handler = function() {
    viewObject.showStr(modelObject);
}

You can now call the function by handler while onclick or any event etc.,

Usually model is an abstraction of a data/data source