Texture not getting applied on sides in Three.js

Question

I have a mesh which is created from extruding a png image. I have refered to the code http://wizgrav.github.io/three.js/runner/ . I am using a THREE.MeshPhongMaterial to the mesh. I am using a texture map, but the texture is only getting applied on the front and the back of the mesh and not on the sides. Please see attached image below.

The sides take up the darkest color of the texture.

I went to threejs.org/editor and added a simple cube and applied the same THREE.MeshPhongMaterial material with the same texture and it got applied on all the sides of the cube. But in my case the texture is not applied on the sides.

Code:

var texture = THREE.ImageUtils.loadTexture('/Content/texture-green.jpg');
var bumpTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-bump.jpg');
var specularTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-specular.jpg');

var material = new THREE.MeshPhongMaterial({
    map: texture,
    bumpMap: bumpTexture,
    bumpScale: 0.03,
    specularMap: specularTexture
});

var g = new THREE.CanvasGeometry(canvas, { "height": 0.1, "solid": solid, "offset": window.thr, "steps": (steps ? Math.abs(steps) : 5) });
g.center();
mesh = new THREE.Mesh(g, material);
scene.add(mesh);

So, Is there a problem in the way the geometry is formed ( http://wizgrav.github.io/three.js/runner/CanvasGeometry.js )? Or is there another way to add textures to the sides of the mesh?

Thank you.

Answer 1

I followed this link and it worked for me. I had to do one minor chnages to the texture to get it right.

texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.offset.set(0.5, 0.5);

Hope this helps someone too.