When I try to apply a texture to a cylinder geometry in THREE JS, I encounter some strange distortion issues with the texture. The problem can be clearly seen in this image:
https://i.sstatic.net/A80KH.png
The cylinder shape is generated using the following code:
var cylinderGeo = new THREE.CylinderGeometry(0.1, 1, 1, 4, 1, false, Math.PI / 4);
cylinderGeo.computeFlatVertexNormals();
var mesh = new THREE.Mesh(cylinderGeo);
mesh.position.x = 10;
mesh.scale.set(10, 5, 10);
mesh.material = new THREE.MeshLambertMaterial();
// LOAD TEXTURE:
textureLoader.load("/textures/" + src + ".png", function (texture) {
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2,2);
texture.needsUpdate = true;
mesh.material.map = texture;
mesh.material.needsUpdate = true;
});
It appears that the texture is being applied per polygon rather than per face. How can I ensure that the texture wraps around the cylinder correctly without any distortions?
EDIT: The dimensions of the texture are 256x256 pixels.