如何计算视口对齐的多边形边界框？

Question

I have a problem with bounding box points calculation. I'm using three.js to render polygons, it's basically 2D with orthographic camera. Unfortunately, simple bounding box calculation - iterate over points and get extreme values doesn't work correctly after camera is rotated. It stays aligned to axes. I'd like bounding box to be aligned to a viewport (just like in the picture below). It can be rotated by any angle, has to be always aligned to a viewport.

I added an example below - how to calculate points of the bounding box on the right?

Image description: left - trivial bounding box without rotation, middle - axis aligned bounding box, right - desired result - viewport aligned bounding box

Fiddle producing middle case: 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

The left figure is obtained by computing the bounding box of the original coordinates.

The right figure is obtained by computing the bounding box of the rotated coordinates.

The central figure is obtained by computing the bounding box in the original coordinates and applying the rotation to the corners. It is no more axis aligned wrt the original coordinates.

Answer 2

Yves explained the concept. You need to convert points from one coordinate system to another to solve this. But since it's an orthographic view, you can also use camera projection for conversions.

In this way, we project all the points to the screen coordinate system, we calculate the position of the box in this coordinate, and then we unproject the points of the box to the world coordinate system.

I updated your sample to demonstrate this. Just keep in mind that width and height of this rectangle are valid only if view direction be parallel to one of the X, Y or Z axes.