How to map uvs with one texture?

Questions
,
1

Hi, I have an old function to map uvs.

function mapUv (textureWidth, textureHeight, geometry, faceIdx, x1, y1, x2, y2, flag=false) {
  var tileUvW = 1 / textureWidth;
  var tileUvH = 1 / textureHeight;
  if (geometry.faces[faceIdx] instanceof THREE.Face3) {
    var UVs = geometry.faceVertexUvs[0][faceIdx * 2];
    if (faceIdx == 4 && !flag) {
      UVs[0].x = x1 * tileUvW;UVs[0].y = y1 * tileUvH;
      UVs[2].x = x1 * tileUvW;UVs[2].y = y2 * tileUvH;
      UVs[1].x = x2 * tileUvW;UVs[1].y = y1 * tileUvH;
    } else {
      UVs[0].x = x1 * tileUvW;UVs[0].y = y1 * tileUvH;
      UVs[1].x = x1 * tileUvW;UVs[1].y = y2 * tileUvH;
      UVs[2].x = x2 * tileUvW;UVs[2].y = y1 * tileUvH;
    }
    var UVs = geometry.faceVertexUvs[0][faceIdx * 2 + 1];
    if (faceIdx == 4 && !flag) {
      UVs[2].x = x1 * tileUvW;UVs[2].y = y2 * tileUvH;
      UVs[1].x = x2 * tileUvW;UVs[1].y = y2 * tileUvH;
      UVs[0].x = x2 * tileUvW;UVs[0].y = y1 * tileUvH;
    } else {
      UVs[0].x = x1 * tileUvW;UVs[0].y = y2 * tileUvH;
      UVs[1].x = x2 * tileUvW;UVs[1].y = y2 * tileUvH;
      UVs[2].x = x2 * tileUvW;UVs[2].y = y1 * tileUvH;
    }
  }
}

But there is no Face3 and faces in the new threejs. How can I match uv in the new version?

2

Maybe something like this:


    function mapUv(textureWidth, textureHeight, geometry, faceIdx, x1, y1, x2, y2, flag=false) {
        let tileUvW = 1 / textureWidth;
        let tileUvH = 1 / textureHeight;
        let index = geometry.index.array;
        let uv = geometry.attributes.uv;

        for (let i = 0; i < index.length; i += 6) {
            let UVs = []
            for (let j = 0; j < 3; j++) {
                UVs.push(new THREE.Vector2(uv.getX(i + j),uv.getY(i + j)))
            }
            if (faceIdx == 4 && !flag) {
                UVs[0].x = x1 * tileUvW;
                UVs[0].y = y1 * tileUvH;
                UVs[2].x = x1 * tileUvW;
                UVs[2].y = y2 * tileUvH;
                UVs[1].x = x2 * tileUvW;
                UVs[1].y = y1 * tileUvH;
            } else {
                UVs[0].x = x1 * tileUvW;
                UVs[0].y = y1 * tileUvH;
                UVs[1].x = x1 * tileUvW;
                UVs[1].y = y2 * tileUvH;
                UVs[2].x = x2 * tileUvW;
                UVs[2].y = y1 * tileUvH;
            }
            for (let j = 0; j < 3; j++) {
                uv.setX(i + j, UVs[j].x)
                uv.setY(i + j, UVs[j].y)
            }
            //Vs = geometry.faceVertexUvs[0][faceIdx * 2 + 1];
            UVs = []
            for (let j = 0; j < 3; j++) {
                UVs.push(new THREE.Vector2(uv.getX(i + 3 + j),uv.getY(i + 3 + j)))
            }
            if (faceIdx == 4 && !flag) {
                UVs[2].x = x1 * tileUvW;
                UVs[2].y = y2 * tileUvH;
                UVs[1].x = x2 * tileUvW;
                UVs[1].y = y2 * tileUvH;
                UVs[0].x = x2 * tileUvW;
                UVs[0].y = y1 * tileUvH;
            } else {
                UVs[0].x = x1 * tileUvW;
                UVs[0].y = y2 * tileUvH;
                UVs[1].x = x2 * tileUvW;
                UVs[1].y = y2 * tileUvH;
                UVs[2].x = x2 * tileUvW;
                UVs[2].y = y1 * tileUvH;
            }
            for (let j = 0; j < 3; j++) {
                uv.setX(i + 3 + j, UVs[j].x)
                uv.setY(i + 3 + j, UVs[j].y)
            }
            geometry.attributes.uv.needsUpdate = true;
        }

    }
3

Some simple examples from the collection where you can see how the uv values are generated.

RoundEdgedBoxFlat

DynamicTubeGeometryCaps
CircleDynamicallyFormable
MorphBoxSphere

4 Likes