Within my code, I am working with a BufferGeometry that undergoes changes in vertices and colors periodically. To manage this, I create a new buffergeometry if more space is required for vertices; otherwise, I reuse the existing one by adjusting its drawRange property.
However, an issue arises when I update the BufferGeometry with new vertices without triggering the center() function as expected. Although I apply center(), the geometry doesn't get centered correctly, leading to flickering between centered and non-centered positions. The problem seems to lie in the translate() performed during the center() function but somehow getting altered afterward. How can I resolve this inconsistency? Note that mesh.position remains constant throughout.
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();
// The issue seems to be related to center() not being applied properly.
// Despite debugging three.js, it appears that the translate() method within the center() function is executed but then modified 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 {
// When assigning the new geometry, it gets centered properly.
this.mesh.geometry = this.geometry;
this.geometry.center();
}
}