Question

我正在使用Three.js＆amp ;;正在开发一个WebGL游戏。我决定从我的（工作）常规THREE.BufferGeometry解决方案切换到THREE.Geometry实现。我弄乱了一些东西，因为网格没有绘制。我已经在下面给出了我的代码的相关部分。如果我切换到常规几何体，一切正常。

这是一个基于体素的游戏，我已经预先创建了每个多维数据集的每个面作为常规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;
}

Answer 1

我需要在几何体上设置一个偏移量。

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

修正了它。三角形仍然显示错误，所以我猜这些面孔搞砸了，但我可以很容易地解决这个问题。

基于BufferGeometry的Three.js网格没有出现

1 个答案: