How to stop duplicate scene when clicking the button

Questions
, , ,
1

good day
I’m facing the problem of duplicate coordinate of points when I click The button for example first Click gave me 100 points and The second click gave 200 points as shown in this picture

Capture
Capture1737×822 257 KB

I need just to gave only 100 points even if click many Times I used points.dispose() but not working.

here is the code used

document.getElementById('geobutton').onclick=function(event){
const formulaStr=document.getElementById('customvalue').value;
const formula = new Function('x', 'y', 'return ' + formulaStr);
for ( let i = 0; i < 10; i ++ ) {
for ( let j = 0; j < 10; j ++ ) {
	const y =formula(i,j);
	vertices.push( new THREE.Vector3(i, y, j) );
document.getElementById('Areacustom').value=90*1.11;
}}
const customgeometry=new THREE.BufferGeometry().setFromPoints(vertices);
const cutomMaterial=new THREE.PointsMaterial( { color:'yellow',size:0.2 } );
const points = new THREE.Points( customgeometry, cutomMaterial );
scene.add( points );
// triangulate x, z
var indexDelaunay = Delaunator.from(
  vertices.map(v => {
    return [v.x, v.z];
  })
);

var meshIndex = []; // delaunay index => three.js index
for (let i = 0; i < indexDelaunay.triangles.length; i++){
  meshIndex.push(indexDelaunay.triangles[i]);
}

customgeometry.setIndex(meshIndex); // add three.js index to the existing geometry
customgeometry.computeVertexNormals();


var mesh = new THREE.Mesh(
  customgeometry, // re-use the existing geometry
  new THREE.MeshNormalMaterial({wireframe:true})
);

scene.add(mesh)
 points.geometry.dispose();
mesh.geometry.dispose();
}
2

Most likely the points get accumulated in array vertices, as you always push new points into it, but never remove them. If you add vertices=[] does it resolve your problem:

document.getElementById('geobutton').onclick=function(event){
   ...
   vertices = []; // clear the array of vertices
   for ( let i = 0; i < 10; i ++ ) {
      for ( let j = 0; j < 10; j ++ ) {
	   const y =formula(i,j);
	   vertices.push( new THREE.Vector3(i, y, j) );
   ...
}}
3

Thank you The code worked

1 Like