如何为使用ShapeGeometry创建的three.js网格添加纹理

Question

我正在尝试在由three.js ShapeGeometry创建的网格上放置位图纹理材质。

这个几何体是一个简单的八边形（最终将添加曲线使其成为圆角矩形）。

网格已经创建并正常显示，但是位图纹理显示为四个巨大的正方形，似乎是所加载图像的超级低分辨率版本。

它看起来像这样：

（实际加载的图像是一张512x512的法国国旗图片）

如何让纹理使用所加载图像的完整分辨率？（顺便说一下，当应用于由THREE.PlaneGeometry创建的网格时，此纹理运作良好。）

以下是我的代码...

var shape = new THREE.Shape();
shape.moveTo(-width/2 + radius, height/2);
shape.lineTo(width/2 - radius, height/2);
shape.lineTo(width/2, height/2 - radius);
shape.lineTo(width/2, -height/2 + radius);
shape.lineTo(width/2 - radius, -height/2);
shape.lineTo(-width/2 + radius, -height/2);
shape.lineTo(-width/2, -height/2 + radius);
shape.lineTo(-width/2, height/2 - radius);
shape.lineTo(-width/2 + radius, height/2);
var myGeometry = new THREE.ShapeGeometry( shape );

var myMesh = new THREE.Mesh(myGeometry, myMaterial);

Thanks!!!

- John

Answer 1

THREE.ExtrudeGeometry.WorldUVGenerator 是 THREE.ShapeGeometry 的默认 UV 生成器。

这个默认的 UV 生成器将 UV 设置为等于顶点坐标。

您需要传入自己的 UV 生成器到 THREE.ShapeGeometry中。请查看源代码了解它的工作方式。

一个解决方法是将模型参数放大10倍，然后通过设置 mesh.scale.set( 0.1, 0.1, 1 ) 进行补偿。

第三种选择是调整形状几何体，使其顶点覆盖 [0，1] 范围 - 然后如果需要可以应用 mesh.scale。

three.js r.61

- WestLangley

---

我知道它一定与UV有关，但是无法理解它。谢谢！我觉得现在我可以让它正常工作了。 - John

现在工作得非常好！我选择了第2个选项后面的门 :) - John