将模型导入到three.js中 - 性能

有没有关于从文件中加载3D模型以用于three.js JavaScript应用程序（尤其是在Blender中生成模型的地方）的性能的推荐方法？将模型导入到three.js中 - 性能

目前，我有以下流程：

Blender的创建模式。
使用three.js导出器导出。使用THREE.JSONLoader

这个工程除了伟大的javascript

负载产生的JSON文件可绕4MB，这将是很好的，如果我能减少这种大小。我想知道最好的方法是什么 -

缩减大小的JSON文件（有点棘手，因为大部分的JS minifiers我来翻过的似乎不工作），或
使用gzip压缩（需要一些握手），或者使用OpenCTM格式（不幸的是，脚本在Blender 2.70中似乎不起作用）。使用二进制格式（我想这需要转换回JSON）或
使用OpenCTM格式。

我做了一些研究，有代表性的例子是here，here，here和here。从我所发现的主要方法看来，这些方法似乎都落在我在上面的要点中列出的方法之下。每个人都有一些要克服的障碍。

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

更新

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

来源

2014-04-15 acarlon

我看到你对我的问题的评论，我可以证实我使用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导出插件从搅拌机出口，并在项目中包含js-openctm。不记得更多的细节，因为我现在正在处理完全不同的东西。

PS：我敢肯定，我有openctm插件手动加载到搅拌机，它的工作

来源

2014-04-15 04:23:21 aledalgrande

+1谢谢，我会坚持Blender 2.70并回报。 – acarlon

我已经受够了这种问题的一些经验。这里的问题是你的模型很可能有很多点/多边形。所以无论你使用什么格式，你的模型的每一个点和面都必须被描述。这确保了大文件的大小，并且没有办法绕过它。

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

来源

2014-04-15 14:41:20 Dan

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

帮助我减少了模型大小，关于** Decimation Modifier **的[文章]（http://blog.artillery.com/2012/05/reducing-polygon-count-and-file-sizes.html）是很有帮助！ – user1398498

目前随着搅拌机three.js所出口国（如写这个，我指的是R71版本开发的），有几件事情可以做：

拨下来的精度值，短的浮点值精度越小文件
取消选中Indent，这是对动画文件巨大，因为它消除空格和\ n个字符
实验使用msgpack压缩（需要mspack package安装）msgpack loading example

在某些时候，寿，JSON格式可能不是最理想的，也许其他格式将工作更好地为您服务。正如以前的帖子所述;模型优化也有很长的路要走。

来源

2015-03-02 23:09:11 repsac

谢谢，值得一看。 – acarlon

将模型导入到three.js中 - 性能

回答

相关问题