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值本身执行旋转 - 因此您只需映射当前uvs从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地图将导致图像的scrunching。如果你不想要在圆柱体的顶盖上出现扭曲，你需要制作自己的UV贴图，但那是另一个贴子。

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

1 个答案: