将模型导入three.js - 性能

Posted 2023-03-23

【中文标题】将模型导入three.js - 性能

【英文标题】：Importing model into three.js - performance

【发布时间】：2014-05-29 05:32:18

【问题描述】：

在从文件加载 3D 模型以在 three.js javascript 应用程序中使用（尤其是在 Blender 中生成模型的地方）的性能方面，是否有一种好的/推荐的方法？

我目前有以下工作流程：

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

这很好用，只是生成的 JSON 文件可能在 4MB 左右，如果我能减小这个大小就更好了。我想知道最好的方法是什么：-

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

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

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

更新

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

【参考方案1】：

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

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

【讨论】：

+1 谢谢，我也会看看这个。 json 文件看起来确实压缩得很好，所以我可能会最终将两者结合起来。

帮助我减少了很多模型尺寸，这个article 关于 Decimation Modifier 非常有帮助！

【参考方案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 中才能工作

【讨论】：

+1 谢谢，我会坚持使用 Blender 2.70 并报告。

【参考方案3】：

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

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

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

【讨论】：

谢谢，值得一看。