I am utilizing angularJS and Three.js for the frontend of my project.
The Three.js object is created in the following manner:
var ThreeObject = (function() {
//constructor
function ThreeObject() {}
ThreeObject.prototype.init = functio init (){
//initialize scene, renderer, etc.
};
ThreeObject.prototype.update = function update(){
//update various objects attached to the scene
};
ThreeObject.prototype.draw = function draw(){
this.renderer.render(this.scene,this.camera);
};
return ThreeObject;
})();
Within my angular controller, I call:
app.controller('Controller', ['$scope', '$http', function($scope,$http) {
var foo = new ThreeObject(800,600);
foo.init(document.getElementById('container'));
function loop() {
foo.update();
foo.draw();
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}]);
Given that angular advocates for MVC, my initial thought was to encapsulate all Three.js behavior within a model. However, I'm uncertain if this is the correct approach.
Would it be more beneficial to create a directive to handle the loop? Are there any advantages to this alternative approach?