绘制调用如何在three.js 中工作？

Question

我有许多可能很长的折线（或者很短，顶点数非常不稳定）要显示，所以我正在考虑将它们打包成一组固定大小（比如说 10000 个顶点）位置 BufferAttribute 并发送一个 @987654326 @ 每条折线。如果多段线越过 10000 限制边界，我可以将其拆分，重复上一个缓冲区的最后一个顶点作为新缓冲区的第一个顶点，然后继续处理多个 THREE.Line 对象。

我的理解是在最近的three.js中drawcall是由addGroup()定义的，但是我在理解与setDrawRange()的链接时遇到了麻烦。

在此示例中，我将 setDrawRange() 替换为 addGroup()：http://jsfiddle.net/1v00pxx5/，但它不再具有动画效果 (Drawing a line with three.js dynamically)。

我换了：

line.geometry.setDrawRange( 0, drawCount );

由

line.geometry.clearGroups();
line.geometry.addGroup( 0, drawCount );

看起来我误解了一些东西，因为它渲染了所有内容，而不仅仅是我定义的单个组。

这是我疯狂的上下文：我正在构建一个访问 USB 的 chrome 打包应用程序，并且 webgl 和 USB 都必须在主 JS 线程上，但有时在将几何图形上传到 webgl 时，它会使 USB 饿死，并且我不能使用更大的 USB 缓冲区，因为 USB 电缆另一端的设备没有足够的内存。

Answer 1

BufferGeometry.groups 现在用于支持多种材质（以前的 MultiMaterial 或 MeshFaceMaterial ）。例如，

geometry.clearGroups();
geometry.addGroup( start1, count1, 0 ); // materialIndex 0
geometry.addGroup( start2, count2, 1 ); // materialIndex 1

var mesh = new THREE.Mesh( geometry, materialsArray );

设置geometry.drawRange 将渲染几何的子范围。

geometry.setDrawRange( start, count );

var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
var line = new THREE.Line( geometry, material );

小提琴：http://jsfiddle.net/w67tzfhx/

three.js r.91