Javascript WebGL中照相机的范围滑块

我正在尝试使用范围滑块来更改Webgl中的远平面和相机角度，但我做不到。如何使代码从滑块读取值，然后更改摄影机透视图中的值

//应用程序信息。
var-app=app |{}；
函数initGL（）{
var gl=app.gl；
总帐启用（总帐深度测试）；
德普丰克总帐（莱夸尔总帐）；
总图视口（0,0，app.can.width，app.can.height）；
gl.clearColor（0,0,0,1.0）；
总账清除（app.gl.COLOR_BUFFER_BIT |总账深度_BUFFER_BIT）；
var vs=createShaderFromElement（app.gl，“vs”）；
var fs=createShaderRomeElement（app.gl，“fs”）；
app.progObject=buildProgram（app.gl，vs，fs）；
总账使用程序（app.progObject）；
}
函数initScene（）{
var gl=app.gl；
//几何体缓冲区（顶点）
//
变量位置=[
//正面
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0,
//背面
-1.0, -1.0, -1.0, -1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0, -1.0, -1.0, -1.0,
//顶面
-1.0, 1.0, -1.0, -1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0, -1.0, 1.0, -1.0,
//底面
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, -1.0, -1.0,
//右脸
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
1.0, -1.0, -1.0,
//左脸
-1.0, -1.0, -1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, -1.0, -1.0, -1.0, -1.0
];
app.nPoints=positions.length/3；
变量颜色=[
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0,
0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0,
0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0,
1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1
];
var-loc，缓冲区；
//创建和复制位置缓冲区。
loc=gl.GetAttriblLocation（app.progObject，“位置”）；
buffer=gl.createBuffer（）；
gl.EnableVertexAttributeArray（loc）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttributePointer（loc，3，gl.FLOAT，false/*无标准化*/，0/*步幅*/，0/*偏移*/）；
总账缓冲数据（总账数组缓冲区、新Float32Array（位置）、总账静态绘图）；
//创建和复制颜色缓冲区。
loc=gl.GetAttriblLocation（app.progObject，“颜色”）；
buffer=gl.createBuffer（）；
gl.EnableVertexAttributeArray（loc）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
gl.VertexAttributePointer（loc，3，gl.FLOAT，false/*无标准化*/，0/*步幅*/，0/*偏移*/）；
总账缓冲数据（总账数组缓冲区、新Float32Array（颜色）、总账静态绘图）；
//找制服。
app.pmLocation=gl.getUniformLocation（app.progObject，“projMatrix”）；
app.mmLocation=gl.getUniformLocation（app.progObject，“modelMatrix”）；
app.vmLocation=gl.getUniformLocation（app.progObject，“viewMatrix”）；
var mat4=glMatrix.mat4；
app.projMatrix=mat4.create（）；
app.modelMatrix=mat4.create（）；
app.viewMatrix=mat4.create（）；
app.pcam=mat4.create（）；
app.mvpMatrix=mat4.create（）；
var近=0.1；
mat4.透视图（app.projMatrix，Math.PI/4.0/*45度*/，1,0.1，farChanged（））；
mat4.lookAt（app.viewMatrix，[15,0，-10]，-5,0,0]，[0,1,0]）；
}
函数动画（时间）{
var gl=app.gl；
var mat4=glMatrix.mat4；
//转换为秒。
var秒=时间*1E-3；
var dtime=时间-app.oldTime；
var mm1=mat4.create（）；
mat4.翻译（mm1，app.modelMatrix，[2,0,0]）；
var角度=时间*0.001；
mat4.旋转（mm1，mm1，角度）；
app.oldTime=时间；
总账清除（app.gl.COLOR_BUFFER_BIT |总账深度_BUFFER_BIT）；
gl.uniformMatrix4fv（app.pmLocation，false，app.projMatrix）；
总账uniformMatrix4fv（app.mmLocation，false，mm1）；
总账uniformMatrix4fv（app.vmLocation，false，app.viewMatrix）；
总图绘制阵列（总图三角形，0，应用点）；
//浇注Desiner autre立方体、calculer autre模型矩阵
//et重新分配器…总图绘制阵列（总图三角形，0，应用程序点）；
var mm2=mat4.create（）；
mat4.翻译（mm2，app.modelMatrix，[-2,0,0]）；
mat4.旋转体（mm2，mm2，角度）
gl.uniformMatrix4fv（app.pmLocation，false，app.projMatrix）；
gl.uniformMatrix4fv（app.MM位置，假，mm2）；
总账uniformMatrix4fv（app.vmLocation，false，app.viewMatrix）；
总图绘制阵列（总图三角形，0，应用点）；
//镜头
var MOVEINADOUT=0.1*Math.cos（角度）；
var moveLeftAndRight=0.1*Math.sin（角度）；
app.pcam=（[moveInAndOut，0，moveLeftAndRight]）；
//app.viewMatrix=lookAt（app.pcam[0,0,0]，[0,1,0]）；
//mat4.lookAt（app.viewMatrix，app.pcam，[0,0,0]，[0,1,0]）；
mat4.翻译（app.viewMatrix、app.viewMatrix、app.pcam）；
mat4.rotateY（app.viewMatrix，app.viewMatrix，0.05）；
window.requestAnimationFrame（动画）；
}
函数fovChanged（id，值）{
控制台日志（“视野角度：”，值）；
var label=document.getElementById（'output-fov'）；
label.innerHTML=值；
}
函数已更改（id、值）{
log（“远平面：”，值）；
var label2=document.getElementById（'output-far'）；
label2.innerHTML=值；
}
函数init（）{
[app.can，app.gl]=getContextGL（'can'）；
如果（app.can==null | | app.gl==null）{
警报（“无法初始化画布或上下文”）；
返回；
}
app.can.width=app.can.height*（app.can.clientWidth/app.can.clientHeight）；
var rect=app.can.getBoundingClientRect（）；
app.scaleX=app.can.width/rect.width；
app.scaleY=app.can.height/rect.heigh
   mat4.perspective(app.projMatrix, Math.PI / 4.0 /*45 degrees*/, 1, 0.1, farChanged());

function farChanged(id, value) {
  var label2 = document.getElementById('output-far');
  label2.innerHTML = value;

  glMatrix.mat4.perspective(app.projMatrix, Math.PI / 4.0 /*45 degrees*/ , 1, 0.1, parseFloat(value));
}