未应用Geometry.center()

Question

我有一个BufferGeometry，我会不时地改变顶点/颜色。如果我需要为顶点分配更多的空间，我会通过创建一个新的缓冲区几何来实现这一点。如果不是，我将重用我已有的一个，但更改它的drawRange。

我的问题是，当我用第一个"if(this.mesh != BufferGeometry && this.prev...“)中的新顶点更新一个顶点时。下面的部分代码中，我的几何图形不再获得center()。即使我明确地应用了它。如果几何体稍后只需要更新，它将再次居中。我该如何解决这个问题呢？(使用下面的代码使对象在center()和非中心几何体位置之间闪烁)。注意，mesh.position与此无关，它一直都是一样的。

if(this.mesh != undefined && this.prev_len > vertices.length) {
        for (var i = 0; i < vertices.length; i++) {
            this.v.setXYZ(i, vertices[i][0], vertices[i][1], vertices[i][2]);
            this.c.setXYZW(i, colors[i][0], colors[i][1], colors[i][2], 1);
        }
        this.geometry.setDrawRange(0, vertices.length); 
        this.geometry.attributes.position.needsUpdate = true;
        this.geometry.attributes.color.needsUpdate = true;
        this.geometry.computeVertexNormals();

        // Here seems to be the problem. center() is not actually applied?
        // I've debuged three.js and it seems to perform the translate() in center() function. But it seems to be changed afterwards?
        this.mesh.geometry.center();

    } else {
        this.v = new THREE.BufferAttribute(new Float32Array(vertices.length * 3), 3);
        this.c = new THREE.BufferAttribute(new Float32Array(colors.length * 3), 3);
        for (var i = 0; i < vertices.length; i++) {
            this.v.setXYZ(i, vertices[i][0], vertices[i][1], vertices[i][2]);
            this.c.setXYZW(i, colors[i][0], colors[i][1], colors[i][2], 1);
        }
        this.geometry = new THREE.BufferGeometry();
        this.geometry.dynamic = true;
        this.geometry.addAttribute('position', this.v);
        this.geometry.addAttribute('color', this.c);
        this.geometry.attributes.position.dynamic = true;
        this.geometry.attributes.color.dynamic = true;
        this.geometry.computeVertexNormals();
        this.prev_len = vertices.length;

        if(this.mesh == undefined) {
            this.mesh = new THREE.Mesh(this.geometry, this.material);
            this.mesh.position.set(
                                   this.from_x,
                                   this.from_y,
                                   this.from_z
            );
            scene.add(this.mesh);
            this.geometry.center();

        } else {
            // This works fine, the geometry becomes centered.
            this.mesh.geometry = this.geometry; 
            this.geometry.center();
        }

    }

Answer 1

似乎问题是center()不适用于已使用新位置更新的几何体。计算更新后的BufferGeometry的新中心()将创建一个错误的偏移量，该偏移量反映在对位置属性的更改中。

我的解决方案是保存从geometry.center()返回的偏移量，并将其应用于更新的几何图形。

this.offset = this.geometry.center();

然后在更新位置时手动应用它，如下所示：

this.geometry.translate(this.offset.x, this.offset.y, this.offset.z);

不确定这是一个“正确”的解决方案，还是仅仅是一种变通方法。但对我来说很有效。

Answer 2

修改"this.geometry“，然后对"this.mesh.geometry”应用"center()“。也许这是因为你的BufferGeometry和"this“对象的其他属性之间的引用断开了。