I have an idea and want to implement it in WebGL. Normally, we have to create many vertex to form a pyramid (at least four triangle and three vertex for each triangle).

However, I want to use only one triangle to form a pyramid. The method is that I rotate the screen 90 degree after drawing one triangle. Then, I can rotate it again and drawing the second triangle and so on. Therefore, if I change the size of the triangle, I only change one time without extra effort.

But, I fail to implement it with the following coding:
Code :
for (var j = 0; j < n; j++) {
        mvRotate(1, [0, 1, 0]);
        gl.drawElements(gl.TRIANGLES, pyramidVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

It only show me one triangle. Is there any mistakes I made?