3D mesh not working with array of objects

Question

I'm making a 3D physics engine and I need to add balls when I press a button, but whenever I click it, everything goes blank. I know it does add a ball to the array of objects and adds adds a sphere to the mesh, but the canvas just goes blank.

Here's the code for the loop:

initGL()
function loop(){
    //do physics math
    balls.forEach(ball => {
        //draw sphere
        ball.draw()
        ball.phys()
    })
    //collisions
    for (let i = 0; i < substeps; i++){
        balls.forEach(ball => {
            ball.collwall()
            ball.collballs()
        })
    }
    //update the WebGL vertex array buffer and index array buffer
    mesh.update()
    runGLFrame()
    
    requestAnimationFrame(loop)
}
requestAnimationFrame(loop)

Event: Just adds a ball at 0,0,0.

    balls.push(new Ball(0,0,0,0,0,0,1,0,1,1,1,0.8))

Ball constructor: Initializes the ball object and draws a sphere.

constructor(x,y,z,vx,vy,vz,rad,r,g,b,w,bounce){
//sphere number
    this.sn=balls.length
    //current pos.
    this.p={x,y,z}
    //past pos.
    this.pp={x:x-vx,y:y-vy,z:z-vz}
    //velocity
    this.v={x:vx,y:vy,z:vz}
    //weight
    this.w=w
    //bounciness
    this.b=bounce
    //radius
    this.rad=rad
    //color
    this.c={r,g,b}
    //add sphere to mesh, vertices and indices
    mesh.addSphere(20,20,x,y,z,rad,r,g,b)
}


It was supposed to create a ball at 0,5,0, but instead it cleared everything. I copied the clear mesh code to the event to try to copy the thing that happens when I initialize it (before the loop and event) but it still doesn't work.