如何拉伸几何体使其边界框正好适合 Three.js 中的屏幕

Question

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

现在我已经弄清楚了如何使几何图形适合屏幕，如下所示：

使用以下代码基本上调整 camera.z 使几何体适合 canvas 的高度。

    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);
  }

然而，这是使用相机位置，因此几何图形将适合视图。但是，我正在寻找拉伸几何形状的方法，以便其边界框精确适合屏幕，最好使用一些预定义的填充。由于这与相机设置无关，我需要操纵几何顶点值以水平拉伸它。如何做到这一点？我想保留与基础数据相关的顶点值。

我假设这需要是 canvas 维度（宽度、高度）、几何坐标和返回新几何坐标的相机设置的函数？任何提示表示赞赏。

Answer 1

这个问题的简短回答是：将相机的宽高比设置为 1.0。

如果几何边界在剪辑 space 中已经 [-1, 1 ]，这将起作用。如果不是，则必须先将它们转换为剪辑 space。

如何拉伸几何体使其边界框正好适合 Three.js 中的屏幕

How to stretch geometry so its bounding box fits precisely the screen in Three.js

graphics

geometry

coordinate-transformation

three.js