javascript - threejs - 将 UV 坐标标准化为 0 和 1 问题

Question

我有一个 UV 坐标小于 0 且大于 1 的模型。我试图将这些坐标归一化到 0 和 1 范围内，但结果不佳。目前我正在使用此函数将任何 UV 坐标转换为我的目标范围

private convertNumberToUV(numb:number) {
    let converted = 0;

    if(numb < 0 || numb > 1) {
      if(numb < 0){ numb = -numb; }
      converted = numb - Math.floor(numb);
    }
    else if(numb > 1){
      converted = numb - Math.floor(numb)
    }
    else {
      converted = numb;
    }


    return converted;
}

结果是这样的

但预期的结果是这样的

我哪里错了？

@pailhead，我的目标是将第一个纹理移植到具有归一化 UV 点的图集中。我的问题是是否可以以这种方式工作。我将第一个 UV 坐标标准化为 0 和 1，为了避免“拉伸(stretch)”效果，我还将纹理重复到第二个图集上，次数等于使用“重复”功能所做的次数

Answer 1

假设您有一堵带 window 的墙，并且它是平面映射的。它的缩放使得一个 Angular 位于 UV(0,0)，另一个 Angular 位于 UV(3,1)。让我们只关注 U 维度，并观察窗口的位置。一条边位于 U(1.5)，另一条边可以位于 U(2)。

|0|---|1.5|-|2|--|3| <- a slice through the wall, U axis

如果我们将砖 block 纹理映射到它上面，并设置 myTexture.wrapS = THREE.RepeatWrapping，砖 block 将均匀分布在墙上，并在此过程中重复 3 次。

如果你按照你的方式调制这些 uv，你最终会得到这样的结果

|0|-[0.5]-|0||0|

这会产生无意义但可预测的结果。纹理的左半部分将一直拉伸(stretch)到窗口。然后在 window 下方和上方它会显示相同的一半，但相反，墙的剩余部分将只显示水平线并且没有砖 block 纹理，因为它被拉伸(stretch)到无穷大。