ThreeJS Bitmap Texture on THREE.Shape extrude

Question

I'm successfully drawing a cube with rounded corners by 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);

The issue is that I need to treat this mesh as you would with a CubeGeometry and texture it with a bitmap (and eventually video) texture. The current result is the front face of the cube is split into four equal segments, each a single color from what does appear to be pixel data from the bitmap. In this instance, I am only concerned with the front face of the cube.

mrdoob mrdoob · Accepted Answer · 2012-05-31T20:37:52

Seems like (by now) you'll need to write the UV coordinates yourself.

You need to compute the bounding box of your geometry. With that data you should be able to generate 0 to 1 UVs for each side.

ThreeJS Bitmap Texture on THREE.Shape extrude

1 Answers