Texture mapping on extrude geometry ThreeJS

Question

I'm creating random shapes with extrude geometry on ThreeJS, now I want to apply textures on it but the result is ugly. I can't figure out how to generate UVMapping in order to display the texture correctly.

I fiddled my issue: http://jsfiddle.net/PsBtn/8/

On the left mesh, one face is not correctly textured, as the face is flat I want the texture not to be skewed.

On the right, the texture is rotated but I don't want this result.

Is there an automatically way to generate UVMapping in order to get the texture render the same on these two meshes (Extrude Geometry) ?

Here is how I generate my meshes:

var points = []

points.push(new THREE.Vector2(-1000, -700));
points.push(new THREE.Vector2(-1000, -300));
points.push(new THREE.Vector2(-300, -300));
points.push(new THREE.Vector2(-300, -500));

shape = new THREE.Shape(points);
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings),
    texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({
    color: 0xFF00FF,
    map: texture
});

geometry.faceUvs = [[]];
geometry.faceVertexUvs = [[]];

for (var f = 0; f < geometry.faces.length; f++) {

    var faceuv = [
        new THREE.Vector2(0, 1),
        new THREE.Vector2(1, 1),
        new THREE.Vector2(1, 0),
        new THREE.Vector2(0, 0)
    ];

    geometry.faceUvs[0].push(new THREE.Vector2(0, 1));
    geometry.faceVertexUvs[0].push(faceuv);
}

mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [material, new     THREE.MeshBasicMaterial({
    color: 0x000000,
    wireframe: true,
    transparent: true
})]);
mesh.position.z = -100;
mesh.position.y = 200;
scene.add(mesh);

ExtrudeGeometry computes UVs for you. However, the UVs it computes seem to be based on an assumption the that points have coordinates between 0 and 1. You might want to experiment to see if that is true. — WestLangley
See also this function to computes UVs for a planar surface. — Tamlyn

user2026247 user2026247 · Accepted Answer · 2013-02-26T16:51:58

I found a solution, I have to compute the uv form my custom forms. This web page is really usefull for it :

http://paulyg.f2s.com/uv.htm

Texture mapping on extrude geometry ThreeJS

1 Answers