Backbone.js 和 Three.js - 带画布的 MVC
我正处于开发一个小型网络应用程序的规划阶段，该应用程序可以在 3D 空间中进行一些交互式数据可视化。
为了实现最广泛的浏览器兼容性， Three.js 看起来是最佳选择，因为我可以使用 WebGL、canvas 或 SVG 渲染相同的场景。
理想情况下，我想使用backbone.js来提供一个漂亮的MVC层并避免编写ajax的一些乏味，但在我深入研究它之前，我想知道是否有人在尝试时有任何经验/技巧/建议使之发挥作用。
假设使用 canvas 或 WebGL，backbone.view 似乎可以很容易地抽象出来以支持 Three.js 模型。渲染函数应该被重写。我可以在画布上附加一个简单的侦听器，然后使用一些 Three.js 技巧来提取用于触发事件的特定模型（这似乎是最困难的任务）。主干模型和集合可以很好地与我的 API 配合使用（我认为）。控制器可能会更困难一些，但甚至可以通过保存相机的位置或类似的东西来使用。
使用 SVG 渲染，所有元素都位于 DOM 中，这显然得到了简化，但我怀疑当场景中有 1,000 多个对象时，SVG 是否是一个不错的选择。有人有使用 SVG 大型场景图的经验吗？
是否有其他库，无论是用于渲染还是类似于主干，这将是更好的路线？我愿意接受有关此事的建议。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您对如何使用 Backbone 的估计非常正确，我认为甚至还有额外的好处。你提到了一些关于使用“ Three.js 诡计来提取触发事件的特定模型（这似乎是最困难的任务）” - 不确定我是否只是对模型的使用感到困惑，但是当触发视图渲染，它绑定到的集合/模型被传递给该渲染方法 - 不需要查找。通过 Underscore 的 _.bindAll()，您可以将渲染方法（或视图上的任何方法，实际上）绑定到由执行 _.bindAll() 的集合生成的任何事件。并且您可以触发所述模型/集合的所有自定义事件。因此，可能性是无限的。是的，渲染方法可以是任何东西，因此在该空间中与 Three.js 的交互应该是完美的。这里面有很多“和”！
你想做的事情绝对是可能的，听起来真的很有趣，而且绝对是 Backbone 的一个很棒的应用程序。
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.