Fit rotated object to a window

[callum]

I know how to fit an object to the window if it is axis aligned. Say for example you are looking directly at a playing card.

If the object is rotated about the Y axis - say 45 degrees. The “footprint or silhouette” of the object has changed - is there a similar formula to take account of that?

I made a fiddle to show what I mean - Edit fiddle - JSFiddle - Code Playground

[avseoul]

Hey, I think you can use axis aligned bounding box (AABB), then frame the object by using min, max point of the bounds. I’ve done something similar in unity3d, which dynamically frame a target object with their bounds to fill the screen, but I haven’t done it in threejs so the following info might not be correct.

There seems a BufferGeometry.boundingBox attribute at geometry level but it seems not updated or at least I was not able to get the updated the bounds by calling BufferGeometry.computeBoundingBox as the documentation suggested after I transform the mesh.

I did a get around to get the bounding box value by using Box3, something like this:

// afetr you transform your mesh
const bounds = new Box3().setFromObject(mesh);

// use bounds.min & bounds.max to compute frustum

Hope this helps

[callum]

Interesting - thank you - I’ll take a look. I just made a Fiddle to test so I can try this there. Edit fiddle - JSFiddle - Code Playground

[callum]

I re-asked the question in a new post since I think a new approach is required

Fit the silhouette of a GLTF mesh to a window/viewport

I am asking this question again with a different context now that I understand the problem a bit more. I want to fit a GLTF mesh to the application viewport. I have been experimenting with bounding boxes, OBBs etc. but I have come to the conclusion I need a different approach since I want the “silhouette” to fit within the specified bounds and I think that’s different from trying to fit 3D geometry. I made a fiddle to illustrate what I mean - Edit fiddle - JSFiddle - Code Playground - the dif…