How can a 3D box with unequal sides fill a picture window, no matter its orientation?

As shown at window extremes illuminated - JSFiddle - Code Playground, I have a box with unequal sides that a viewer may re-position by dragging. The extreme left, right, top or bottom box corners in the viewport are dynamically indicated by green square dots.

My modeling challenge is, for a given viewport, present my box so that through all positions the dots with the longest window distance between them are at their respective viewport edges.

So, for one object orientation, the object may be presented with left and right dotted corners at the viewport’s left and right edges, while another orientation might result in a presentation of the top and bottom green dotted corners at the viewport’s top and bottom.

My current approach uses a bounding sphere, but that doesn’t accomplish my goal for every, or even many, object orientations.

I suspect a better approach may lie somewhere among these:

[li]Depending on window coordinates of most extreme object points, modify the view or projection matrix or both, to represent the object[/li][li]Swap out the bounding sphere approach for a bounding box approach[/li][li]Get the window coordinates of a ‘virtual’ frame around the green dotted corners and project the framed image onto the window[/li][/ol]

Any comments/aid/instructions greatly appreciated!


Solved this issue, tentatively, in three.js. See example solution demo at fill three.js viewport - JSFiddle - Code Playground