How to use aframe-atlas-uvs-component - 1 common examples

const geometries = cylinders.map((cylinderData, i) => {
    const cylinder = new THREE.CylinderBufferGeometry(
      cylinderData.radius,
      cylinderData.radius,
      cylinderData.height
    );

    const colorArray = [];
    for (i = 0; i < cylinder.attributes.position.array.length; i += 3) {
      colorArray[i] = colorHelper.r;
      colorArray[i + 1] = colorHelper.g;
      colorArray[i + 2] = colorHelper.b;
    }
    cylinder.addAttribute('color', new THREE.Float32BufferAttribute(colorArray, 3));

    const alphaUvs = getGridUvs(0, i, 1, 4);
    const uvs = cylinder.attributes.uv.array;
    for (i = 0; i < uvs.length; i += 6) {
      uvs[i] = alphaUvs[0].x;
      uvs[i + 1] = alphaUvs[0].y;

      uvs[i + 2] = alphaUvs[1].x;
      uvs[i + 3] = alphaUvs[1].y;

      uvs[i + 4] = alphaUvs[2].x;
      uvs[i + 5] = alphaUvs[2].y;
    }
    cylinder.attributes.uv.needsUpdate = true;

    return cylinder;
  });