动态地将顶点添加到Three.js中的一行

Question

我想出了如何在threejs中绘制一条线,问题是我需要动态地将顶点添加到线上.当我动态地向行添加顶点时,场景不会更新.

我试过了geometry.verticesNeedUpdate = true,这似乎不起作用.

Answer 1

编辑:使用BufferGeometry,drawcalls您现在可以实现等效的功能.请参阅动态绘制带有three.js的行.

three.js r.71

不支持动态地将顶点添加到行.如Wiki中所述:

您只能更新缓冲区的内容,不能调整缓冲区的大小(这非常昂贵,基本上等同于创建新的几何体).

您可以通过预先分配更大的缓冲区来模拟调整大小,然后保持不需要的顶点折叠/隐藏.

three.js r.55

Answer 2

几天前我也碰到了这个.正如WestLangley所说,你无法开箱即用真正的动态几何,但alteq有一些"假装"的策略,并在https://github.com/mrdoob/three.js/issues上实现了预期的效果./ 342.

关于你对最后一个答案的评论,不要只是从每个帧的场景中删除并重新添加一个新行 - 你(很有可能)会产生巨大的性能损失.您需要使用得克第七的变通方法策略中的第一个或第二个.

在我的应用中,我使用了选项1,如下所示:

1. 事先创建一个THREE.Geometry对象,并使用您认为需要的顶点(或者相当多的顶点)初始化它.(在你想要显示它们之前,你还需要以某种方式隐藏它们 - 我将它们的位置设置为屏幕外.)

2. 使用该几何创建THREE.Line对象并添加到场景中.

3. 现在,当你想要在线上添加一个新点时,你必须将其索引到几何对象的顶点,找到那里最后一个未使用的点,并更新它 - 将坐标更改为真实坐标,并设置geometry.verticesNeedUpdate = true;(否则它认为没有改变).(请参阅如何在Wiki上进行更新.)

我仍然在解决我的方法上的问题,但这至少应该让你在屏幕上画线.

three.js r55