将模型导入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. 使用从PHP加载THREE.JSONLoader

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 minifiers似乎不起作用），或


• 使用gzip压缩（需要一点握手），或


• 使用二进制格式（我想象）这需要转换回JSON）或


• 使用OpenCTM格式（遗憾的是，这些脚本似乎不适用于Blender 2.70）。

• Minify the JSON file (a bit tricky as most of the js minifiers I have come accross don't seem to work), or
• Use gzip compression (a bit of handshaking required), or
• Use a binary format (I imagine this requires conversion back to JSON) or
• Use OpenCTM format (unfortunately the scripts don't seem to work in 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屋！