三.js:更新几何图形与替换

Three.js: Updating Geometries vs Replacing

本文关键字：替换 几何图形 更新 js      更新时间：2023-09-26

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

请参阅示例。

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

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

感谢您的观看！

如果您不更改人脸数量，则可以使用变形目标 http://threejs.org/examples/webgl_morphtargets.html

你应该

  1. 创建几何图形
    2. 克隆几何图形
  2. 并对其进行修改，例如几何柱的最大长度

  3. 例如，将两个几何体设置为基本几何体的变形目标

    baseGeo.morphTargets.push（ { name： "targetName"， vertices： [ modifiedVertexArray ] });

之后，您可以使用mesh.updateMorphTargets（）对网格进行动画处理

请参阅 http://threejs.org/examples/webgl_morphtargets.html

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

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

我是这样做的：

  1. 使用假人创建具有ExtrudeGeometry的"模板几何"10 面多边形。

  2. 和以前一样，创建了一堆"点"，这次分配每个指向这些模板几何图形之一。

  3. 在每个帧上，遍历每个几何体，更新每个顶点到新的（像以前一样使用沃罗诺伊藻）。

  4. 如果还有多余的顶点，请将它们"堆"成一个点。（请参阅 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;
相关文章：