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.
Advertisement
Answer
First find the best line passing through the points. This is called “line fit”, like here: http://stackoverflow.com/questions/2352256/fit-a-3d-line-to-3d-point-data-in-java , it should be easy to do this in two dimensions instead of three. See also here: https://en.wikipedia.org/wiki/Deming_regression The line gives you the angle, the minmax of the perpendicular distance of the points is the height of the rectangle, the minmax of the positions of the perpendicular foot points to the line makes the width of the rectangle. Or you rotate all points by the negativ angle of the line and simply calculate the minmax values of the x and y components of the points for the width and height of the rectangle.