How to project a texture to curved surface?

class EllipseCurve3 extends THREE.Curve {
  
  ellipse = null
 
  constructor (ellipse) {
    super()
    this.ellipse = ellipse
  }
  
  
  getPoint(t, optionalTarget = new THREE.Vector3()) {
    const point = this.ellipse.getPoint(t, optionalTarget)
    return new THREE.Vector3(
      point.x,
      point.y,
      0
    )
  }
}

// Scene
const scene = new THREE.Scene();

var shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.moveTo(0, 1);
shape.lineTo(50, 1);
shape.moveTo(50, 0);
shape.lineTo(0, 0);

// var curve = new THREE.CatmullRomCurve3([
//   new THREE.Vector3(0, 0, 50),
//   new THREE.Vector3(-50, 0, 0),
//   new THREE.Vector3(0, 0, -50)
// ]);

const arc = new THREE.EllipseCurve(
    0,
    0, // ax, aY
    100,
    100, // xRadius, yRadius
    0,
    1.5 * Math.PI, // aStartAngle, aEndAngle
    false, // aClockwise
    0 // aRotation
  ),
  path = new EllipseCurve3(arc)
  geometry = new THREE.ExtrudeGeometry(shape, {
    bevelEnabled: false,
    extrudePath: path,
    steps: 50,
    depth: 5,
    amount: 20,
    material: 0,
    extrudeMaterial: 1
  });


// Set up lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(100, 200, 100); // x, y, z
scene.add(directionalLight);

// Camera
const width = 200;
const height = width * (window.innerHeight / window.innerWidth);
const camera = new THREE.OrthographicCamera(
  width / -2, // left
  width / 2, // right
  height / 2, // top
  height / -2, // bottom
  0.1, // near
  1000 // far
);

camera.position.set(400, 400, 400);
camera.lookAt(0, 0, 0);

// Renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new THREE.OrbitControls(camera, renderer.domElement);

renderer.render(scene, camera);

// Add it to HTML
document.body.appendChild(renderer.domElement);
var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = true;

const picture = 'https://threejs.org/examples/textures/uv_grid_opengl.jpg'
textureLoader.load(picture, function(texture) {
    //  repeat pattern
    texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;

    // zoom in on pattern
    texture.repeat.set(.01, .01);

    // assign texture via MeshBasicMaterial
    var material = new THREE.MeshBasicMaterial({
        map: texture,
    needsUpdate: true,
        // transparent: true,
        // premultipliedAlpha: true,
        // side: THREE.DoubleSide,
        // blending: THREE.AdditiveBlending
    });
  
  // var material = new THREE.MeshPhongMaterial({ color: 0x0048ff });
  var mesh = new THREE.Mesh(geometry, material)
  mesh.rotation.x = Math.PI / 2
  // mesh.rotation.z = Math.PI / 2
  scene.add(mesh)
  scene.add(cube)
})

function render() {
  renderer.render(scene, camera);
  // Rotate out group
  // svgGroup.rotation.y -= 0.005
  controls.update();
  requestAnimationFrame(render);
}
render();