I am currently working on creating a domino with rounded vertices using a rounded rectangle shape in THREE.js and then extruding it with the ExtrudeGeometry method. I have also applied a texture of a rectangular brick wall to the front face of this geometry. However, instead of the wall fitting perfectly onto the face of my rounded rectangle, I encountered an unexpected result as shown in the image below: Texture mapping issue
I'm wondering if this is a bug in THREE.js or if I overlooked something in my code. Any help would be greatly appreciated! Below is the snippet of code that I used:
//add tile
var tile_size = 2;
var roundedRectShape = new THREE.Shape();
( function roundedRect( ctx, x, y, width, height, radius ) {
ctx.moveTo( x, y + radius );
ctx.lineTo( x, y + height - radius );
ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
ctx.lineTo( x + width - radius, y + height );
ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
ctx.lineTo( x + width, y + radius );
ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
ctx.lineTo( x + radius, y );
ctx.quadraticCurveTo( x, y, x, y + radius );
} )( roundedRectShape, 0, 0, 1.5*tile_size, 1.7*tile_size, 0.1 );
var extrudeSettings = {
steps: 3,
depth: 0.1*tile_size,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.05,
bevelSegments: 3
};
var geometry = new THREE.ExtrudeGeometry( roundedRectShape, extrudeSettings );
var texture = new THREE.TextureLoader().load( "content/wall.jpg" );
var materialFace = new THREE.MeshLambertMaterial({
map: texture
});
var materialSide = new THREE.MeshLambertMaterial({
color: '#EEEBDC'
});
var materials = [materialFace, materialSide];
tile = new THREE.Mesh(geometry, materials);
tile.rotation.x = - Math.PI/2;
tile.position.z = -1;
tile.position.x = -0.5*tile_size/2;
tile.position.y = -0.2*tile_size;
all.add( tile );