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|

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