将纹理应用于旋转的圆柱体

Question

我创建一个旋转的圆柱体，然后像这样更新它的矩阵：

var cyl = new THREE.Mesh(new THREE.CylinderGeometry(10, 10, 100, 16, 1, true), new THREE.MeshBasicMaterial());
cyl.rotateZ(THREE.Math.degToRad(-90));
cyl.updateMatrix();
cyl.geometry.applyMatrix(cyl.matrix);
cyl.rotation.set(0, 0, 0);
cyl.updateMatrix();

但是，当我将纹理应用于圆柱体时，它会旋转绘制到圆柱体表面，就好像我以前没有更新过矩阵一样。

var tl = new THREE.TextureLoader();
tl.load(path, function (tex) {
cyl.material.map = tex;
cyl.material.needsUpdate = true;
}

有没有办法改变这种行为？更新矩阵时我是否可能遗漏了什么？任何帮助，不胜感激。

Answer 1

UV 坐标与顶点相关联。它提供了滴管从纹理中提取颜色的参考点。

然后，它的 u，v 值在与其共享面的其他顶点之间的三角形面上进行插值。

移动顶点(使用矩阵或其他方式)不会改变所有顶点的采样保持不变。

U，V 坐标也是 2d，因此使用 3d 矩阵变换旋转它们没有合理的默认行为。它应该根据沿 xy、xz、yz 或任意轴的旋转来旋转 UV？它是否应该使用法线和 UV 映射配对来旋转它们，以便旋转后朝上的 UV 现在变成朝下的 UV？它是模棱两可的，因此它不会发生在矩阵转换中。

但是，如果您真正想要的是将纹理旋转 90 度，您有几个选择。如果您只需要 90 度旋转，您可以在资源管理器或查找器中旋转图像文件本身，如果需要更小的旋转，您可以在 photoshop 或类似环境中旋转，或者您可以使用三角函数对 UV 值本身执行旋转 - 因此您只需将当前 uv 从 0-1 映射到 -1,1，然后使用new_x = cos(t)x-sin(t)*y; new_y = cos(t)*y+sin(t)*x;旋转，然后重新映射到 0-1。

如果您只想让纹理以圆柱体底部而不是侧面为中心，则可以更改 THREE。纹理的 Texture.offset.x/y 属性，但请注意，默认圆柱体 UV 贴图将导致图像压缩。如果您不想在圆柱体的盖子上失真，则需要制作自己的UV映射，但这是另一篇文章。