Backbone.js 和 three.js - 带画布的 MVC答案

【问题标题】：Backbone.js and three.js - MVC with canvasBackbone.js 和 three.js - 带画布的 MVC
【发布时间】：2014-09-20 03:19:22
【问题描述】：

我正处于开发一个小型网络应用程序的计划阶段，该应用程序在 3D 空间中进行一些交互式数据可视化。

对于最广泛的浏览器兼容性，three.js 看起来是最佳选择，因为我可以使用 WebGL、canvas 或 SVG 渲染相同的场景。

理想情况下，我想使用backbone.js 来提供一个不错的MVC 层并避免编写ajax 的一些乏味，但在我深入了解它之前，我想知道是否有人有任何经验/提示/的话尝试使这项工作发挥作用的建议。

假设 canvas 或 WebGL，backbone.view 似乎可以很容易地抽象为支持 three.js 模型。渲染函数旨在被覆盖。我可以在画布上附加一个简单的侦听器，然后使用一些 three.js 技巧来提取特定模型来触发事件（这似乎是最困难的任务）。骨干模型和集合可以很好地与我的 API 配合使用（我认为）。控制器可能会有点困难，但甚至可以通过保存相机的位置或类似的东西来使用。

使用 SVG 渲染，这显然简化了所有元素都在 DOM 中，但我怀疑当场景中有 1000 多个对象时，SVG 是否是一个不错的选择。有人对 SVG 中的大型场景图有经验吗？

是否有其他库，无论是用于渲染还是类似于骨干网，这将是一个更好的途径？我愿意就此事提出建议。

【问题讨论】：

我建议使用Backbone.Controller 来管理内容之间的转换。 IE。管理多个游戏或多个级别或任何需要加载大量新数据的东西。控制器还应该绑定到 hashbang 路由，以便您可以为特定游戏/关卡添加书签 hashbang url。
嗨。作为一个有趣的问题，你是怎么做到的？很少有使用复杂计算机图形的主干.js 应用程序示例，我想知道它是否是最佳解决方案，因为它不允许您将模型绑定到开箱即用的画布“视图”。

标签： javascript backbone.js three.js

【解决方案1】：

您对如何使用 Backbone 的估计非常正确，我认为甚至还有额外的好处。您提到了一些关于使用“three.js 技巧来提取特定模型以触发事件（这似乎是最困难的任务）”的内容 - 不确定我是否只是对模型的使用感到困惑，但是当视图渲染被触发，它绑定的集合/模型被传递给该渲染方法 - 不需要查找。通过 Underscore 的 _.bindAll()，您可以将渲染方法（或视图上的任何方法，实际上）绑定到集合 _.bindAll() 执行时生成的任何事件。并且您可以从所述模型/集合中触发所有您自己的自定义事件。因此，可能性是无限的。是的，render 方法可以是任何东西，因此在该空间中与 three.js 的交互应该是完美的。那是很多“和”！

你想做的绝对是可能的，听起来很有趣，绝对是 Backbone 的一个很棒的应用程序。

【讨论】：