我是three.js和Web GL的新手。在下面的代码中，我正在尝试构建几何体并在几何体上叠加图像。当我这样做时，我收到以下错误。
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
代码：
var scene, camera, renderer, geometry, material, shape, particles, particlesMaterial, depthMap, depthMapDimensions,
particleSystem, particleCount, imageDimensions, vertextSpacing;
imageDimensions = {
width : 1080,
height : 1080
};
depthMapDimensions = {
width : 20,
height : 20
};
vertextSpacing = {
x : imageDimensions.width / depthMapDimensions.width,
y : imageDimensions.height / depthMapDimensions.height
}
depthMap = [2.127567, 2.626095, 3.093391, 5.806643, 7.000000, 6.998367, 4.582537, 1.649688, 2.281374, 1.367736, 3.042042, 8.414231, 8.999998, 8.999999, 8.999998, 8.999999, 8.873376, 7.543515, 7.000446, 6.999999, 2.616741, 2.901183, 2.704453, 5.539745, 6.998835, 6.999611, 6.730113, 5.143857, 3.738796, 2.599236, 3.070265, 8.415504, 9.000000, 9.000000, 9.000000, 8.987292, 8.144215, 7.080783, 7.000000, 6.999999, 2.663667, 2.417611, 2.113292, 4.201475, 6.785589, 6.592422, 5.734896, 4.422761, 3.342103, 2.709703, 2.897975, 8.191135, 9.000000, 9.000000, 9.000000, 8.976017, 7.754744, 7.000002, 6.999999, 6.999999, 2.023745, 2.015293, 2.007580, 3.036786, 4.601620, 3.687377, 3.171844, 3.029730, 3.013251, 2.440641, 2.630903, 8.123555, 9.000000, 9.000000, 9.000000, 8.977840, 7.747422, 7.000000, 7.000000, 6.999999, 1.628098, 1.203436, 1.186097, 1.708180, 2.342594, 2.146624, 2.423483, 2.622567, 2.313046, 1.987591, 2.469096, 8.158025, 9.000000, 9.000000, 9.000000, 8.981831, 7.786616, 7.000000, 6.999999, 6.999999, -0.555659, -0.880668, -0.871480, -0.838492, -0.810392, -1.485775, -0.342942, 0.946382, 0.690366, 1.233515, 1.941243, 7.756371, 9.000000, 9.000000, 9.000000, 8.990389, 7.852441, 7.000000, 7.000000, 6.999999, -1.000000, -1.000000, -0.984316, -0.691079, -0.629077, -2.186010, -0.970196, 0.342872, 0.424878, 0.932589, 2.874258, 8.296001, 9.000000, 9.000000, 9.000000, 8.995690, 7.908023, 7.000005, 6.999999, 6.999999, -0.851585, -1.121474, -1.036169, 0.164867, 0.423980, -0.812104, -0.406743, 0.398304, 0.919763, 1.004518, 4.300021, 8.948308, 9.000000, 9.000000, 9.000000, 8.999194, 7.979087, 7.000435, 7.000000, 6.999999, -0.244019, -1.266773, -1.911372, -1.899194, -1.918406, -1.882335, -0.138694, 0.924173, 1.047134, 1.704133, 5.677461, 8.978599, 9.000000, 9.000000, 9.000000, 8.997765, 7.952168, 7.000490, 6.999999, 6.999999, -0.002295, -0.229373, -0.890307, -1.492303, -1.971603, -2.409527, -0.669644, 0.903183, 1.618998, 3.833140, 8.231560, 8.999952, 9.000000, 9.000000, 9.000000, 8.998553, 7.963422, 7.000403, 7.000000, 6.999999, 0.259623, 0.308825, 0.188026, -0.288844, -0.765398, -1.169663, -0.185390, 1.163299, 2.354378, 4.205532, 7.644516, 8.601805, 8.977304, 9.000000, 9.000000, 8.938294, 7.788084, 7.000249, 6.999999, 6.999999, 0.958028, 0.975304, 0.817023, 0.426733, 0.410694, 0.412157, 1.020823, 2.024281, 2.798701, 4.603123, 6.847786, 7.108493, 7.883547, 7.851915, 8.190980, 7.904086, 7.127523, 7.000080, 7.000000, 6.999999, 1.126147, 1.019150, 0.943917, 0.347039, 0.309151, 0.348898, 1.676575, 2.808274, 4.393281, 6.567654, 6.782535, 5.570826, 5.230399, 5.367241, 6.704737, 7.009059, 7.000690, 7.000002, 6.999999, 6.999999, 3.700892, 1.894742, 1.858719, 1.560115, 0.479706, 0.918191, 4.307354, 5.558891, 6.654403, 6.819664, 5.722251, 5.044959, 5.000000, 5.136653, 6.524189, 7.000000, 7.000000, 7.000000, 7.000000, 6.999999, 4.999616, 4.528327, 5.008296, 4.469171, 0.833706, 1.666193, 5.676921, 6.513674, 6.752453, 6.034523, 5.133774, 5.045851, 5.095105, 5.081395, 6.348025, 7.001901, 6.999999, 7.000000, 6.999999, 6.999999, 5.000000, 5.119382, 5.744474, 4.393946, 0.647267, 1.866858, 5.754084, 6.057019, 5.982171, 5.704051, 5.334934, 5.104724, 5.144377, 5.267979, 6.279684, 7.000135, 7.000000, 6.998665, 6.994687, 6.996591, 4.995393, 4.989268, 4.217751, 2.684558, 0.678229, 2.151997, 5.188607, 5.143293, 5.249653, 5.211581, 5.000000, 5.017254, 5.035619, 5.118769, 6.484150, 6.999919, 6.999999, 6.997725, 6.896475, 6.618106, 4.244583, 3.497095, 3.031803, 2.604051, 1.002629, 1.250600, 3.062681, 3.108018, 3.347652, 4.717236, 4.997857, 4.930811, 4.960470, 5.011927, 5.990526, 6.658366, 6.901021, 6.993680, 6.989233, 6.869072, 3.050878, 3.002264, 3.010682, 2.679759, 1.475260, 1.682000, 3.150505, 3.224762, 3.313409, 4.203482, 4.545135, 4.273145, 4.097577, 4.095634, 4.393558, 4.623382, 5.105378, 5.485256, 5.467518, 5.375812, 2.999999, 3.000000, 3.003595, 2.763143, 1.400769, 1.764386, 3.081679, 3.169889, 3.156426, 3.148278, 3.173652, 3.269066, 3.103685, 3.032829, 3.057311, 3.104075, 3.336546, 3.577827, 3.570257, 3.524523];
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 1000);
renderer = new THREE.WebGLRenderer();
geometry = new THREE.Geometry();
console.log(geometry.vertices);
//geometry.computeBoundingSphere();
material = new THREE.MeshBasicMaterial({
color: 0xFF0000,
map : THREE.ImageUtils.loadTexture('IMG_0011-stk_00.jpg'),
wireframe : true
});
particleMaterials = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 10,
transparent: true
});
//draw verticies
for(var i = 0; i < depthMap.length; i++){
var x, y, z, row, column;
row = Math.ceil((i + 1) / depthMapDimensions.width);
column = (i + 1) - (depthMapDimensions.width * (row - 1));
//The x value of each vertex is a function of the width of the image
x = column;// vertextSpacing.x;
//The y value of each vertex is a function of its calculated row;
y = row * -1;// * vertextSpacing.y;
//The depth of each vertex is the value from the depth map
z = depthMap[i] * -1;
geometry.vertices.push(new THREE.Vector3(x, y, z));
//console.log(x,y,z);
}
//drawFaces
var lastVertex = 0, j = 0;
while(lastVertex < (depthMap.length - 1)){
if((j+1) % depthMapDimensions.width !== 0){
//console.log(j, j + 1, j + depthMapDimensions.width, j + depthMapDimensions.width + 1 );
geometry.faces.push( new THREE.Face4( j, j + depthMapDimensions.width, j + depthMapDimensions.width + 1, j + 1 ) );
lastVertex = j + depthMapDimensions.width + 1;
}
j++;
}
shape = new THREE.Mesh(geometry, material);
shape.doubleSided = true;
shape.overdraw = true;
scene.add(shape);
camera.position.z = 30;
renderer.setClearColorHex(0x00000, 1);
renderer.setSize( window.innerWidth, window.innerHeight);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
(function render () {
//shape.rotation.x += .01;
//shape.rotation.y += .01;
//renderer.render(scene, camera);
requestAnimationFrame(render);
})();
据我所知，这可能与将“buffersNeedUpdate”和“uvsNeedUpdate”设置为true有关，但我不确定这需要做什么。谢谢你提前！
答案 0 :(得分：1)
如果要为素材添加faceVertexUvs，则需要在自定义几何中指定map。了解PlaneGeometry如何添加它们。
mesh.doubleSided已替换为material.side = THREE.DoubleSide。请务必从官方的three.js示例中学习，并避免使用网上的旧例子。
非平面四边形很危险。有关详细信息，请参阅：PlaneGeometry and Directional Light。
three.js r.59