Changing the .vertices array in three js geometry

Question

I have two THREE.Points objects in a three js scene. The scene starts showing all the points in the points1 object which works perfectly. The issue is that a user can type in a search string into the search var using the dat.gui library, and I want to show only the points they search for. I am doing this by creating a new vertex array for the pointsS geometry and assigning it in my update function. points disappears correctly on search, and I know that pointsS.geometry.vertices contains the right values, but it never shows them in the scene. Is this kind of update possible? Excerpt from up update loop below.

Thanks!

searchVertices = [];
for (let i = 0; i < vertices.length; i++) {
  let particle = vertices[i];
  if (search !== "") {
    let matchStr = particle.name;
    let re = new RegExp(search, 'i');
    if (matchStr.match(re)) {
      searchVertices.push(particle);
    }
  }
}

if (search !== "") {
  pointsS.geometry.vertices = searchVertices;
  points1.visible = false;
} else {
  points1.visible = true;

points1.geometry.verticesNeedUpdate = true;
pointsS.geometry.verticesNeedUpdate = true;

Reassigning the vertices array is not valid three.js code. I expect the approach used in this three.js example would be appropriate. That is, use BufferGeometry with a visible attribute. If you don't care about efficiency, you can just create a new geometry each time, but I wouldn't recommend it. — WestLangley

Matt Adelman Matt Adelman · Accepted Answer · 2018-02-26T19:28:56

For anyone stumbling upon this in the future, what I ended up doing was hiding the vertices outside the field of view but multiplying them all by a fixed scalar. When I wanted to return them to the view, I multiplied them by the reciprocal.

Changing the .vertices array in three js geometry

1 Answers