将模型导入three.js - 性能

Question

在从文件加载 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、here和here。根据我的发现，主要方法似乎属于我在上面的要点中列出的方法。每个人都有一些障碍需要克服。

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

更新

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

Answer 1

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

我的解决方案是查看 Blender 而不是 Three.js 并优化我的模型。关于这个主题有很多帖子（例如here、here 和 here）。在详细了解了 Blender 的工作原理后，我能够将大部分 4-8 Mb 网格减少到每个小于 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 导出插件从 Blender 导出，并在您的项目中包含 js-openctm。不记得更多细节了，因为我现在正在研究完全不同的东西。

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

Answer 3

使用当前的 Blender Three.js 导出器（在撰写本文时，我指的是 r71 开发版），您可以做一些事情：

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

在某些时候，JSON 格式可能不是最理想的，也许其他格式更适合您。正如之前的帖子所述；模型优化也有很长的路要走。