Hello, i’m currently working with the V3 and i’m creating a pdf through jsPDF.
This is how i generate the img through jsPDF
doc.addImage(
viewportImage,
“PNG”,
drawViewportImgX,
drawViewportImgY,
175,
75
);
Where:
viewportImage = viewport.getScreenshot(“png”, 1) // I’m not sure how to handle this numeric value.
drawViewportImgX = X Position for the img
drawViewportImgY = Y position for the img
175 = width of the image
75 = height of the image
The problem that i have is that the image that the model exports is probably way too big for the dimensions that i’m handling in the PDF.
Is it possible to do something like…
viewport.getScreenshot().resizeFunction(400width, 150height)
Or any similar approach that might let me have a decent quality small image?
Hello @Facundo_Sotomayor,
the getScreenshot function takes a screenshot of the size of the scene in which it is currently in. There are some workarounds to achieve a screenshot with your target resolution though. In this example a separate, hidden viewport is created where you can specify the size which the screenshot should have. As this viewport is hidden, no ones sees what happens in the background and you get a screenshot of the desired resolution.
Cheers, Michael
Hello @MajorMeerkatThe3rd ,
First of all, thank you for coming up with a solution this fast.
This approach you’ve provided is actually working very nicely, now i can generate images for the pdf and not worry about the current viewport of the user, which is great.
But i still have a small issue, i have too much whitespace in the generated image and i kinda need to use as much of this space for the model, maybe by adding some zoom? i’ve tried doing something like
hiddenViewport.camera?.zoomTo() but the result is basically the same
PD: The attached image is actually how it looks in the PDF, the resolution is a bit lower because of the print-screen
hiddenViewport.beautyRenderBlendingDuration = 1;
hiddenViewport.clearColor = “#cecece”;
hiddenViewport.automaticResizing = false;
hiddenViewport.maximumRenderingSize = { width: 800, height: 400 };
hiddenViewport.resize(800, 400);
This are the props i’m passing to the image
Hello @Facundo_Sotomayor
with the zoomTo function you are on the right track, there is just a little setting missing. With the setting zoomToFactor of the camera you can specify how close you want to zoom into the object. The smaller the value, the closer you get.
This means in your case that you can for example set the zoomToFactor to 1 by calling hiddenViewport.camera.zoomToFactor = 1; before calling zoomTo.
By playing around with this value it should be easy for you to find the right zoom level with the least amount of white space!
Cheers, Michael
Oooh, zoomToFactor(0.75) did the job for me in here.
Thank you for everything @MajorMeerkatThe3rd
1 Like