基於BufferGeometry的Three.js網格不出現

我正在使用Three.js製作WebGL遊戲&我決定從我的（工作）常規THREE.Geometry解決方案切換到THREE.BufferGeometry實現。我搞亂了一些東西，因爲網格不畫。下面給出了我的代碼的相關部分。如果我切換到常規幾何體，一切正常。基於BufferGeometry的Three.js網格不出現

這是一個基於體素的遊戲，我已經預先創建了每個立方體的每個面作爲常規THREE.Geometry。 positionVertices函數從每個面幾何中提取頂點和麪，將它們定位以便它們對應體素，並生成THREE.BufferGeometry的緩衝數據。沒有錯誤或警告，最終的網格不會顯示。我懷疑我的問題與Three.js以及更多的問題有關，因爲我對3D圖形編程的理解有限。我現在最好的猜測是它與索引不正確有關。如果刪除索引，則出現該對象，但是一半的三角形的法線方向相反。

Chunk.prototype.positionVertices = function(position, vertices, faces, vertexBuffer, indexBuffer, normalBuffer, colorBuffer) { 
    var vertexOffset = vertexBuffer.length/3; 
    for(var i = 0; i < faces.length; ++i) { 
     indexBuffer.push(faces[i].a + vertexOffset); 
     indexBuffer.push(faces[i].b + vertexOffset); 
     indexBuffer.push(faces[i].c + vertexOffset); 

     normalBuffer.push(faces[i].vertexNormals[0].x); 
     normalBuffer.push(faces[i].vertexNormals[0].y); 
     normalBuffer.push(faces[i].vertexNormals[0].z); 

     normalBuffer.push(faces[i].vertexNormals[1].x); 
     normalBuffer.push(faces[i].vertexNormals[1].y); 
     normalBuffer.push(faces[i].vertexNormals[1].z); 

     normalBuffer.push(faces[i].vertexNormals[2].x); 
     normalBuffer.push(faces[i].vertexNormals[2].y); 
     normalBuffer.push(faces[i].vertexNormals[2].z); 
    } 

    var color = new THREE.Color(); 
    color.setRGB(0, 0, 1); 
    for(var i = 0; i < vertices.length; ++i) { 
     vertexBuffer.push(vertices[i].x + position.x); 
     vertexBuffer.push(vertices[i].y + position.y); 
     vertexBuffer.push(vertices[i].z + position.z); 

     colorBuffer.push(color.r); 
     colorBuffer.push(color.g); 
     colorBuffer.push(color.b); 
    } 
}; 

// This will need to change when more than one type of block exists. 
Chunk.prototype.buildMesh = function() { 

    var cube = new THREE.Mesh(); 
    var vertexBuffer = []; // [0] = v.x, [1] = v.y, etc 
    var faceBuffer = []; 
    var normalBuffer = []; 
    var colorBuffer = []; 
    for(var k = 0; k < this.size; ++k) 
    for(var j = 0; j < this.size; ++j) 
    for(var i = 0; i < this.size; ++i) { 
     // Iterates over all of the voxels in this chunk and calls 
     // positionVertices(position, vertices, faces, vertexBuffer, indexBuffer, normalBuffer, colorBuffer) for each face in the chunk 
    } 

    var bGeo = new THREE.BufferGeometry(); 

    bGeo.attributes = { 

     index: { 
      itemSize: 1, 
      array: new Uint16Array(faceBuffer), 
      numItems: faceBuffer.length 
     }, 
     position: { 
      itemSize: 3, 
      array: new Float32Array(vertexBuffer), 
      numItems: vertexBuffer.length 
     }, 
     normal: { 
      itemSize: 3, 
      array: new Float32Array(normalBuffer), 
      numItems: normalBuffer.length 
     }, 
     color: { 
      itemSize: 3, 
      array: new Float32Array(colorBuffer), 
      numItems: colorBuffer.length 
     } 
    } 


    var mesh = new THREE.Mesh(bGeo, VOXEL_MATERIALS["ROCK"]); 

    return mesh; 
}

來源

2013-10-27 Joel

我需要在幾何體上設置一個偏移量。

bGeo.offsets = [ 
     { 
      start: 0, 
      index: 0, 
      count: faceBuffer.length 
     } 
    ];

修正了它。三角形仍然顯示錯誤，所以我猜這些面孔很混亂，但我可以很容易地弄清楚。

來源

2013-10-27 02:27:40 Joel

基於BufferGeometry的Three.js網格不出現

回答

相關問題