CODEWITHSUNDEEP
javascriptthree.js
user5280885
user5280885

Reputation:

Three JS Cylinder Texture Distortion

Applying a texture to a cylinder geometry in THREE JS causes some weird distortion of the texture as can be seen in this image:

enter image description here

The shape is created like so:

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;
});

The texture seems to be applied per polygon and not per face? How can i make it wrap around the cylinder without any such artifacts?

EDIT: The texture is 256x256

Upvotes: 2

Views: 783

Answers (1)

TheJim01
TheJim01

Reputation: 8866

Each side of your pyramid is composed of two triangles. You can see this quite clearly in the example on the CylinderGeometry documentation page.

Each triangle has UVs which are created based on the assumption that both triangles will be the same scale, like they are in the example. By making one end of your cylinder smaller, you're changing the scale of the triangles, but your UVs are remaining the same.

You can either edit the UVs to make up for the difference, or (and I recommend) create your own geometry with proper UVs defined.

Upvotes: 1

Related Questions