Backbone.js and three.js - MVC with canvas

Question

I'm at the planning stage of developing a small web application that does some interactive visualization of data in three-dimensional space.

For the broadest browser compatibility, three.js looks like the best choice, since I can display the same scene using WebGL, canvas or SVG.

Ideally, I want to use backbone.js to provide a good level of MVC and avoid some of the tediousness of writing ajax, but before I get to it, I was wondering if anyone had any experience / advice / words of advice in trying to do this work.

Assuming canvas or WebGL, it looks like backbone.view can be fairly easily abstracted to support the three.js model. The rendering function is for overriding. I could attach a simple listener on the canvas, and then we use the three.js trick to pull out a specific model for triggering events (which seems like it will be the most difficult task). Trunk models and collections will work with my API (I think). The controllers will probably be a little more complicated, but can even be used if you keep the camera position or something like that.

With SVG rendering, this obviously simplifies with all the elements in the DOM, but I doubt that SVG would even be a good option if there are more than 1000 objects in the scene. Does anyone have experience with large scene graphics in SVG?

Are there any other libraries designed to render or resemble a backbone network that would be better used? I am open to suggestions on this.

Answer 1

Your assessment of how you will use Backbone is pretty correct, and I think it’s even an added bonus. You mentioned something about using “triya .js tricks” to get a specific model for shooting from events (which seems like it will be the hardest task) "- not sure if they just confuse me using the model, but when rendering is called view, collection / model binding tied to this rendering method is not required for searching, and through Underscore _.bindAll () you can bind the rendering method (or any method in the view) to any event generated by the _.bindAll () collection. And you can trigger all your own events outside of the specified model / collection. Because of this, the possibilities are pretty endless. And yes, the rendering method can be anything, so interacting with the .js tag in this space should be perfect. That's a lot of "and" s!

What you want to do, of course, probably sounds a lot of fun and is definitely a great app for Backbone.