Image in texture, adjusting the UV, three js

Question

I am stuck! I am trying to map a image on to a surface in three js. It has something to do with UV mapping. I have tried to understand

I create the shape using

var i, verts = [];
for (i = 0; i < 6; i++) {
    verts.push(createVert(i, Hex.FLAT));
}
hexShape = new THREE.Shape(verts); 

I have read http://paulyg.f2s.com/uv.htm, Custom UVgenerator Three.js for extrudedgeometry, UV mapping in THREE.js, THREE.js generate UV coordinate.

They use a square, I am using hex/triangles. I am loading the image:

    if (true) {
    texture = new THREE.ImageUtils.loadTexture("data/mylogo.png",{}, onText, onErr);
} else {
    var textLoader = new THREE.TextureLoader();
    textLoader.load("data/hemp_logoB.png", {}, onText, onErr);
    function onErr(err) {
        console.log('ERR ', err);
    }

    function onText(text) {
        console.log('TEXTLOADED  ', text);
        var t = text;
        var img = t.image;
        console.log(img.height, img.width);
        texture = text;
        texture.needsUpdate = true;
        update();
    }
}

I the extrude the hex.

    geo = new THREE.ExtrudeGeometry(hexShape, extrudeSettings);

I even have made the face and side different

var mats = [imgMaterial, sideMaterial];
var mat = new THREE.MeshFaceMaterial(mats);
mesh = new THREE.Mesh(geo, mat);

I am seeing just a tiny dot in the center of the hex that is the image. On the shape ( geo) I have 44 faces**

I think I need a uvGenerator or custom uv. The size on the image is 256x256 but I can make it any size***. The documentation use square surfaces this a is a hex surface.

Ideas???

** Should is be 24? 6 + 6 + 12 top + bottom + (6 * 2) sides *** mylogo.png was generated from SVG file, I would like to use SVG for image on surface.