javascript - 将模型导入 three.js - 性能

标签 javascript json three.js blender

关于从文件加载 3D 模型以用于 three.js JavaScript 应用程序(尤其是在 Blender 中生成模型的情况下)的性能,是否有好的/推荐的方法?

我目前有以下工作流程:

  1. 在 Blender 中创建模型。
  2. 使用 three.js 导出器导出。
  3. 使用 THREE.JSONLoader 从 javascript 加载

除了生成的 JSON 文件可能约为 4MB 之外,这非常有用,如果我能减小这个大小就更好了。我想知道最好的方法是什么:-

  • 缩小 JSON 文件(有点棘手,因为我遇到的大多数 js 缩小器似乎都不起作用),或者
  • 使用 gzip 压缩(需要一些握手),或者
  • 使用二进制格式(我想这需要转换回 JSON)或
  • 使用 OpenCTM 格式(不幸的是,脚本似乎无法在 Blender 2.70 中运行)。

我做了一些研究,代表性的例子是here , here , herehere .根据我的发现,主要方法似乎属于我在上面的要点中列出的方法。每个人都有一些障碍需要克服。

所以,我想问 - 是否有关于从文件加载模型的性能的良好/推荐方法?

更新

所以,自从我提出这个问题以来已经有一段时间了,我想我应该报告一下我所采用的方法。最后,我优化了模型,减少了顶点的数量,而不会损失我使用它们的尺寸的可见质量。我还将 indexeddb 中的客户端缓存为 blob。

最佳答案

我对这类问题有过一些经验。这里的问题是您的模型很可能有很多点/多边形。因此,无论您使用何种格式,都必须描述模型的每个点和面。这确保了大文件大小并且没有办法解决它。

我的解决方案是查看 Blender 而不是 Three.js 并优化我的模型。关于这个主题有很多帖子(例如 hereherehere )。在详细了解 Blender 的工作原理后,我能够将大部分 4-8 Mb 的网格减少到每个 < 200kb,而浏览器中呈现的对象没有明显退化。

关于javascript - 将模型导入 three.js - 性能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23073947/

相关文章:

javascript - 使用 setTimeout() 函数从 localStorage 中删除项目

javascript - 当文本为非英文时,水平滚动文本不会滚动

javascript - 如何将 javascript 测验结果更改为基于权重的评分?

javascript - 通过 chrome 扩展检查 cookie 是否存在

opengl-es - 在顶点着色器中定位顶点后如何更新法线?

javascript - 在 THREE.js 中创建 50000 多个文本粒子

javascript - 向上计数 jQuery ID

javascript - Angular ng-options 选择未设置为初始值

javascript - JSON 字符串化子列表

javascript - 如何从场景中删除网格的子集?