三个JS圆柱纹理失真

Question

在THREE JS中将纹理应用于圆柱体几何体会导致纹理的一些奇怪的扭曲，如下图所示：

形状是这样创建的：

var cylinderGeo = new THREE.CylinderGeometry(0.1, 1, 1, 4, 1, false, Math.PI / 4);
cylinderGeo.computeFlatVertexNormals();
var mesh = new THREE.Mesh(cylinderGeo);
mesh.position.x = 10;
mesh.scale.set(10, 5, 10);
mesh.material = new THREE.MeshLambertMaterial();

// LOAD TEXTURE:
textureLoader.load("/textures/" + src + ".png", function (texture) {
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(2,2);
    texture.needsUpdate = true;
    mesh.material.map = texture;
    mesh.material.needsUpdate = true;
});

纹理似乎是每个多边形应用而不是每个面？如何在没有任何此类伪影的情况下将其环绕在圆柱体周围？

编辑：纹理是256x256

Answer 1

金字塔的每一面都由两个三角形组成。您可以在CylinderGeometry documentation page上的示例中清楚地看到这一点。

每个三角形都有UV，这是基于两个三角形都是相同比例的假设而创建的，就像它们在示例中一样。通过缩小圆柱体的一端，您可以更改三角形的比例，但UV仍然保持不变。

您可以编辑UV以弥补差异，或者（我建议）使用定义的适当UV创建自己的几何体。