javascript - 如何对使用 ShapeGeometry 创建的 three.js 网格进行纹理化

Question

我正在尝试将位图纹理 Material 放置在从 three.js ShapeGeometry 创建的网格上。

几何形状是一个简单的八边形(我最终会添加曲线使其成为圆 Angular 矩形)。

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

它是这样的:

(加载的图片实际上是一张 512x512 的法国国旗图片)

如何让纹理使用加载图像的全分辨率？ (顺便说一句，当作为 Material 应用于由 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 设置为等于顶点坐标。

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

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

第三个选项是调整你的形状几何体，使其顶点覆盖 [0, 1] 范围 - 然后根据需要应用 mesh.scale。

three.js r.61