three.js: Calculate a proper uv texture mapping for a custom geometry in three.js

Question

I have a few doubts:

1. How can I add an image texture to all the faces of a cube as a whole in three.js? I want a certain part of the image to present in a certain part (1) of the face rather than the complete image in separate faces (2).

2. I was trying to apply the UV-mapping from the text file data. I am not sure what did I do wrong but the texture mapping is not proper and also there are weird shapes present in the texture. https://i.stack.imgur.com/3aFGa.png, https://i.stack.imgur.com/EaCaZ.png

Here is the link to the files: https://drive.google.com/drive/folders/1dYZ4Xa8dvEcCIUEjHYavlao3aU_u3gB2?usp=sharing

This is the code I am using. I am very new to three.js as well js, so feel free to criticize any line of code:

var geometry = new THREE.Geometry();
var text_loader = new THREE.FileLoader();
var face_loader = new THREE.FileLoader();
var uv_loader = new THREE.FileLoader();
text_loader.load("./files/new_vertices.txt", function (object) {
  vert = object.split("\n");
  for (var i = 0; i < vert.length - 1; i++) {
    ind_vert = vert[i].split(",");
    geometry.vertices.push(
      new THREE.Vector3(
        parseFloat(ind_vert[0]),
        parseFloat(ind_vert[1]),
        parseFloat(ind_vert[2])
      )
    );
  }
});

uv_loader.load("./files/new_uv.txt", function (uv_object) {
  uv = uv_object.split("\n");
  face_loader.load("./files/new_face.txt", function (face_object) {
    faces = face_object.split("\n");
    for (var i = 0; i < faces.length - 1; i++) {
      ind_face = faces[i].split(",");
      geometry.faces.push(
        new THREE.Face3(
          parseFloat(ind_face[0]),
          parseFloat(ind_face[1]),
          parseFloat(ind_face[2])
        )
      );
      geometry.faceVertexUvs[0].push([
        new THREE.Vector2(
          parseFloat(uv[parseInt(ind_face[0])].split(',')[0]),
          parseFloat(uv[parseInt(ind_face[0])].split(',')[1])
        ),
        new THREE.Vector2(
          parseFloat(uv[parseInt(ind_face[1])].split(',')[0]),
          parseFloat(uv[parseInt(ind_face[1])].split(',')[1])
        ),
        new THREE.Vector2(
          parseFloat(uv[parseInt(ind_face[2])].split(',')[0]),
          parseFloat(uv[parseInt(ind_face[2])].split(',')[1])
        ),
      ]);
    }
    // geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    geometry.normalize();
    var mesh = new THREE.Mesh(geometry, skin_material);
    mesh.position.set(0, 0, 0);
    mesh.rotation.y = -Math.PI * 0.5; //triangle is pointing in depth, rotate it -90 degrees on Y
    mesh.scale.set(10, 10, 10);
    scene.add(mesh);
    // console.log(mesh);
  });