Three.js 中的渐进式加载/LOD/流式网格 [英] Progressive Loading / LOD / Streaming Mesh in Three.js

问题描述

我正在使用 STL 加载器将 stl 文件加载到一个 Three.js 场景中.这些 stl 文件的大小从 5mb 到 50mb.

I am loading stl files into a three.js scene using the STL loader. These stl files range from 5mb to 50mb.

有没有一种方法可以在模型加载时逐步加载/流式传输/增加细节级别(不确定正确的术语)，这样我的用户就不会在出现任何内容之前盯着空白屏幕几分钟?

Is there a method I can use to progressively load/stream/increase level of detail (not sure of the correct terminology) as the model loads so that my users aren't staring at a blank screen for minutes before anything appears?

如果模型是 20,000 个三角形，那么 Three.js 是否有一种方法可以先加载 2,000 个，然后再进行完全详细的模型?

If the model is 20,000 triangles, does three.js have a method for maybe loading only 2,000 first and then progressing to the fully detailed model?

推荐答案

真正的渐进式加载/网格流不是开箱即用的.不过这会很棒，而且是可行的.

Real progressive loading / mesh streaming is not there out of the box. It would be great though and is doable.

使用 POP 缓冲区在没有three.js 的情况下使用WebGL 完成:http://x3dom.org/pop/ &https://github.com/thibauts/pop-buffer

It has been done with WebGL without three.js using POP buffers: http://x3dom.org/pop/ & https://github.com/thibauts/pop-buffer

其中一个演示是:http://x3dom.org/pop/happy.html

我希望有一天我们也能为three.js提供漂亮的POP缓冲区(或类似的替代方案)渐进式加载——也在我/我们的待办事项/愿望清单中，但在此之前还有很多事情......当然不要'不介意有人早点写的:)

I hope one day we'll have nice POP buffer (or similar alternative) progressive loading for three.js too -- is in my/our todo / wish list too but many things still before that here .. sure don't mind if someone writes it earlier :)

三个确实包含一个简单的 LOD 机制，但它有助于渲染加载而不是加载时间:http://threejs.org/docs/#Reference/Objects/LOD &http://threejs.org/examples/webgl_lod.html

Three does include a simple LOD mechanism but it is to help with rendering load and not with loading time: http://threejs.org/docs/#Reference/Objects/LOD & http://threejs.org/examples/webgl_lod.html

对于一个简单的解决方案，您可以编写低 &模型的高版本并编写自定义加载逻辑以首先加载低版本 &显示它们，然后继续加载高版本等.

For a simple solution, you could author low & high versions of your models and write custom loading logic to just first load the low one & show them, then proceed to load the high version etc.

我们在一个项目中做到了这一点，按预期工作正常.我能想到的唯一缺点是它增加了获得高版本的总时间.但是低可以非常小所以没关系(在我们的例子中，低多边形没有纹理，只有垂直颜色，然后高多边形有更多的多边形，但本质上也是相当大的纹理).

We've done that in one project, works fine as expected. Only downside I can figure is that it increases the total time to get the high version. But the low can be very small so it's ok (in our case low poly untextured with just vert colours, then the high ones have much more polys but essentially quite big textures too).

这篇关于Three.js 中的渐进式加载/LOD/流式网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！