Threejs operates on the basis that each face consists of 3 vertices. To illustrate this concept, consider the following example demonstrating how to create a geometry in r71:
geometry=new THREE.Geometry();
geometry.vertices.push(// several vertices with random coordinates
new THREE.Vector3(12,15,5),//index:0 -- the numbers represent (x,y,z) coordinates
new THREE.Vector3(10,15,5),//index:1
new THREE.Vector3(12,10,2),//index:2
new THREE.Vector3(10,10,2)//index:3
);
geometry.faces.push(
new THREE.Face3(0,1,2),//these values are indices of the vertices in the array above
new THREE.Face3(0,3,2)
);
geometry.computeFaceNormals();// this step is not crucial for our discussion here
(The specific shape resulting from these values is unspecified due to lack of precise data)
This process involves constructing two arrays: vertices and faces. During rendering, each frame depicts the faces based on the positions of their vertices.
The issue arises when a vertex is deleted from the geometry.vertices array. Consider removing the second vertex mentioned earlier - the updated array would appear as follows:
geometry.vertices=[
THREE.Vector3(12,15,5),//index:0
THREE.Vector3(12,10,2),//new index:1
THREE.Vector3(10,10,2)//new index:2
];
With the deletion, vertex at index 3 is no longer present. Consequently, during the subsequent frame render, if a face references this removed vertex (as seen in the second face), an attempt to access its coordinates will lead to an error message indicating inability to read x of undefined.
This explanation underscores the impact of vertex deletion on the array structure, causing inaccuracies in the faces' shapes and normal vectors. Moreover, any necessary buffer modifications are restricted, as emphasized in resources such as:
Dynamically Adding Vertices to a Line in Three.js
Adding geometry to a three.js mesh after render
To rectify this issue, various strategies can be employed, including adjusting vertex coordinates or concealing faces. The approach taken depends on the specific requirements of the project.
If the scene contains only a limited number of vertices, another solution may involve discarding the existing mesh and generating a new one with modified geometry lacking the problematic vertex and corrected face array.