0

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.

enter image description here

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.

Aniket Betkikar
  • 166
  • 1
  • 14
  • I at least see streaks of texture on the side, It's a UV texture map issue, since the code generates this runner you have to look for a way to wrap the UV around. http://stackoverflow.com/questions/19891507/correct-uv-mapping-three-js I hope this link helps. – Leroy Thompson Jul 22 '16 at 00:52
  • @LeroyThompson Thanx man for your help. I went through that link but it did not help me. This http://stackoverflow.com/a/27317936/5275732 was exactly what I was looking for and it worked for me. – Aniket Betkikar Jul 22 '16 at 09:20

1 Answers1

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.

Community
  • 1
  • 1
Aniket Betkikar
  • 166
  • 1
  • 14