0

私は Three.js を使用して 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;
}
4

1 に答える 1

1

ジオメトリに 1 つのオフセットを設定する必要がありました。

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

修正しました。三角形はまだ間違って表示されているので、顔が台無しになっていると思いますが、それは簡単に理解できます。

于 2013-10-27T02:27:40.167 に答える