Why the 3D model itself is the only thing that doesn't show up in a PDF file that I saved from my model-viewer page?

[gabrielgaldinomagalhaes]

I'm trying to create a feature where the user can download a custom .PDF with the 3D model and the settings that they choose in the model-viewer!

For example they are able to select a color to the object among a set of colours. He can also turn a light on, hide some parts and show other parts of the 3D model. And after they choose all their settings, they would be able to download a custom PDF that shows the settings they chose and should also shows the 3D model resultant.
Everything is being shown correctly in the PDF but the 3D model. The 3D just "disappears". I can see the "window" of the model-viewer being save in the PDF, and everything else. The only piece that doesn't show up is the model itself. What can it be?

I tried using html2pdf.js, tried also with pdfmake.js, jsPDF and wkhtmltopdf.

But none of them worked.

Did someone here create something like that and can help me clarify whats happening, please? 🙏

[elalish]

I don't think PDF supports 3D models? If a screenshot is good enough, I'd recommend calling our toBlob method and putting that resulting image into our poster and calling showPoster(). Then then image will probably be saved properly to the PDF.

[gabrielgaldinomagalhaes]

Yes, sorry if I expressed myself wrongly. I meant a shot of the 3D model (a picture of it in the position, angle and settings that the user picked up), not a 3D model itself.
I think that the toBlob, the poster and the showPoster() that you said, must be what I was looking for.

Is there any example on how to use them, somewhere? Can you point me please?

[elalish]

Search our docs: https://modelviewer.dev/docs/index.html#entrydocs-loading-methods-toBlob

[gabrielgaldinomagalhaes]

Thank you, I could figure it out how to reach my goal using the toDataURL() function, but I still have some issues related to the size of the image.

I wanted to make the image always the same dimension, for example 800 x 500 (just a example). Regardless the size of the model-viewer window. At the moment it is generating a PNG that has the same size of my model-viewer window, but instead of that, I want to make sure the image has always the same sizes. How could I reach that?

[elalish]

I would just resize the MV element when you need a screenshot, then change it back on the next frame.