Three.js：更新几何与替换 [英] Three.js: Updating Geometries vs Replacing

问题描述

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

I have a scene with lots of objects using ExtrudeGeometry. Each of these need to update each frame, where the shape that is being extruded is changing, along with the amount of extrusion. The shapes are being generated using d3's voronoi algorithm.

参见示例。

现在我通过从场景中删除每个对象并在每个帧中重绘它来实现此目的。这非常昂贵并且导致性能问题。有没有办法编辑每个网格/几何而不是从场景中删除？这对性能有帮助吗？或者是否有更有效的重绘场景的方法？

Right now I am achieving this by removing every object from the scene and redrawing them each frame. This is very costly and causing performance issues. Is there a way to edit each mesh/geometry instead of removing from the scene? Would this help with performance? Or is there a more efficient way of redrawing the scene?

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

I'd need to edit both the shape of the extrusion and the amount of extrusion.

谢谢你看看！

推荐答案

所以我设法想出办法无需每次都重绘场景，并大大提高了性能。

So I managed to come up with a way of not having to redraw the scene every time and it massively improved performance.

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

我就是这样做的：

1. 使用虚拟
   10边多边形，使用 ExtrudeGeometry 创建模板几何体。

和以前一样，创建了一堆点，这次分配每个
点这些模板几何中的一个。

As before, created a bunch of "points", this time assigning each point one of these template geometries.

在每一帧上，遍历每个几何体，将每个顶点
更新为新顶点（使用voronoi alg，如前所述）。

On each frame, iterated through each geometry, updating each vertex to that of the new one (using the voronoi alg as before).

如果剩下额外的顶点，不nch将它们分成一个点。 （参见 http://github.com/mrdoob/three.js/wiki/Updates。）

If there are extra vertices left over, "bunch" them up into a single point. (see http://github.com/mrdoob/three.js/wiki/Updates.)

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

Looking at it now, it's quite a simple process. Before, the thought of manipulating each vertex seemed otherworldly to me, but it's not actually too tricky with simple shapes!

以下是我如何进行迭代， polycColumn 只是一个2项数组，每个项目中包含相同的多边形：

Here's how I did the iteration, polycColumn is just a 2 item array with the same polygon in each item:

// 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：更新几何与替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！