如何拉伸几何图形，使其边界框恰好适合Three.js中的屏幕

我正在寻找一种将几何图形（所有顶点z = 0）拉伸到可见屏幕（HTML Canvas元素）的方法。

现在，我已经解决了如何将几何图形适合屏幕，如下所示：

以下代码基本上调整了camera.z以使其几何形状适合画布的高度。

    geometry.computeBoundingBox();

    const bbox = geometry.boundingBox;
    const geometryCenter = bbox.getCenter(new THREE.Vector3());
    const geometrySize = bbox.getSize(new THREE.Vector3())

    const cameraZ = getZFromGeometrySize(camera.fov, geometrySize);

    const scale = getScaleFromZ(height, camera.fov, cameraZ);

    const zoomTransform = d3.zoomIdentity
      .translate(width * 0.5, height * 0.5)
      .scale(scale);

    zoom.transform(canvasSelection, zoomTransform);

    camera.position.set(geometryCenter.x, geometryCenter.y, cameraZ)

    camera.updateProjectionMatrix();

具有以下功能定义：

  function getZFromGeometrySize(fov, geometrySize) {
    const maxSize = Math.max( geometrySize.x, geometrySize.y );

    const halfFOVRadians = toRadians(fov * 0.5);

    return maxSize / ( 2 * Math.tan( halfFOVRadians ) );
  }


  function getScaleFromZ (height, fov, z) {

    const halfFOVRadians = toRadians(fov * 0.5);

    return height / (2 * Math.tan(halfFOVRadians) * z);
  }

This however is using camera position so geometry will fit the view. However, I am looking for the way to stretch the geometry so its bounding box precisely fits the screen, ideally with some predefined padding. Since this is not related to camera settings I need to manipulate geometry vertices values to stretch it horizontally. How to achieve this? I want to retain values of vertices as they relate to underlying data.

I assume this would need to be a function of canvas dimensions (width, height), geometry coordinates, and camera settings returning new geometry coordinates? Any hint is appreciated.