I am able to screenshot the entire canvas, but the downside is that it is showing unnecessary spacing (side ones) too.
How can i capture a snapshot such that the it only contains the model? No extra spacings.
Zooming could be an option, but again the entire model could not be seen.
You can fit the camera to model using camera-controls - then trim the unnecessary padding by calculating aspect ratio of the model bounding box and comparing it to the canvas width / height ratio.
@mjurczyk
Could you please elaborate more on the unnecessary padding part?
and even after comparing the aspect ratio, how will the “trimming” happen of the canvas
Canvas is just an image - you can resize / trim / clip it using just Canvas API (ie. create a smaller canvas, and paint sub-section of the original onto it.)
For widescreen monitors, even if you fit model to the height of the viewport - you’ll have tons of padding to the right and to the left of it. If you fit the model to viewport using it’s bounding sphere - you can assume that this smaller, trimmed canvas has to be square - with it’s height and width equal to the smaller dimension of the original canvas.
@mjurczyk
I calculated the model width by
const width = box.max.x - box.min.x; //0.5341
const height = box.max.y - box.min.y; //1.232
But the bounding box gives the width of model in some three.js units.
So trimming the canvas to take these units is a bit tricky, as in canvas would take pixels right.