如何纹理一个三。使用ShapeGeometry创建js网格

Question

我正在尝试将位图纹理材质放置在由三个贴图创建的网格上。js形状测量学。

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

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

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

如何获得纹理以使用加载图像的完整分辨率？（顺便说一句，将此纹理作为材质应用于由3.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

挤压几何。WorldUVGenerator是默认的UV生成器为THREE. ShapeGeometry。

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

您需要将您自己的UV生成器传递到THREE. ShapeGeometry。请参阅源代码了解其工作原理。

一个变通方法是将模型参数放大一个因子，比如10，然后通过设置mesh.scale.set（0.1, 0.1, 1 )进行补偿。

第三个选项是调整形状几何体，使其顶点覆盖[0,1]范围-然后应用网格。缩放，如果需要。

三js r.61