I have successfully created a cube with rounded corners using the THREE.Shape
object:
var shape = new THREE.Shape();
x = width/2;
y = height/2;
shape.moveTo(x - radius, y);
//*** Top right
x = -width/2;
y = height/2;
shape.lineTo(x + radius, y);
if (tr) shape.quadraticCurveTo(x, y, x, y - radius);
else shape.lineTo(x, y);
//*** Bottom right
x = -width/2;
y = -height/2;
shape.lineTo(x, y + radius);
if (br) shape.quadraticCurveTo(x, y, x + radius, y);
else shape.lineTo(x, y);
//*** Bottom left
x = width/2;
y = -height/2;
shape.lineTo(x - radius, y);
if (bl) shape.quadraticCurveTo(x, y, x, y + radius);
else shape.lineTo(x, y);
//*** Top left
x = width/2;
y = height/2;
shape.lineTo(x, y - radius);
if (tl) shape.quadraticCurveTo(x, y, x - radius, y);
else shape.lineTo(x, y);
var extrude = this.shape.extrude({amount: extr || 0, bevelEnabled: false});
this.mesh = new THREE.Mesh(extrude, mat);
However, I am now facing an issue where I need to texture this mesh like you would with a CubeGeometry
, using a bitmap (and eventually video) texture. Currently, the front face of the cube is divided into four equal segments, each displaying a single color from what seems to be pixel data of the bitmap. I am specifically concerned with the front face of the cube in this scenario.