Best Fit Rectangle From Set of Coplanar Points in Three.js

Question

First off, I apologize if there is a solution for this somewhere, but I've done a great deal of digging through Three.js and A-Frame docs as well as Stack Overflow and haven't found what I'm looking for.

What I want to do is create a best-fit A-Frame plane from a set of Vector3s that I already know are coplanar. This can be easily done if the angle of the plane is a multiple of 90, but anything else and the .setFromPoints() algorithm for Box3s doesn't work the way I need it to.

The conversion from Three.js to A-Frame I can most likely handle myself, but if anyone wants to tackle that they're more than welcome to. I just need to create a rectangular plane that actually makes sense.

Basically, I want to create an algorithm that does this:

Create the bolded plane, rather than the lighter box/plane with too much wasted space.

I don't want to create custom geometry that perfectly fits the points, which I've already done. I actually do just want an A-Frame plane with nothing but height, width, position, and rotation attributes. I understand this is less precise, but it's far more ideal for what I'm working on.

Answer 1

OK, maybe my previous answer is to difficult to implement. Here is another idea: calculate the convex hull of your points (https://en.wikipedia.org/wiki/Graham_scan provides a simple and efficient algorithm with pseudo code). the inner points are not relevant. The optimum rectangle must coincide with at least one of the sides of the convex hull. With all angles of the sides of the convex hull calculate the dimensions of the rectangle with that angle. Then take the minimum.