javascript - Three.js 中的渐进式加载/LOD/流式网格

Question

我正在使用 STL 加载器将 STL 文件加载到 three.js 场景中。这些 STL 文件的范围从 5mb 到 50mb。

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

如果模型有 20,000 个三 Angular 形，three.js 是否有一种方法可以先加载 2,000 个，然后再发展到完全详细的模型？

Answer 1

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

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

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

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

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

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

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