我一直在尝试构建3D交叉路角色。整个模型大约有40个立方体/立方体，但是形状在第32个形状之后停止建立。代码已经很长了，但是我不知道为什么其余的形状没有显示出来。
这是一个旋转模型，js代码如下：
var canvas;
var gl;
var numVertices = 1188;
var axis = 0;
var xAxis = 0;
var yAxis =1;
var zAxis = 2;
var theta = [ 0, 0, 0 ];
var thetaLoc;
var vertices = [
vec3(-0.280,2.939,-0.054),
vec3(-0.280,3.317,-0.054),
vec3(-0.280,3.317,-0.443),
vec3(-0.280,2.939,-0.443),
vec3(-0.913,2.939,-0.054),
vec3(-0.913,3.317,-0.054),
vec3(-0.913,3.317,-0.443),
vec3(-0.913,2.939,-0.443),
vec3(-0.542,3.317,-0.054),
vec3(-0.542,3.515,-0.054),
vec3(-0.542,3.515,-0.443),
vec3(-0.542,3.317,-0.443),
vec3(-0.913,3.317,-0.054),
vec3(-0.913,3.515,-0.054),
vec3(-0.913,3.515,-0.443),
vec3(-0.913,3.317,-0.443),
vec3(0.202,1.317,0.262),
vec3(0.202,1.480,0.262),
vec3(0.202,1.480,0.042),
vec3(0.202,1.317,0.042),
vec3(-0.335,1.317,0.262),
vec3(-0.335,1.480,0.262),
vec3(-0.335,1.480,0.042),
vec3(-0.335,1.317,0.042),
vec3(0.202,-0.013,0.262),
vec3(0.202,1.317,0.262),
vec3(0.202,1.317,-0.435),
vec3(0.202,-0.013,-0.435),
vec3(-0.334,-0.013,0.262),
vec3(-0.334,1.317,0.262),
vec3(-0.334,1.317,-0.435),
vec3(-0.334,-0.013,-0.435),
vec3(0.202,1.317,0.042),
vec3(0.202,1.480,0.042),
vec3(0.202,1.480,-0.435),
vec3(0.202,1.317,-0.435),
vec3(-0.334,1.317,0.042),
vec3(-0.334,1.480,0.042),
vec3(-0.334,1.480,-0.435),
vec3(-0.334,1.317,-0.435),
//along with vertices of the rest of the shapes
];
var vertexColors = [
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
vec4( 1.0,1.0,1.0,1.0 ),
//similarly for the rest of the colors for shapes
];
//contains the order in which you will draw each vertex
var indices = [
1, 0, 3,
3, 2, 1,
2, 3, 7,
7, 6, 2,
3, 0, 4,
4, 7, 3,
6, 5, 1,
1, 2, 6,
4, 5, 6,
6, 7, 4,
5, 4, 0,
0, 1, 5,
9, 8,11,
11,10,9,
10,11,15,
15,14,10,
11,8,12,
12,15,11,
14,13,9,
9,10,14,
12,13,14,
14,15,12,
13,12,8,
8,9,13,
17,16,19,
19,18,17,
18,19,23,
23,22,18,
19,16,20,
20,23,19,
22,21,17,
17,18,22,
20,21,22,
22,23,20,
21,20,16,
16,17,21,
25,24,27,
27,26,25,
26,27,31,
31,30,26,
27,24,28,
28,31,27,
30,29,25,
25,26,30,
28,29,30,
30,31,28,
29,28,24,
24,25,29,
33,32,35,
35,34,33,
34,35,39,
39,38,34,
35,32,36,
36,39,35,
38,37,33,
33,34,38,
36,35,38,
38,39,36,
37,36,32,
32,33,37,
41,40,43,
43,42,41,
42,43,47,
47,46,42,
43,40,44,
44,47,43,
46,45,41,
41,42,46,
44,45,46,
46,47,44,
45,44,40,
40,40,45,
49,48,51,
51,50,49,
50,51,55,
55,54,50,
51,54,52,
52,55,51,
54,53,49,
49,50,54,
52,53,54,
54,55,52,
53,52,48,
48,49,53,
57,56,59,
59,58,57,
58,59,63,
63,62,58,
59,62,60,
60,63,59,
62,61,57,
57,58,62,
60,61,62,
62,63,60,
61,60,56,
56,57,61,
65,64,67,
67,66,65,
66,67,71,
71,70,66,
67,64,68,
68,71,67,
70,69,65,
65,66,70,
68,69,70,
70,71,68,
69,68,64,
64,65,69,
73,72,75,
75,74,73,
74,75,79,
79,78,74,
75,72,76,
76,79,75,
78,77,73,
73,74,78,
76,77,78,
78,79,76,
77,76,72,
72,73,77,
81,80,83,
83,82,81,
82,83,87,
87,86,82,
83,80,84,
84,87,83,
86,85,81,
81,82,86,
84,85,86,
86,87,84,
85,84,80,
80,81,85,
89,88,91,
91,90,89,
90,91,95,
95,94,90,
91,88,92,
92,95,91,
94,93,89,
89,90,94,
92,93,94,
94,95,92,
93,92,88,
88,89,93,
97,96,99,
99,98,97,
98,99,103,
103,102,98,
99,96,100,
100,103,99,
102,101,97,
97,98,102,
100,101,102,
102,103,100,
101,100,96,
96,97,101,
105,104,107,
107,106,105,
106,107,111,
111,110,106,
107,104,108,
108,111,107,
110,109,105,
105,106,110,
108,109,110,
110,111,108,
109,108,104,
104,105,109,
113,112,115,
115,114,113,
114,115,119,
119,118,114,
115,112,116,
116,119,115,
118,117,113,
113,114,118,
116,117,118,
118,119,116,
117,116,112,
112,113,117,
121,120,123,
123,122,121,
122,123,127,
127,126,122,
123,120,124,
124,127,123,
126,125,121,
121,122,126,
124,125,126,
126,127,124,
125,124,120,
120,121,125,
129,128,131,
131,130,129,
130,131,135,
135,134,130,
131,128,132,
132,135,131,
134,133,129,
129,130,134,
132,133,134,
134,135,132,
133,132,128,
128,129,133,
137,136,139,
139,138,137,
138,139,143,
143,142,138,
139,136,140,
140,143,139,
142,141,137,
137,138,142,
140,141,142,
142,143,140,
141,140,136,
136,137,141,
145,144,147,
147,146,145,
146,147,151,
151,150,146,
147,144,148,
148,151,147,
150,149,145,
145,146,150,
148,149,150,
150,151,148,
149,148,144,
144,145,149,
153,152,155,
155,154,153,
154,155,159,
159,158,154,
155,152,156,
156,159,155,
158,157,153,
153,154,158,
156,157,158,
158,159,156,
157,156,152,
152,153,157,
161,160,163,
163,162,161,
162,163,167,
167,166,162,
163,160,164,
164,167,163,
166,165,161,
161,162,166,
164,165,166,
166,167,164,
165,164,160,
160,161,165,
169,168,171,
171,170,169,
170,171,175,
175,174,170,
171,168,172,
172,175,171,
174,173,169,
169,170,174,
172,173,174,
174,175,172,
173,172,168,
168,169,173,
//white butt
177,176,179,
179,178,177,
178,179,183,
183,182,178,
179,176,180,
180,183,179,
182,181,177,
177,178,182,
180,181,182,
182,183,180,
181,180,176,
176,177,181,
185,184,187,
187,186,185,
186,187,191,
191,190,186,
187,184,188,
188,191,187,
190,189,185,
185,186,190,
188,189,190,
190,191,188,
189,188,184,
184,185,189,
193,192,195,
195,194,193,
194,195,199,
199,198,194,
195,192,196,
196,199,195,
198,197,193,
193,194,198,
196,197,198,
198,199,196,
197,196,192,
192,193,197,
201, 200, 203,
203, 202, 201,
202, 203, 207,
207, 206, 202,
203, 200, 204,
204, 207, 203,
206, 205, 201,
201, 202, 206,
204, 205, 206,
206, 207, 204,
205, 204, 200,
200, 201, 205,
//left hand
209, 208, 211,
211, 210, 209,
210, 211, 215,
215, 214, 210,
211, 208, 212,
212, 215, 211,
214, 213, 209,
209, 210, 214,
212, 213, 214,
214, 215, 212,
213, 212, 208,
208, 209, 213,
217, 216, 219,
219, 218, 217,
218, 219, 223,
223, 222, 218,
219, 216, 220,
220, 223, 219,
222, 221, 217,
217, 218, 222,
220, 221, 222,
222, 223, 220,
221, 220, 216,
216, 217, 221,
//right hand
225, 224, 227,
227, 226, 225,
226, 227, 231,
231, 230, 226,
227, 224, 228,
228, 231, 227,
230, 229, 225,
225, 226, 230,
228, 229, 230,
230, 231, 228,
229, 228, 224,
224, 225, 229,
233, 232, 235,
235, 234, 233,
234, 235, 239,
239, 238, 234,
235, 232, 236,
236, 239, 235,
238, 237, 233,
233, 234, 238,
236, 237, 238,
238, 239, 236,
237, 236, 232,
232, 233, 237,
241, 240, 243,
243, 242, 241,
242, 243, 247,
247, 246, 242,
243, 240, 244,
244, 247, 243,
246, 245, 241,
241, 242, 246,
244, 245, 246,
246, 247, 244,
245, 244, 240,
240, 241, 245,
249, 248, 251,
251, 250, 249,
250, 251, 255,
255, 254, 250,
251, 248, 252,
252, 255, 251,
254, 253, 249,
249, 250, 254,
252, 253, 254,
254, 255, 252,
253, 252, 248,
248, 249, 253,
257, 256, 259,
259, 258, 257,
258, 259, 263,
263, 262, 258,
259, 257, 260,
260, 263, 259,
262, 261, 257,
257, 258, 262,
260, 261, 262,
262, 263, 260,
261, 260, 256,
256, 257, 261,
];
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.66,0.94,1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
//
// Load shaders and initialize attribute buffers
//
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
// array element buffer
//put the indices array into a buffer so we can use them to draw triangles in the right order
//we will refer to this in the render() function
var iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer); //passing an array of indices instead of vertex or colour
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
// color array atrribute buffer
var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
// vertex array attribute buffer
var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
var scaleZMatrix = mat4 ( 0.2,0, 0, 0,
0, 0.2, 0, 0,
0, 0, 0.2, 0,
0, 0, 0, 1);
var scaleZMatrixLoc = gl.getUniformLocation(program, "uSZMatrix");
gl.uniformMatrix4fv(scaleZMatrixLoc, false, flatten(scaleZMatrix));
thetaLoc = gl.getUniformLocation(program, "theta");
//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 render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
theta[axis] += 1.0;
gl.uniform3fv(thetaLoc, theta);
//relates the vertices to the indices, so the verts will be drawn in order
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
requestAnimFrame( render );
}
我曾尝试使用其他浏览器将其缩小，但第33个形状却没有显示！应该是一条腿。
您正在使用UNSIGNED_BYTE索引。 UNSIGNED_BYTE只能容纳0到255之间的值，因此您不能使用超过255个顶点。
更改此行
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
至此
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
和您的画线到此
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_SHORT, 0 );
而且您将能够使用最大65535的索引