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，为了避免“拉伸”效果，我还将纹理重复到第二个图集上的次数等于使用“重复”函数所做的次数

Answer 1

想象你有一堵带窗户的墙，它是平面映射的。它被缩放，使得一个角在 UV(0,0) 处，另一个在 UV(3,1) 处。让我们只关注 U 维度，并观察窗口在哪里。一条边在 U(1.5)，另一条可以在 U(2)。

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

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

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

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

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