Question

是否有一个关于性能的好/推荐方法来加载来自文件的3D模型以在three.js JavaScript应用程序中使用（特别是在Blender中生成模型的情况下）？

我目前有以下工作流程：

在Blender中创建模型。
使用three.js导出器导出。
使用THREE.JSONLoader

这很好用，除了生成的JSON文件大约是4MB，如果我可以减小这个大小，那将会很好。我想知道最好的方法是什么： -

缩小JSON文件（有点棘手，因为我遇到的大多数js minifiers似乎都没有用），或者
使用gzip压缩（需要一点握手）或
使用二进制格式（我想这需要转换回JSON）或
使用OpenCTM格式（遗憾的是，这些脚本似乎不适用于Blender 2.70）。

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

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

更新

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

Answer 1

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

我的解决方案是查看Blender而不是Three.js并优化我的模型。此主题有大量帖子（例如here，here和here）。在了解了Blender如何工作的更多信息之后，我能够将我的4-8 Mb网格中的大多数减少到＆lt;每个200kb，对浏览器中呈现的对象没有明显的降级。

Answer 2

我看到你对我的问题的评论，我可以确认我使用了Blender 2.68a。要从openctm格式加载，我做了：

var loader = new THREE.CTMLoader();
...
loader.load( 'models/basic_model.ctm',  function( geometry, material ){
    // create mesh and position it
    var material = new THREE.MeshPhongMaterial({ color: 0xEEEEEE, shininess: 100, side: THREE.DoubleSide }),
        mesh = new THREE.Mesh( geometry, material );
    // Faces have an orientation that orientation decides which side is which. And the culling removes the backside in normal circumstances

    mesh.position = position;
    mesh.scale.set( 30, 30, 30 );

    // render
    scene.add( mesh );
    render();

    meshes[ 'basic_model' ] = mesh;
}, {} );

您需要使用openctm export插件从Blender导出，并在项目中包含js-openctm。不记得更多细节，因为我现在正在研究完全不同的东西。

PS：我非常确定我必须手动将openctm插件加载到Blender才能工作

Answer 3

使用当前的Blender Three.js导出程序（截至编写本文时我指的是r71开发版），您可以执行以下操作：

调低精度值，缩短浮点值精度文件越小
取消选中Indent，这对于动画文件非常重要，因为它会删除空格和\ n字符
尝试使用msgpack压缩（需要安装mspack package）msgpack loading example

但是，在某些时候，JSON格式可能不是最理想的，也许其他格式对您来说效果更好。如先前的帖子所述;模型优化也有很长的路要走。

将模型导入three.js - 性能

3 个答案: