Three.js：更新几何与替换

Question

我有一个包含很多对象的场景，使用 ExtrudeGeometry。这些中的每一个都需要更新每个帧，其中正在变化的形状正在变化，以及挤出量。这些形状是使用 d3 的 voronoi 算法生成的。

See example.

现在我通过从场景中移除每个对象并在每一帧重新绘制它们来实现这一点。这非常昂贵并且会导致性能问题。有没有办法编辑每个 mesh/geometry 而不是从场景中移除？这对性能有帮助吗？或者有没有更有效的重绘场景的方法？

我需要编辑挤出的形状和挤出量。

感谢观看！

Answer 1

如果你不改变面的数量，你可以使用变形目标 http://threejs.org/examples/webgl_morphtargets.html

你应该

创建你的几何图形
克隆几何图形并对其进行修改，例如几何柱的最大长度
将两个几何体都设置为基础几何体的变形目标，例如

baseGeo.morphTargets.push( {名称："targetName"，顶点：[modifiedVertexArray]} );

之后，您可以使用 mesh.updateMorphTargets()

为网格设置动画

参见 http://threejs.org/examples/webgl_morphtargets.html

Answer 2

所以我设法想出了一种不必每次都重新绘制场景的方法，它极大地提高了性能。

http://jsfiddle.net/x00xsdrt/4/

我是这样做的：

使用虚拟对象创建了 "template geometry" 和 ExtrudeGeometry 10 边形。
和之前一样，创建了一堆"points"，这次赋值每个指向这些模板几何形状之一。
在每一帧上，遍历每个几何体，更新每个顶点到新的那个（像以前一样使用 voronoi alg）。
如果还有多余的顶点，"bunch"将它们合成一个点。（参见 http://github.com/mrdoob/three.js/wiki/Updates。）

现在看来，这是一个非常简单的过程。以前，操纵每个顶点的想法对我来说似乎是超凡脱俗的，但实际上对于简单的形状来说并不难！

这是我进行迭代的方式，polycColumn 只是一个包含 2 个项目的数组，每个项目都具有相同的多边形：

// Set the vertex index
var v = 0;

// Iterate over both top and bottom of poly
for (var p=0;p<polyColumn.length;p++) {

    // Iterate over half the vertices
    for (var j=0;j<verts.length/2;j++) {

        // create correct z-index depending on top/bottom
        if (p == 1) {
            var z = point.extrudeAmount;
        } else {
            var z = 0;
        }

        // If there are still legitimate verts
        if (j < poly.length) {

            verts[v].x = poly[j][0];
            verts[v].y = poly[j][1];
            verts[v].z = z;

        // If we've got extra verts, bunch them up in the same place
        } else {

            verts[v].x = verts[v - 1].x;
            verts[v].y = verts[v - 1].y;
            verts[v].z = z;
        }

        v++;
    }
}

point.mesh.geometry.verticesNeedUpdate = true;

Three.js：更新几何与替换

Three.js: Updating Geometries vs Replacing

javascript

performance

three.js