三.js 和 MVC答案

【问题标题】：Three.js and MVC三.js 和 MVC
【发布时间】：2023-03-03 03:28:01
【问题描述】：

在three.js 中，我创建了一个基本的“英雄创建”程序。类似于上古卷轴交换头部、身体等来创造一个完整的角色。我想通过让其他用户编辑同一个英雄来使其更具交互性。每个用户只会从服务器读取相同的 JSON 文件。

为了更好地构建我的代码，我想使用 MVC 模式，但我对如何应用它感到困惑。我认为我所有的事件侦听器都将是一个控制器，但 View 是否只是我的 three.js render() 而 Model 只是底层的 JSON？将 MVC 专门应用于这个图形领域是我的大问题。如果这是非常糟糕的形式，您对不同的模式/结构有什么建议吗？

【问题讨论】：

你找到适合你的东西了吗？
不幸的是，没有。最后，我只是将我的代码构建成用于组织的模块。当我有空闲时间时，webgl mvc 框架可能是一个有趣的项目:)

标签： javascript design-patterns model-view-controller architecture three.js

【解决方案1】：

视图层应该：

包含渲染逻辑
处理用户输入并将其转发到控制器层（使用策略模式）
保持您的 three.js 对象与模型同步

控制器层应该：

处理用户输入并更新模型

模型是您的主要实体。它们不应该有任何与three.js 相关的功能。

我写了一篇博文，详细解释了如何结合 MVC 和 Three.js：http://hecodes.com/2016/07/using-mvc-pattern-for-building-complex-three-js-applications/。

您可能会发现它很有帮助。

【讨论】：

【解决方案2】：

您可以结合使用 MVC 和 Bridge 模式。

在这种组合中，您可以抽象视图并使用桥接模式来允许以多种不同格式创建视图。

以下链接可能对您有所帮助：http://www.oodesign.com/bridge-pattern.html

【讨论】：

【解决方案3】：

为了容易理解，你可以这样考虑：

var modelObject = {};
var viewObject = {};
var controllerObject = {};

modelObject.str = "Welcome";

viewObject.showStr = function(modelObject) {
    console.log(modelObject.str);
}

controllerObject.handler = function() {
    viewObject.showStr(modelObject);
}

您现在可以通过handler 而onclick 或任何事件等调用该函数，

通常模型是数据/数据源的抽象

【讨论】：