如何計算視口對齊的多邊形邊界框？

Question

我在計算邊界框點時遇到問題。 我正在使用 three.js 來渲染多邊形，它基本上是帶有正交相機的 2D。 不幸的是，簡單的邊界框計算 - 迭代點並獲取極值在相機旋轉后無法正常工作。 它與軸保持對齊。 我希望邊界框與視口對齊（如下圖所示）。 它可以旋轉任何角度，必須始終與視口對齊。

我在下面添加了一個示例 - 如何計算右側邊界框的點？

圖像描述：左 - 無旋轉的普通邊界框，中 - 軸對齊邊界框，右 - 期望結果 - 視口對齊邊界框

Fiddle 生產中間件： https://jsfiddle.net/tqrc2ue6/5/

var camera, scene, renderer, geometry, material, line, axesHelper, boundingBoxGeometry, boundingBoxLine;

const polygonPoints = [{
    x: 10,
    y: 10,
    z: 0
  },
  {
    x: 15,
    y: 15,
    z: 0
  },
  {
    x: 20,
    y: 10,
    z: 0
  },
  {
    x: 25,
    y: 20,
    z: 0
  },
  {
    x: 15,
    y: 20,
    z: 0
  },
  {
    x: 10,
    y: 10,
    z: 0
  },
]


function getBoundingBoxGeometry(geometry) {
  geometry.computeBoundingBox();
  const boundingBox = geometry.boundingBox;
  const boundingBoxPoints = [{
      x: boundingBox.min.x,
      y: boundingBox.min.y,
      z: 0
    },
    {
      x: boundingBox.max.x,
      y: boundingBox.min.y,
      z: 0
    },
    {
      x: boundingBox.max.x,
      y: boundingBox.max.y,
      z: 0
    },
    {
      x: boundingBox.min.x,
      y: boundingBox.max.y,
      z: 0
    },
    {
      x: boundingBox.min.x,
      y: boundingBox.min.y,
      z: 0
    },
  ];
  return new THREE.BufferGeometry().setFromPoints(boundingBoxPoints);
}

init();
animate();


function init() {

  scene = new THREE.Scene();
  axesHelper = new THREE.AxesHelper(10);
  scene.add(axesHelper);
  //camera = new THREE.OrthographicCamera(-25, 25, -25, 25, -1, 1);
  //camera.position.set(15, 15)
  //camera.rotation.z = -Math.PI / 4
  var frustumSize = 50
  var aspect = window.innerWidth / window.innerHeight;

  camera = new THREE.OrthographicCamera(frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, -1, 1);
  //camera.rotation.z = 2 * Math.PI /3
  camera.rotation.z = 3 * Math.PI / 4
  camera.position.set(15, 15)
  scene.add(camera);

  geometry = new THREE.BufferGeometry().setFromPoints(polygonPoints);
  boundingBoxGeometry = getBoundingBoxGeometry(geometry);

  material = new THREE.LineBasicMaterial({
    color: 0xffffff
  });

  line = new THREE.Line(geometry, material);
  scene.add(line);

  boundingBoxLine = new THREE.Line(boundingBoxGeometry, material)
  scene.add(boundingBoxLine);


  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);
  render();

}

function render() {

  renderer.render(scene, camera);

}

Answer 1

左圖是通過計算原始坐標的邊界框得到的。

右圖是通過計算旋轉坐標的邊界框得到的。

中心圖形是通過計算原始坐標中的邊界框並將旋轉應用於角點而獲得的。 它不再與原始坐標軸對齊。

Answer 2

Yves 解釋了這個概念。 您需要將點從一個坐標系轉換到另一個坐標系才能解決這個問題。 但由於它是正交視圖，您還可以使用相機投影進行轉換。

這樣我們把所有的點project到屏幕坐標系，我們計算出盒子在這個坐標下的unproject ，然后我們把盒子的點反投影到世界坐標系。

我更新了您的樣本以證明這一點。 請記住，僅當視圖方向平行於 X、Y 或 Z 軸之一時，此矩形的寬度和高度才有效。