Javascript 无法显示 ；旋转三角棱锥

目标：我试图显示一个具有不同形状的三角形金字塔
通过相应的滑块更改zNear、zFar、radius、theta、phi、fov和aspect的值时的透视视图。按钮旋转x，y，z是在不同的轴上旋转棱锥体

问题：到目前为止，我提出了以下代码，所有内容看起来都很到位，但我没有看到金字塔，当我尝试显示HTML文件时，它会出错

var画布；
var-gl；
var NumVertices=12；
var pointsArray=[]；
var colorsArray=[]；
var-xAxis=0；
var yAxis=1；
var-zAxis=2；
var轴=0；
varθ=[0,0,0]；
var近=0.3；
var-far=3.0；
var半径=4.0；
varθ=0.0；
var phi=0.0；
var-dr=5.0*Math.PI/180.0；
//var-thetaLoc；
变量fovy=45.0；//Y方向的视野角度（以度为单位）
变量方面=1.0；//视口纵横比
var modelViewMatrix，projectionMatrix；
var modelViewMatrixLoc，projectionMatrixLoc；
外翻眼；
常数at=vec3（0.0,0.0,0.0）；
常数up=vec3（0.0,1.0,0.0）；
变量顶点=[
vec3（0.5，-0.2722,0.2886），
vec3（0.0，-0.2722，-0.5773），
vec3（-0.5，-0.2722,0.2886），
vec3（0.5，-0.5443,0.0）
]
可变顶点颜色=[
[0.0,0.0,0.0,1.0]，//黑色
[1.0,0.0,0.0,1.0]，//红色
[1.0,1.0,0.0,1.0]，//黄色
[0.0,1.0,0.0,1.0]//绿色
];
window.onload=函数init（）
{
画布=document.getElementById（“gl画布”）；
gl=WebGLUtils.setupWebGL（画布）；
如果（！gl）{alert（“WebGL不可用”）；}
总图视口（0，0，canvas.width，canvas.height）；
纵横比=canvas.width/canvas.height；
gl.clearColor（1.0,1.0,1.0,1.0）；
总帐启用（总帐深度测试）；
//
//加载着色器并初始化属性缓冲区
//
var program=initShaders（gl，“顶点着色器”、“片段着色器”）；
gl.useProgram（程序）；
彩色金字塔（）；
var cBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY_BUFFER，cBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、展平（colorsArray）、gl.STATIC\u DRAW）；
var vColor=gl.getAttribLocation（程序，“vColor”）；
gl.VertexAttribute指针（vColor，4，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（vColor）；
var vBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、展平（pointsArray）、gl.STATIC\u DRAW）；
var vPosition=gl.GetAttriblLocation（程序，“vPosition”）；
gl.VertexAttribute指针（vPosition，4，gl.FLOAT，false，0，0）；
gl.EnableVertexAttributeArray（vPosition）；
modelViewMatrixLoc=gl.getUniformLocation（程序，“modelViewMatrix”）；
projectionMatrix=gl.getUniformLocation（程序，“projectionMatrix”）；
//用于查看参数的滑块
document.getElementById（“zFarSlider”）.onchange=function（）{
far=event.srcielement.value；
};
document.getElementById（“zNearSlider”）.onchange=function（）{
near=event.srcement.value；
};
document.getElementById（“radiusSlider”）.onchange=function（）{
半径=event.srcielement.value；
};
document.getElementById（“thetaSlider”）.onchange=function（）{
θ=event.srcielement.value*Math.PI/180.0；
};
document.getElementById（“Philider”）.onchange=function（）{
phi=event.srcielement.value*Math.PI/180.0；
};
document.getElementById（“aspectSlider”）.onchange=function（）{
aspect=event.srcElement.value；
};
document.getElementById（“fovSlider”）.onchange=function（）{
fovy=event.srcElement.value；
};
render（）；
}
函数colorPyramid（）
{
四元（0，1，2）；//底部
四边形（1，0，3）；//边0
四边形（1，2，3）；//边1
四边形（2，0，3）；//边3
}
四元函数（a、b、c）
{
var指数=[a、b、c]；
var ndx=pointsArray.length%vertexColors.length；
对于（变量i=0；i

zNear.01
3.
zfar3
10
半径0.05
10
θ-90
90
φ-90
90
视野10
120
方面0.5
2.
属性向量4位置；
属性向量4彩色；
可变的vec4颜色；
均匀矢量3θ；
统一mat4模型视图矩阵；
均匀mat4投影矩阵；
void main（）
{
//计算每个参数θ的正弦和余弦
//一次计算中的三个轴。
gl_位置=投影矩阵*模型视图矩阵*位置；
fColor=vColor；
} 
精密中泵浮子；
可变的vec4颜色；
无效的
main（）
{
gl_FragColor=fColor；
}
有几个问题

在GLSL着色器中是无效的注释。使用
/**/或`//


调用
gl.vertexattributepointer
时，代码的位置大小为4。它必须是3


代码有两个变量，称为
theta
。一个是数字，另一个是ot