Mapping texture on 3JS bump geometry
I am creating random shapes with extrude geometry on threeJS, now I want to apply textures on it, but the result is ugly. I cannot figure out how to create the UVMapping to render the texture correctly.
I looked at my problem: http://jsfiddle.net/PsBtn/8/
On the left mesh, one face is textured incorrectly because the face is flat. I want the texture not to distort.
On the right, the texture is rotated, but I don't want that result.
Is there an automatic way to create UVMapping so that the texture appears the same on the two meshes (Extrude Geometry)?
This is how I create my grids:
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);
+3
source to share