12

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

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

4

3 回答 3

15

编辑：使用BufferGeometry，drawcalls您现在可以实现等效的功能。请参阅使用 three.js 动态绘制一条线。

三.js r.71

不支持向直线动态添加顶点。如维基中所述：

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

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

三.js r.55

于 2013-02-12T20:16:00.117 回答
5

几天前我也遇到了这个问题。正如 WestLangley 所说，你不能开箱即用地做真正的动态几何，但 alterq 有几个策略来“伪造它”并在https://github.com/mrdoob/three.js/issues上实现预期效果/342。

关于您对最后一个答案的评论，不要只是从每一帧的场景中删除并重新添加新行 - 您（很可能）会受到巨大的性能影响。您需要使用 alterq 的第一个或第二个变通策略。

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

  1. 提前创建一个 THREE.Geometry 对象，并使用您认为需要的尽可能多的顶点（或者相当多的顶点）对其进行初始化。（在显示它们之前，您还需要以某种方式隐藏它们 - 我将它们的位置设置为屏幕外。）

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

  3. 现在，当您想向该线添加一个新点时，您必须索引几何对象的顶点，找到其中最后一个未使用的点，然后更新它 - 将坐标更改为真实坐标，然后设置geometry.verticesNeedUpdate = true;（否则认为没有任何改变）。（请参阅如何在 wiki 上进行更新。）

我仍然在解决我的方法中的问题，但这至少应该让你在屏幕上得到一个线条图。

三.js r55

于 2013-02-16T23:44:58.310 回答
2

正如 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

于 2014-04-24T01:15:34.353 回答