如何纹理一个three.js使用ShapeGeometry创建的网格

Question

我试图在从three.js ShapeGeometry创建的网格上放置一个位图纹理材质。

几何是一个简单的八角形（我最终会添加曲线使它成为一个圆角矩形）。

网格被创建并显示得很好，除了位图纹理显示为四个巨大的方块，这似乎是加载图像的超级低分辨率版本。

这里是什么样子：

（加载的图像实际上是一个512x512的PIC法国国旗的）

我怎样才能得到纹理使用加载图像的全分辨率？ （顺便说一句，当作为从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); 

谢谢！

Answer 1

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

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

您需要将自己的紫外线发生器传递到THREE.ShapeGeometry。查看源代码的工作原理。

解决方法是按比例缩放模型参数10，然后通过设置mesh.scale.set(0.1, 0.1, 1)进行补偿。

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

three.js r.61