javascript - THREE.Shape 挤出上的 ThreeJS 位图纹理

Question

我使用 THREE.Shape 对象成功绘制了一个圆 Angular 立方体:

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);

问题是我需要像处理 CubeGeometry 一样处理这个网格，并使用位图(最终是视频)纹理对其进行纹理处理。当前的结果是立方体的正面被分成四个相等的部分，每个部分都是一种颜色，看起来确实是位图中的像素数据。在本例中，我只关心立方体的正面。

Answer 1

似乎(到现在为止)您需要自己编写 UV 坐标。

您需要计算几何体的边界框。有了这些数据，您应该能够为每一面生成 0 到 1 个 UV。