Javascript 旋转机械臂

目标：下面代码的目标是制作一个移动的机器人手臂，它有三层上层、下层和中层，它们都连接在基座上。给出了4个滑块，它们可以独立移动每个零件，但移动所有手臂的底座除外

问题：我遇到的问题是，当我尝试运行此代码时，屏幕上没有任何视觉效果，并且控制台中没有错误，我无法找到问题的原因。我还附上了输出的图片

解决方案：尚未找到

var Numverties=36； var点=[]； var颜色=[]； 变量顶点=[ vec4-0.5，-0.5,0.5,1.0， vec4-0.5,0.5,0.5,1.0， VEC40.5，0.5，0.5，1.0， 向量4 0.5，-0.5,0.5,1.0， vec4-0.5，-0.5，-0.5,1.0， vec4-0.5,0.5，-0.5,1.0， 向量4 0.5,0.5，-0.5,1.0， 向量4 0.5，-0.5，-0.5,1.0 ]; 可变顶点颜色=[ vec4 0.0,0.0,0.0,1.0，//黑色 vec4 1.0,0.0,0.0,1.0，//红色 vec4 1.0，1.0，0.0，1.0，//黄色 vec4 0.0,1.0,0.0,1.0，//绿色 vec4 0.0,0.0,1.0,1.0，//蓝色 vec4 1.0,0.0,1.0,1.0，//品红色 vec4 1.0、1.0、1.0、1.0、//白色 vec4 0.0,1.0,1.0,1.0//青色 ]; var基础高度=2.0； var BASE_WIDTH=5.0； var下臂高度=5.0； var下臂宽度=0.5； var上臂高度=5.0； var上臂宽度=0.5； var MIDDLE_ARM_HEIGHT=5.0； var中间臂宽度=0.5； var modelViewMatrix，projectionMatrix； var基数=0； var LowerArm=1； var上臂=2； var-MiddleArm=3； varθ=[0,0,0,0]； var角=0； var modelViewMatrixLoc； var vBuffer，cBuffer； 函数四元a、b、c、d{ 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[b]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[d]； } 函数colorCube{ 四元1,0,3,2； 四组2,3,7,6； 四组3,0,4,7； 四组6,5,1,2； 四组4、5、6、7； 四元5,4,0,1； } 函数标度4A、b、c、d{ var结果=mat4； 结果[0][0]=a； 结果[1][1]=b； 结果[2][2]=c； 结果[3][3]=d； 返回结果； } window.onload=函数初始化{ canvas=document.getElementById gl canvas； gl=WebGLUtils.setupWebGL画布； 如果！gl{alert WebGL不可用；} gl.viewport 0，0，canvas.width，canvas.height； gl.clearColor 1.0、1.0、1.0、1.0； gl.enable gl.DEPTH\U测试； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； 彩色立方体； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； vBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，vBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattpoints，gl.STATIC\u DRAW； var vPosition=gl.getAttriblosition程序，vPosition； gl.VertexAttribute指针位置，4，gl.FLOAT，false，0，0； gl.EnableVertexAttribute数组位置； cBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，cBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattcolors，gl.STATIC\u DRAW； var vColor=gl.getAttribLocation程序，vColor； gl.VertexAttributePointer vColor，4，gl.FLOAT，false，0，0； gl.EnableVertexAttributeArray vColor； document.getElementByIdslider1.onchange=functionevent{ θ[0]=event.target.value； }; document.getElementByIdslider2.onchange=functionevent{ θ[1]=event.target.value； }; document.getElementByIdslider3.onchange=functionevent{ θ[2]=event.target.value； }; document.getElementByIdslider4.onchange=functionevent{ θ[3]=event.target.value； }; modelViewMatrixLoc=gl.getUniformLocationprogram，modelViewMatrix； 投影矩阵=正交-10,10，-10,10，-10,10； gl.uniformMatrix4fv gl.getUniformLocationprogram，projectionMatrix，false，flatteprojectionMatrix； 提供 } 函数库{ var s=刻度4底部宽度、底部高度、底部宽度； var instanceMatrix=mult translate 0.0，0.5*BASE_HEIGHT，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fvmodelViewMatrixLoc，假，展平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 上臂功能{ var s=刻度4上臂宽度、上臂高度、上臂宽度； var instanceMatrix=多平移0.0,0.5*上臂高度，0.0,s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 函数下限 { var s=刻度4下臂宽度、下臂高度、下臂宽度； var instanceMatrix=mult translate 0.0,0.5* 下臂高度，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 功能中臂 { var s=比例4中间臂宽度、中间臂高度、中间臂宽度； var instanceMatrix=mult translate 0.0，0.5*中间手臂高度，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } var render=函数{ gl.clear gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT； modelViewMatrix=旋转数据[Base]，0,1,0； 基础 modelViewMatrix=多模型视图矩阵，平移0.0，基准高度0.0； modelViewMatrix=multmodelViewMatrix，rotatetheta[LowerArm]，0,0,1； 洛厄拉姆； modelViewMatrix=多模型视图矩阵，平移0.0，下臂高度0.0； modelViewMatrix=多模型视图矩阵，旋转数据[上臂]，0,0,1； 上臂； modelViewMatrix=多模型视图矩阵，平移0.0，上臂高度，0.0； modelViewMatrix=多模型视图矩阵，旋转数据[MiddleArm]，0,0,1； 中臂； 请求帧渲染； } 属性向量4位置； 属性向量4彩色； 可变的vec4颜色； 统一mat4模型视图矩阵； 均匀mat4投影矩阵； 真空总管 { fColor=vColor； gl_位置=投影矩阵*模型视图矩阵*位置； } 精密中泵浮子； 可变的vec4颜色； 真空总管 { gl_FragColor=fColor； } 身体角度-180 180 下臂角度-180 180 中臂角度-180 180 上臂角度-180 180

---

我做的第一件事就是添加

修复webgl lint打印的新错误。问题是scale4需要4个参数

   s = scale4(x, y, z); // BAD!
   s = scale4(x, y, z, w); // good

你想通过1的w

这修复了渲染。至于滑块，您可能希望在每个onchange函数中调用render。您可能还希望使用oninput而不是onchange

var Numverties=36； var点=[]； var颜色=[]； 变量顶点=[ vec4-0.5，-0.5,0.5,1.0， vec4-0.5,0.5,0.5,1.0， VEC40.5，0.5，0.5，1.0， 向量4 0.5，-0.5,0.5,1.0， vec4-0.5，-0.5，-0.5,1.0， vec4-0.5,0.5，-0.5,1.0， 向量4 0.5,0.5，-0.5,1.0， 向量4 0.5，-0.5，-0.5,1.0 ]; 可变顶点颜色=[ vec4 0.0,0.0,0.0,1.0，//黑色 vec4 1.0,0.0,0.0,1.0，//红色 vec4 1.0，1.0，0.0，1.0，//黄色 vec4 0.0,1.0,0.0,1.0，//绿色 vec4 0.0,0.0,1.0,1.0，//蓝色 vec4 1.0,0.0,1.0,1.0，//品红色 vec4 1.0、1.0、1.0、1.0、//白色 vec4 0.0,1.0,1.0,1.0//青色 ]; var基础高度=2.0； var BASE_WIDTH=5.0； var下臂高度=5.0； var下臂宽度=0.5； var上臂高度=5.0； var上臂宽度=0.5； var MIDDLE_ARM_HEIGHT=5.0； var中间臂宽度=0.5； var modelViewMatrix，projectionMatrix； var基数=0； var LowerArm=1； var上臂=2； var-MiddleArm=3； varθ=[0,0,0,0]； var角=0； var modelViewMatrixLoc； var vBuffer，cBuffer； 函数四元a、b、c、d{ 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[b]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[d]； } 函数colorCube{ 四元1,0,3,2； 四组2,3,7,6； 四组3,0,4,7； 四组6,5,1,2； 四组4、5、6、7； 四元5,4,0,1； } 函数标度4A、b、c、d{ var结果=mat4； 结果[0][0]=a； 结果[1][1]=b； 结果[2][2]=c； 结果[3][3]=d； 返回结果； } window.onload=函数初始化{ canvas=document.getElementById gl canvas； gl=WebGLUtils.setupWebGL画布； 如果！gl{alert WebGL不可用；} gl.viewport 0，0，canvas.width，canvas.height； gl.clearColor 1.0、1.0、1.0、1.0； gl.enable gl.DEPTH\U测试； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； 彩色立方体； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； vBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，vBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattpoints，gl.STATIC\u DRAW； var vPosition=gl.getAttriblosition程序，vPosition； gl.VertexAttribute指针位置，4，gl.FLOAT，false，0，0； gl.EnableVertexAttribute数组位置； cBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，cBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattcolors，gl.STATIC\u DRAW； var vColor=gl.getAttribLocation程序，vColor； gl.VertexAttributePointer vColor，4，gl.FLOAT，false，0，0； gl.EnableVertexAttributeArray vColor； document.getElementByIdslider1.oninput=func 事件{ θ[0]=event.target.value； 提供 }; document.getElementByIdslider2.oninput=functionevent{ θ[1]=event.target.value； 提供 }; document.getElementByIdslider3.oninput=functionevent{ θ[2]=event.target.value； 提供 }; document.getElementByIdslider4.oninput=functionevent{ θ[3]=event.target.value； 提供 }; modelViewMatrixLoc=gl.getUniformLocationprogram，modelViewMatrix； 投影矩阵=正交-10,10，-10,10，-10,10； gl.uniformMatrix4fv gl.getUniformLocationprogram，projectionMatrix，false，flatteprojectionMatrix； 提供 } 函数库{ var s=比例4底部宽度、底部高度、底部宽度，1； var instanceMatrix=mult translate 0.0，0.5*BASE_HEIGHT，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fvmodelViewMatrixLoc，假，展平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 上臂功能{ var s=比例4上臂宽度、上臂高度、上臂宽度，1； var instanceMatrix=多平移0.0,0.5*上臂高度，0.0,s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 函数下限 { var s=刻度4下臂宽度、下臂高度、下臂宽度，1； var instanceMatrix=mult translate 0.0,0.5*下臂高度，0.0,s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 功能中臂 { var s=比例4中间臂宽度、中间臂高度、中间臂宽度，1； var instanceMatrix=mult translate 0.0，0.5*中间手臂高度，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } var render=函数{ gl.clear gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT； modelViewMatrix=旋转数据[Base]，[0,1,0]； 基础 modelViewMatrix=多模型视图矩阵，平移0.0，基准高度0.0； modelViewMatrix=multmodelViewMatrix，rotatetheta[LowerArm]，[0,0,1]； 洛厄拉姆； modelViewMatrix=多模型视图矩阵，平移0.0，下臂高度0.0； modelViewMatrix=多模型视图矩阵，旋转数据[上臂]，[0,0,1]； 上臂； modelViewMatrix=多模型视图矩阵，平移0.0，上臂高度，0.0； modelViewMatrix=multmodelViewMatrix，旋转数据[MiddleArm]，[0,0,1]； 中臂； 请求帧渲染； } 属性向量4位置； 属性向量4彩色； 可变的vec4颜色； 统一mat4模型视图矩阵； 均匀mat4投影矩阵； 真空总管 { fColor=vColor； gl_位置=投影矩阵*模型视图矩阵*位置； } 精密中泵浮子； 可变的vec4颜色； 真空总管 { gl_FragColor=fColor； } 身体角度-180 180 下臂角度-180 180 中臂角度-180 180 上臂角度-180 180

---

我做的第一件事就是添加

修复webgl lint打印的新错误。问题是scale4需要4个参数

   s = scale4(x, y, z); // BAD!
   s = scale4(x, y, z, w); // good

你想通过1的w

这修复了渲染。至于滑块，您可能希望在每个onchange函数中调用render。您可能还希望使用oninput而不是onchange

var Numverties=36； var点=[]； var颜色=[]； 变量顶点=[ vec4-0.5，-0.5,0.5,1.0， vec4-0.5,0.5,0.5,1.0， VEC40.5，0.5，0.5，1.0， 向量4 0.5，-0.5,0.5,1.0， vec4-0.5，-0.5，-0.5,1.0， vec4-0.5,0.5，-0.5,1.0， 向量4 0.5,0.5，-0.5,1.0， 向量4 0.5，-0.5，-0.5,1.0 ]; 可变顶点颜色=[ vec4 0.0,0.0,0.0,1.0，//黑色 vec4 1.0,0.0,0.0,1.0，//红色 vec4 1.0，1.0，0.0，1.0，//黄色 vec4 0.0,1.0,0.0,1.0，//绿色 vec4 0.0,0.0,1.0,1.0，//蓝色 vec4 1.0,0.0,1.0,1.0，//品红色 vec4 1.0、1.0、1.0、1.0、//白色 vec4 0.0,1.0,1.0,1.0//青色 ]; var基础高度=2.0； var BASE_WIDTH=5.0； var下臂高度=5.0； var下臂宽度=0.5； var上臂高度=5.0； var上臂宽度=0.5； var MIDDLE_ARM_HEIGHT=5.0； var中间臂宽度=0.5； var modelViewMatrix，projectionMatrix； var基数=0； var LowerArm=1； var上臂=2； var-MiddleArm=3； varθ=[0,0,0,0]； var角=0； var modelViewMatrixLoc； var vBuffer，cBuffer； 函数四元a、b、c、d{ 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[b]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[a]； 颜色。推顶颜色[a]； 点。推送顶点[c]； 颜色。推顶颜色[a]； 点。推送顶点[d]； } 享乐 彩色立方体{ 四元1,0,3,2； 四组2,3,7,6； 四组3,0,4,7； 四组6,5,1,2； 四组4、5、6、7； 四元5,4,0,1； } 函数标度4A、b、c、d{ var结果=mat4； 结果[0][0]=a； 结果[1][1]=b； 结果[2][2]=c； 结果[3][3]=d； 返回结果； } window.onload=函数初始化{ canvas=document.getElementById gl canvas； gl=WebGLUtils.setupWebGL画布； 如果！gl{alert WebGL不可用；} gl.viewport 0，0，canvas.width，canvas.height； gl.clearColor 1.0、1.0、1.0、1.0； gl.enable gl.DEPTH\U测试； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； 彩色立方体； program=initShaders gl，顶点着色器，片段着色器； gl.useProgram； vBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，vBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattpoints，gl.STATIC\u DRAW； var vPosition=gl.getAttriblosition程序，vPosition； gl.VertexAttribute指针位置，4，gl.FLOAT，false，0，0； gl.EnableVertexAttribute数组位置； cBuffer=gl.createBuffer； gl.bindBuffer gl.ARRAY_BUFFER，cBuffer； gl.bufferData gl.ARRAY\u BUFFER，flattcolors，gl.STATIC\u DRAW； var vColor=gl.getAttribLocation程序，vColor； gl.VertexAttributePointer vColor，4，gl.FLOAT，false，0，0； gl.EnableVertexAttributeArray vColor； document.getElementByIdslider1.oninput=functionevent{ θ[0]=event.target.value； 提供 }; document.getElementByIdslider2.oninput=functionevent{ θ[1]=event.target.value； 提供 }; document.getElementByIdslider3.oninput=functionevent{ θ[2]=event.target.value； 提供 }; document.getElementByIdslider4.oninput=functionevent{ θ[3]=event.target.value； 提供 }; modelViewMatrixLoc=gl.getUniformLocationprogram，modelViewMatrix； 投影矩阵=正交-10,10，-10,10，-10,10； gl.uniformMatrix4fv gl.getUniformLocationprogram，projectionMatrix，false，flatteprojectionMatrix； 提供 } 函数库{ var s=比例4底部宽度、底部高度、底部宽度，1； var instanceMatrix=mult translate 0.0，0.5*BASE_HEIGHT，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fvmodelViewMatrixLoc，假，展平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 上臂功能{ var s=比例4上臂宽度、上臂高度、上臂宽度，1； var instanceMatrix=多平移0.0,0.5*上臂高度，0.0,s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 函数下限 { var s=刻度4下臂宽度、下臂高度、下臂宽度，1； var instanceMatrix=mult translate 0.0,0.5*下臂高度，0.0,s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } 功能中臂 { var s=比例4中间臂宽度、中间臂高度、中间臂宽度，1； var instanceMatrix=mult translate 0.0，0.5*中间手臂高度，0.0，s； var t=多模型IEWMatrix，instanceMatrix； gl.uniformMatrix4fv modelViewMatrixLoc，假，扁平； gl.drawArrays gl.TRIANGLES，0，NumVertices； } var render=函数{ gl.clear gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT； modelViewMatrix=旋转数据[Base]，[0,1,0]； 基础 modelViewMatrix=多模型视图矩阵，平移0.0，基准高度0.0； modelViewMatrix=multmodelViewMatrix，rotatetheta[LowerArm]，[0,0,1]； 洛厄拉姆； modelViewMatrix=多模型视图矩阵，平移0.0，下臂高度0.0； modelViewMatrix=多模型视图矩阵，旋转数据[上臂]，[0,0,1]； 上臂； modelViewMatrix=多模型视图矩阵，平移0.0，上臂高度，0.0； modelViewMatrix=multmodelViewMatrix，旋转数据[MiddleArm]，[0,0,1]； 中臂； 请求帧渲染； } 属性向量4位置； 属性向量4彩色； 可变的vec4颜色； 统一mat4模型视图矩阵； 均匀mat4投影矩阵； 真空总管 { fColor=vColor； gl_位置=投影矩阵*模型视图矩阵*位置； } 精密中泵浮子； 可变的vec4颜色； 真空总管 { gl_FragColor=fColor； } 身体角度-180 180 下臂角度-180 180 中臂角度-180 180 上臂角度-180 180

---

元素没有onchange事件处理程序。你需要把它们放在你真正的滑块上。不要在实际的输入元素上重复ID。我的意思是，这是一个工作代码，直到我添加了中间的arm，然后它停止工作，因为元素没有onchange事件处理程序。你需要把它们放在你真正的滑块上。不要重复

---

实际输入元素上的ID。我的意思是这是一个工作代码，直到我添加了中间臂，然后它停止工作

   r = rotate(angle, x, y, z); // BAD!
   r = rotate(angle, [x, y, z]); // Good

   s = scale4(x, y, z); // BAD!
   s = scale4(x, y, z, w); // good