将模型导入到three.js - 性能 [英] Importing model into three.js - performance

问题描述

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

Is there a good/recommended approach regarding performance to load a 3D model from file to be used in a three.js JavaScript application (especially where the model is generated in Blender)?

我目前有以下工作流程:

I currently have the following workflow:

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

1. Create model in Blender.
2. Export using the three.js exporter.
3. Load from javascript using THREE.JSONLoader

这很好用，只是生成的 JSON 文件可能大约为 4MB，如果我能减小这个大小就好了.我想知道最好的方法是什么:-

This works great except that the resultant JSON file can be around 4MB and it would be good if I could reduce this size. I am wondering what the best approach is: -

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

我做了一些研究，代表性的例子是这里、这里，此处和此处.从我发现的主要方法似乎属于我在上面的要点中列出的方法.每个人都有一些障碍需要克服.

I have done some research, representative examples being here, here, here and here. From what I have found the main approaches seem to fall under those I have listed in the bullet points above. Each have some hurdles to overcome.

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

So, I am asking - is there a good/recommended approach regarding performance to load a model from file?

更新

所以，我问这个问题已经有一段时间了，我想我会报告我采取的方法.最后，我优化了模型，减少了顶点的数量，而不会对我使用它们的尺寸造成太大的可见质量损失.我还在客户端的 indexeddb 中缓存为 blob.

So, it has been a while since I asked this question and I thought I'd report back on the approach I took. In the end I optimised the models, reducing the number of vertices without much loss of visible quality for the size that I am using them for. I also cache on the client in indexeddb as a blob.

推荐答案

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

I've had some experience with this kind of problem. The issue here is that you model most likely has a lot of points/polygons. So no matter what format you use every point and face of your model has to be described. This ensures a large file size and there is no way around it.

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

My solution was to look at Blender rather than Three.js and optimise my models. There are a ton of posts on this topic (e.g. here, here, and here). After learning more about how Blender works, I was able to reduce most of my 4-8 Mb meshes down to < 200kb each without noticable degradation to the objects rendered in the browser.

这篇关于将模型导入到three.js - 性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！