Question

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

我尝试了geometry.verticesNeedUpdate = true，但这似乎不起作用。

Answer 1

编辑：使用BufferGeometry和drawcalls，您现在可以实现等效功能。请参阅Drawing a line with three.js dynamically。

three.js r.71

不支持动态地向顶点添加顶点。如Wiki中所述：

您只能更新缓冲区的内容，无法调整缓冲区大小（这非常昂贵，基本上等同于创建新几何体）。

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

three.js r.55

Answer 2

我也在几天前碰到了这个。正如WestLangley所说，你不能开箱即用真正的动态几何，但alteq有一些'假装'的策略，并在https://github.com/mrdoob/three.js/issues/342达到预期的效果。

关于你对最后一个答案的评论，不要只是从每个帧的场景中删除并重新添加一个新行 - 你（很可能）会产生巨大的性能打击。您需要使用changedq的变通方法中的第一个或第二个。

在我的应用程序中，我使用了选项1：

预先创建一个THREE.Geometry对象，并使用您认为需要的顶点（或者相当多的顶点）初始化它。（在你想要显示它们之前，你还需要以某种方式隐藏它们 - 我将它们的位置设置为屏幕外。）
使用该几何体创建一个THREE.Line对象并添加到场景中。
现在，当您想要在线上添加一个新点时，您必须将其索引到几何对象的顶点，找到那里最后一个未使用的点，并更新它 - 将坐标更改为实际坐标，并设置geometry.verticesNeedUpdate = true;（否则它认为没有改变）。（请参阅维基上的How to do updates。）

我仍在解决我的方法上的问题，但至少应该让你在屏幕上画一条线。

three.js r55

Answer 3

正如WestLangley的回答所说，你不能这样做。这是我决定使用的公认的hacky解决方法：

通过使用我的行的起点填充geometry.vertices来分配比我需要的更多的顶点
当我要添加的新点出现时，将数组的内容向左移，并在geometry.vertices的最后一个数组条目中写入新点

代码：要创建新行：

function createNewLine(startingPoint){
    var geometry = new THREE.Geometry();
    for (i=0; i<MAX_LINE_POINTS; i++){
    geometry.vertices.push(startingPoint.clone());
    }
    myLine = new THREE.Line(geometry, lineMaterial);
    myLine.geometry.dynamic = true;
    scene.add(myLine);
    render();
}

向该行添加一个点：

function addPoint(myPoint) {
    myLine.geometry.vertices.push(myLine.geometry.vertices.shift()); //shift the array
    myLine.geometry.vertices[maxLinePoints-1] = myPoint; //add the point to the end of the array
    myLine.geometry.verticesNeedUpdate = true;
    render();
}

你最终得到的是一条线，其中有一堆点叠在一起，然后是你想要渲染的点。我在three.js git存储库上提交了一个问题，以便更简单地解决这个问题。 https://github.com/mrdoob/three.js/issues/4716

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

3 个答案: