Please help, I am not able to get my expected output!

$.$js file:

"use strict";

var canvas;

var gl;

var numPositions $=12$;

var positions $=[]$;

var colors $=[]$;

var xAxis $=0$;

var yAxis $=1$;

var zAxis $=2$;

var axis $=0$;

var theta $=[0,0,0]$;

var thetaLoc;

window.onload $=$ function init$()$

$\{$

canvas $=$ document.getElementById$("$gl$-$canvas"$)$;

gl $=$ canvas.getContext$(\text{'}$webgl$2\text{'})$;

if $(!$gl$)$ alert$("$WebGL $2\mathrm{.}0$ isn't available"$)$;

colorPyramid$()$;

gl$.$viewport$(0,0,$ canvas.width, canvas.height$)$;

gl$.$clearColor$(1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0)$;

gl$.$enable$($gl$.$DEPTH$\_$TEST$)$;

$//$

$//$ Load shaders and initialize attribute buffers

$//$

var program $=$ initShaders$($gl$,$ "vertex$-$shader", "fragment$-$shader"$)$;

gl$.$useProgram$($program$)$;

var cBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, cBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($colors$),$ gl$.$STATIC$\_$DRAW$)$;

var colorLoc $=$ gl$.$getAttribLocation$($ program, "aColor" $)$;

gl$.$vertexAttribPointer$($ colorLoc, $4,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($ colorLoc $)$;

var vBuffer $=$ gl$.$createBuffer$()$;

gl$.$bindBuffer$($gl$.$ARRAY$\_$BUFFER, vBuffer$)$;

gl$.$bufferData$($gl$.$ARRAY$\_$BUFFER, flatten$($positions$),$ gl$.$STATIC$\_$DRAW$)$;

var positionLoc $=$ gl$.$getAttribLocation$($program$,$ "aPosition"$)$;

gl$.$vertexAttribPointer$($positionLoc$,4,$ gl$.$FLOAT, false, $0,0)$;

gl$.$enableVertexAttribArray$($positionLoc$)$;

thetaLoc $=$ gl$.$getUniformLocation$($program$,$ "uTheta"$)$;

$//$event listeners for buttons

document.getElementById$($ "xButton" $).$onclick $=$ function $()\{$

axis $=$ xAxis;

$\}$;

document.getElementById$($ "yButton" $).$onclick $=$ function $()\{$

axis $=$ yAxis;

$\}$;

document.getElementById$($ "zButton" $).$onclick $=$ function $()\{$

axis $=$ zAxis;

$\}$;

render$()$;

$\}$

function colorPyramid$()$

$\{$

triple$(1,2,3)$; $//$i think the issue is here

triple$(2,3,0)$;

triple$(3,1,2)$;

triple$(0,2,1)$;

$\}$

function triple$($a$,$ b$,$ c$)$

$\{$

var vertices $=[$

vec$3(-0\mathrm{.}5,-0\mathrm{.}2722,0\mathrm{.}2886),$

vec$3(0\mathrm{.}0,-0\mathrm{.}2772,-0\mathrm{.}5773),$

vec$3(-0\mathrm{.}5,-0\mathrm{.}2722,0\mathrm{.}2886),$

vec$3(0\mathrm{.}0,0\mathrm{.}5443,0\mathrm{.}0)$

$]$;

var vertexColors $=[$

vec$4(0\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),//$ black

vec$4(1\mathrm{.}0,0\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0),//$ red

vec$4(1\mathrm{.}0,0\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0),//$ magenta

vec$4(0\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0,1\mathrm{.}0)//$ cyan

$]$;

$//$ We need to parition the quad into two triangles in order for

$//$ WebGL to be able to render it$.$ In this case, we create two

$//$ triangles from the quad indices

$//$vertex color assigned by the index of the vertex

var indices $=[$a$,$ b$,$ c$]$;

for $($ var i $=0$; i $$ indices.length; $++$i $)\{$

positions.push$($ vertices$[$indices$[$i$]])$;

$//$colors$.$push$($ vertexColors$[$indices$[$i$]])$;

$//$ for solid colored faces use

colors.push$($vertexColors$[$a$])$;

$\}$

$\}$

function render$()$

$\{$

gl$.$clear$($ gl$.$COLOR$\_$BUFFER$\_$BIT $|$ gl$.$DEPTH$\_$BUFFER$\_$BIT$)$;

theta$[$axis$]+=2\mathrm{.}0$;

gl$.$uniform$3$fv$($thetaLoc$,$ theta$)$;

gl$.$drawArrays$($gl$.$TRIANGLES, $0,$ numPositions$)$;

requestAnimationFrame$($render$)$;

$\}$How it should rotate: