I want to create a plane in three.js, but with more points than default (so I don't want to use PlaneGeometry, as I don't think it will let me define custom points). The reason being is that I want to be able to animate or move any given point in time.

This is what I have so far:

var camera;

var scene;

var renderer;

var mesh;



init();

animate();



function init() {



    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);



    var light = new THREE.DirectionalLight( 0xffffff );

    light.position.set( 0, 1, 1 ).normalize();

    scene.add(light);





    var geometry = new THREE.PlaneGeometry( 50, 50);  



    var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {

    renderer.render(scene, camera);

    })

    var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })





    mesh = new THREE.Mesh(geometry, material );

    mesh.position.z = -50;

    scene.add( mesh );



    renderer = new THREE.WebGLRenderer({ alpha: true });

    renderer.setSize( window.innerWidth, window.innerHeight );



    renderer.setClearColor( 0xffffff, 1);

    document.body.appendChild( renderer.domElement );



    window.addEventListener( 'resize', onWindowResize, false );



    render();

}



function animate() {

    //mesh.scale.x+= 0.0003;





    render();

    requestAnimationFrame( animate );



}



function render() {

    renderer.render( scene, camera );

}





function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

    render();

}

What I'm looking to do, is create something like this:

http://www.math.ubc.ca/~cass/courses/m308-02b/projects/schweber/square%20tiles.gif