Help to rewrite this piece of code and any resource on creating simple grass in threejs?

I am still learning THREEjs and I want to implement a field of grass…I found jeromeetienne’s code to be easy but being outdated and making tweaks is not working in my case.

So I am currently trying to take only the grass part from this
However I have no idea how to rewrite this particular function…any help would be appreciated:

createPlanesGeometry = (n_planes)=>{

    var containerGeometry = new THREE.Geometry();

    var planeGeometry = new THREE.PlaneGeometry(400, 30, 14, 1);

    for (var i = 0; i < planeGeometry.vertices.length; i++) {

        planeGeometry.vertices[i].z = Math.sin(planeGeometry.vertices[i].x)*20;

    };

    planeGeometry.applyMatrix( new THREE.Matrix4().setPosition( new THREE.Vector3( 0, 15, 0 ) ) );
    var mesh = new THREE.Mesh(planeGeometry);

        mesh.updateMatrix();

        containerGeometry.merge(mesh.geometry, mesh.matrix);

    };

Also is there any easy way to implement grass in threejs?..A more recent one?

This code needs indeed a rewrite. You can basically use the minecraft example for orientation. The world is generated by transforming and merging different plane geometries into a single large geometry. You have to do the same for your use case.

The merge happens now with BufferGeometryUtils.mergeBufferGeometries(). There is no need to use an instance of Mesh for this operation anymore. So you setup your grass blade geometry once via createPlanesGeometry(), clone it for each blade, apply the transformation and then push it to an array. When all blades are created, you merge them and create with the resulting geometry your mesh.

createPlanesGeometry() should look like so.

function createPlanesGeometry() {

	const planeGeometry = new THREE.PlaneGeometry( 400, 30, 14, 1 );
	const positionAttribute = planeGeometry.getAttribute( 'position' );

	for ( let i = 0; i < positionAttribute.count; i ++ ) {

		const x = positionAttribute.getX( i );
		const z = Math.sin( x ) * 20;

		positionAttribute.setZ( i, z );

	}


	planeGeometry.translate( 0, 15, 0 );

	return planeGeometry;

}
1 Like