WebGL使用36个索引绘制立方体

我正试图使用three.js

BoxGeometry

中使用的相同的

索引和
顶点绘制一个
cube
。我觉得顶点很好，但不知怎么的，当我有了索引时，我无法使它工作

指数

[0,2,1,2,3,1,4,6,5,6,7,5,8,10,9,10,11,9,12,14,13,14,15,13,16,18,17,18,19,17,20,22,21,22,23,21] 

顶点

[
    0.5,0.5,0.5,
    0.5,0.5,-0.5,
    0.5,-0.5,0.5,
    0.5,-0.5,-0.5,
    -0.5,0.5,-0.5,
    -0.5,0.5,0.5,
    -0.5,-0.5,-0.5,
    -0.5,-0.5,0.5,
    -0.5,0.5,-0.5,
    0.5,0.5,-0.5,
    -0.5,0.5,0.5,
    0.5,0.5,0.5,
    -0.5,-0.5,0.5,
    0.5,-0.5,0.5,
    -0.5,-0.5,-0.5,
    0.5,-0.5,-0.5,
    -0.5,0.5,0.5,
    0.5,0.5,0.5,
    -0.5,-0.5,0.5,
    0.5,-0.5,0.5,
    0.5,0.5,-0.5,
    -0.5,0.5,-0.5,
    0.5,-0.5,-0.5,
    -0.5,-0.5,-0.5
] 

这是代码


let canvas=document.querySelector（“canvas”）；
让gl=canvas.getContext（“webgl”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
常量vsSource=`
属性向量4位置；
统一mat4模型视图矩阵；
可变vec4颜色；
真空总管（真空）{
gl_位置=位置；
}
`;
常量fsSource=`
精密中泵浮子；
可变vec4颜色；
真空总管（真空）{
gl_FragColor=vec4（1.0,0.0,1.0,1.0）；
}
`;
//着色器设置
让vertexShader=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vertexShader，vsSource）；
gl.compileShader（顶点着色器）；
if（！gl.getShaderParameter（vertexShader，gl.COMPILE_状态））{
var log=gl.getShaderInfoLog（vertexShader）；
抛出“着色器编译失败\n\n”+日志+“\n\n”；
}
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fsSource）；
gl.compileShader（碎片着色器）；
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））{
var log=gl.getshaderingfolog（fragmentShader）；
抛出“着色器编译失败\n\n”+日志+“\n\n”；
}
让程序=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
总账验证程序（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））{
var log=gl.getProgramInfoLog（程序）；
抛出“程序链接失败\n\n”+日志；
}
gl.useProgram（程序）；
让modelViewMatrix=gl.getUniformLocation（程序，“modelViewMatrix”）；
让model=mat4.create（）；
gl.uniformMatrix4fv（模型视图矩阵，错误，模型）；
var顶点=新数组([
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5
]);
var vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER，顶点，gl.STATIC\u DRAW）；
让位置=总账GetAttriblLocation（程序，“位置”）；
gl.VertexAttribute指针（位置，3，gl.FLOAT，假，0，0）；
gl.EnableVertexAttributeArray（位置）；
var指数=新UINT16阵列([
0,
2.
1.
2.
3.
1.
4.
6.
5.
6.
7.
5.
8.
10,
9,
10,
11,
9,
12,
14,
13,
14,
15,
13,
16,
18,
17,
18,
19,
17,
20,
22,
21,
22,
23,
21
]);
var indexBuffer=gl.createBuffer（）；
gl.bindBuffer（gl.ELEMENT\u ARRAY\u BUFFER，indexBuffer）；
总账缓冲数据（总账元素\数组\缓冲区、索引、总账静态\绘图）；
总帐付款人（总帐三角形，索引长度，总帐无符号字节，0）
对于索引缓冲区，您使用了数组数据类型
Uint16Array
：

var指数=新的UINT16阵列（[…]）

因此，对于数据类型参数，必须使用枚举数常量
gl.UNSIGNED_SHORT
，而不是
gl.UNSIGNED_BYTE
：

gl.drawerelements（gl.TRIANGLES，index.length，gl.UNSIGNED_字节，0）

gl.drawerelements（gl.TRIANGLES，index.length，gl.UNSIGNED_SHORT，0）；


由于最大索引小于256，因此可以使用数组数据类型
Uint8Array
，而不是
Uint16Array
，但要保持枚举数常量
gl.UNSIGNED_BYTE
：

var索引=新的Uint8Array（[…]）；

gl.drawerelements（gl.TRIANGLES，index.length，gl.UNSIGNED_字节，0）；
欢迎来到堆栈溢出。请用这里，不要用小提琴。