WebGL trouble using an index buffer to draw a sphere mesh using an offset

Question

I am trying to draw a sphere mesh that I can later modify to look like the leaves of a tree. However, there are also vertices in my pointsArray that precede those generated from my sphere mesh. I have an index buffer containing the indices for drawing each triangle in order, but I need to access the last portion of vertices that is my sphere mesh without having the index buffer draw triangles from the other vertices. Here I create buffers for the vertices, colors, and texture coordinates to transfer them to my shader code. I also have an index buffer created for the sphere mesh.

function loadBuffers()
{   
    // Load the colors for the triangles and enable the attribute vColor
    var cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );

    var vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );


    // Load the vertices for the triangles and enable the attribute vPosition
    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    var tBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(texturesArray), gl.STATIC_DRAW );

    var vTexCoord = gl.getAttribLocation( program, "vTexCoord" );
    gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vTexCoord );

    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    console.log(indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexBuffer), gl.STATIC_DRAW);
    iBuffer.itemSize = 1;
    iBuffer.numItems = indexBuffer.length;
}

Here is my sphere generation code:

function sphere()
{
    genSphereVertices(1, 10, 10, 0, 0, 1.5);
    plotSphere(10, 10);
}

function genSphereVertices(radius, latBands, lonBands, X, Y, Z)
{
    var normRadius = 1;

    for (var lat = 0; lat < latBands + 1; ++lat)
    {
        var theta = lat * Math.PI/latBands; //0 to pi
        var z = normRadius * Math.cos(theta);

        for (var lon = 0; lon < lonBands + 1; ++lon)
        {
            var phi = 2 * lon * Math.PI/lonBands;//0 to 2pi

            var u = Math.sqrt((normRadius * normRadius) - (z * z));

            var x = u * Math.cos(phi);
            var y = u * Math.sin(phi);

            //here I push my new x,y,z vertex to the pointsArray,
            //however pointsArray is also being used to draw a building
            //with textures
            pointsArray.push(vec4((X+x)*radius, (Y+y)*radius, (Z+z)*radius, 1.0));
            numVertices++;
            colorsArray.push(faceColors[lon%7]);
        }
    }
}

function plotSphere(latBands, lonBands)
{
    for (var lat = 0; lat < latBands; ++lat)
    {
        for (var lon = 0; lon < lonBands; ++lon)
        {
            //map indices to tell what order to connect each vertex
            var vA = lat * (lonBands + 1) + lon;
            var vB = vA + (latBands + 1);
            var vC = vA + 1;
            var vD = vB + 1;

            indexBuffer.push(vA);
            indexBuffer.push(vB);
            indexBuffer.push(vC);
            indexBuffer.push(vB);
            indexBuffer.push(vD);
            indexBuffer.push(vC);
        }
    }
}

And here is where I am trying to draw the sphere after I draw the rest of the vertices.

function render()
{
    objOffset = 0;

    if (loadedImageCount == imageTextures.length)//textures on building
    {
        for (var i = 0; i < numFaces; ++i)//move through each face and map textures to specific faces
        {
            if (i < 60){//walls
                gl.uniform1i(fs_textureLoc, 0);
            }else if (i < 69){//building tops
                gl.uniform1i(fs_textureLoc, 1);
            }else if (i < 73){//slanted rooves
                gl.uniform1i(fs_textureLoc, 2);
            }else if (i < 93){//stairs
                gl.uniform1i(fs_textureLoc, 3);
            }
            //draw each face (each is a rect with 2 triangles)
            gl.drawArrays(gl.TRIANGLES, objOffset, twoTriangles);
            objOffset += twoTriangles;
        }
    }


    //now I want to draw the sphere, but the index buffer is starting from
    //the beginning of the pointsArray! :(
    gl.drawElements(gl.TRIANGLES, iBuffer.numItems, gl.UNSIGNED_SHORT, 0);

    //animate scene
    requestAnimFrame(render);
}

When this code runs, the index buffer starts drawing from the beginning of the pointsArray, drawing all over the building. How do I start at an offset of the pointsArray to only use the index buffer for the sphere mesh