Export 3d models into pdf by converting it into 2d | jsPDF R3F

Questions
1

Hi there everyone! I’m trying to export my 3d scene into a pdf but whole Canvas area is coming blank in the pdf. So I was thinking is there anyway I could convert my 3d scene into 2d and then export it into pdf??
I’m using jspdf and R3F

2

To make frames of canvas “exportable” (ie. persistent between renders), you have to set preserveDrawingBuffer to true on the renderer (docs.)

On how to do it in r3f - see also this thread.

1 Like
3 
<Canvas gl={{preserveDrawingBuffer:true}} >
......
</Canvas>

worked for me. Thanks to you both @drcmda and @mjurczyk :hugs:

4

i read that it makes the app a tiny bit slower, is that true @mjurczyk ?

snapshotting can also be done without preserveDrawingBuffer, just call gl.render(scene, camera) before you save.

anyway the code to create a png:

const link = document.createElement('a')
link.setAttribute('download', 'canvas.png')
link.setAttribute('href', document.querySelector('canvas').toDataURL('image/png').replace('image/png', 'image/octet-stream'))
link.click()