Backbone.js and three.js - MVC with canvas - javascript

I am in the planning stages of developing a small web-app that does some interactive data visualization in a 3D space.
For widest browser compatibility, three.js looks like the best choice, as I can render the same scene using WebGL, canvas, or SVG.
Ideally, I am wanting to use backbone.js to provide a nice MVC layer and avoid some tediousness of writing the ajax, but before I get to far with it, I was wondering if anyone had any experience/tips/words of advice in trying to make that work.
Assuming canvas or WebGL, It seems like the backbone.view could be pretty easily abstracted to support a three.js model. The render function is meant to be overridden. I could attach a simple listener on the canvas and then us some three.js trickery to pull out the specific model for firing off events (which seems like it would be the most difficult task). Backbone models and collections would work just fine with my API (I think). The Controllers would probably be a bit more difficult, but could possibly even be used by saving the position of the camera or something similar.
With SVG rendering, this is obviously simplified with all the elements being in the DOM, but I question if SVG would even be a good option when there are 1,000+ objects in the scene. Anyone have experience with large scene graphs in SVG?
Is there other libraries, either for rendering or similar to backbone, that would be a better route to take? I am open to suggestion on the matter.

Your estimation of how you would use Backbone is pretty right-on, and there's even an added bonus, I think. You mentioned something about using "three.js trickery to pull out the specific model for firing off events (which seems like it would be the most difficult task)" - not sure if I just am getting confused by the use of model, but when a view render is triggered, the collection/model it is bound to is passed to that render method - there would be no need for a lookup. And through Underscore's _.bindAll(), you can bind a render method (or any method on the view, really) to any event generated by the collection _.bindAll() is executed on. AND you can trigger all your own custom events off said model/collection. The possibilities are pretty limitless due to this. And yes, a render method could be anything, so interaction with three.js in that space should be perfect. That's a lot of "and"s!
What you want to do is definitely possible, sounds really fun, and is definitely a great application for Backbone.

Related

A way to use images for 3D mockups using javascript

Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.

How can I set a a state variable from two UI elements?

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

How to efficiently listen to multiple events and how to structure application?

I am currently planing quite a complex web application (WebGL - Three.JS) and I am experimenting with a few tests right now. The problem I stumbled upon is rising a lot of questions for me and I don't know a correct way to do it and I would really appreciate if anyone could point me to the right direction.
So here is the thing:
My applications needs a lot of event listeners and It needs to be as modular as possible. So that I can remove something without breaking everything.
With events listeners I mean, that I need to check If user clicked on element, if element is selected, If it is, change tools view,... Pretty complex. I will also develope a few tools (Cloning, mirroring,..) and I can clearly see that with functions I won't be able to do it efficently and my code will get VERY MESSY. Or for example; If users select "cube draw" control, I need to lock some of the controls, and then listen for the click event,.. But the problem is, how do ižI structure so many different click events?
Actually I draw a simple sketch what I need:
Also, so that you won't think I am lazy, I've written a simple example of what I need with pure Javascript functions,.. It's already buggy, sphagheti and I don't think it's the right way. It has to be another way right?
My attemp:
JsFiddle
I am looking for something like: http://shapesmith.net/, but it's written with Backbone and so many different files that I cannot get a clue how it's made.
add your domelement to the trackballcontrol.. so that the click event made on renderer portion will identify by trackball control...
controls = new THREE.TrackballControls( camera, renderer.domElement );

JavaScript Resource Planning Component / Gantt Chart with Editing Capabilities

I'm looking for a JS-based Resource Planning Component, where i have the available resources on the left and the resource load on the right.
So far i only found a few gantt chart implementation, which lack add, move and editing capabilitys. I wounder whether such a component exists.
I don't know of any out of the box solutions, but this is something that could probably be implemented somewhat easily. If you create several divs for rows, and then sub-divs for resources, you could build something like the spec.
First, keep track of all the resources, and the durations, in some kind of a datastructure.
I'd probably use backbone JS's models, since that's what I use for most everything.
Create a render function, that places an array of resources on the page, and lays them out, etc.
Create add/remove functions that add/remove elements, then call the render function to relayout the elements
To add dragging, I'd use jQuery UI Draggable, this makes it fairly easy to drag elements, and includes places for attaching callbacks when elements are dragged, dropped, etc.
This may take some doing, as dragging the duration of the events/resources may not be perfectly straightforward.
There is a quite nice library called DHTMLX Scheduler which also includes a timeline view:
http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
You can get the free GNU GPL version or a commercial one. A running example can be found here: http://booking.javaplanner.com/
I found http://sourceforge.net/projects/jsrmt/ but it is GPL licensed. I am curious to hear, if you found anything else meanwhile.
I have found lots of js gantt tools, but they all have performance isuues with 1000+ tasks.
This one works best http://www.bryntum.com/products/gantt/, but it's quite expensive.

BackboneJS and JQuery plugins architecture playing together in a MiniPhotoshop project

I'm rather new with BackboneJS.
it is exciting stuff for somebody who worked with plain JSONs until now. :)
I am used to design JQuery Widgets and plugins to encapsulate logic / presentation.
Backbone seems much more flexible with its MV* approach.
I am redesigning a "mini-photoshop" project for work. a javascript/html page which you can add elements like labels, images, buttons, change their properties, drag&drop them around and change their z-index, etc.
I took an approach of having a Backbone collection of elements that represents the drawing.
I thought of using a jquery plugin to be able to create this workspace in everypage i'd like.
so i could do something like:
$('.wrapper').miniPhotoshop({
elements:elements, // BB collection
painter:painter // an object that knows how to draw
});
the painter is seperated from plugin so i could easily change the way the collection is drawn.
So the objects here are:
miniPhotoshop - a jquery plugin that gets a BB collection
painter - an object consisting of methods that know how to draw the elements.
propertyBox - a jquery widget that when an element is clicked on shows its properties.
My question is does this jquery-backbone salad make any sence?
Apologies if this is an open-ended question, just hoping someone tried something similar before and be able to point me in the right direction.
Thanks!
I don't about others, but I wouldn't take jQuery for the structure of your app. I think Backbone is really good for structuring code, and jQuery is great for playing around with the dom.
My approach would be to use Backbone views to control the flow of your App and jQuery to play with/manipulate the dom inside Backbone views.

Categories