How To Add Faces To Three.buffergeometry?

I have created programmatically a simple mesh: var CreateSimpleMesh = new function () { var xy = [], maxX = 7, maxY = 10, river = [[0, 5], [0, 4], [1, 3

Solution 1:

Here is how to create a mesh having BufferGeometry. This is the simpler "non-indexed" BufferGeometry where vertices are not shared.

// non-indexed buffer geometryvar geometry = newTHREE.BufferGeometry();

// number of trianglesvarNUM_TRIANGLES = 10;

// attributesvar positions = newFloat32Array( NUM_TRIANGLES * 3 * 3 );
var normals   = newFloat32Array( NUM_TRIANGLES * 3 * 3 );
var colors    = newFloat32Array( NUM_TRIANGLES * 3 * 3 );
var uvs       = newFloat32Array( NUM_TRIANGLES * 3 * 2 );

var color = newTHREE.Color();
var scale = 15;
var size = 5;
var x, y, z;

for ( var i = 0, l = NUM_TRIANGLES * 3; i < l; i ++ ) {

    if ( i % 3 === 0 ) {

        x = ( Math.random() - 0.5 ) * scale;
        y = ( Math.random() - 0.5 ) * scale;
        z = ( Math.random() - 0.5 ) * scale;

    } else {

        x = x + size * ( Math.random() - 0.5 );
        y = y + size * ( Math.random() - 0.5 );
        z = z + size * ( Math.random() - 0.5 );

    }

    var index = 3 * i;

    // positions
    positions[ index     ] = x;
    positions[ index + 1 ] = y;
    positions[ index + 2 ] = z;

    //normals -- we will set normals later// colors
    color.setHSL( i / l, 1.0, 0.5 );
    colors[ index     ] = color.r;
    colors[ index + 1 ] = color.g;
    colors[ index + 2 ] = color.b;

    // uvs
    uvs[ index     ] = Math.random(); // just something...
    uvs[ index + 1 ] = Math.random();

}

geometry.addAttribute( 'position', newTHREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'normal', newTHREE.BufferAttribute( normals, 3 ) );
geometry.addAttribute( 'color', newTHREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'uv', newTHREE.BufferAttribute( uvs, 2 ) );

// optional
geometry.computeBoundingBox();
geometry.computeBoundingSphere();

// set the normals
geometry.computeVertexNormals(); // computed vertex normals are orthogonal to the face for non-indexed BufferGeometry

fiddle: http://jsfiddle.net/5co6c27w/

See the three.js examples for many additional examples of creating BufferGeometry. Also check out the source code for PlaneBufferGeometry and SphereBufferGeometry, which are reasonably easy to understand.

three.js r.73

Solution 2:

You can add faces using three.js internal function- fromBufferGeometry. In your case it would be something like this.

var directGeo = new THREE.Geometry();
directGeo.fromBufferGeometry(grassGeometry);

Then use directGeo to build your mesh, and it will have faces.