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

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

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
<Canvas gl={{preserveDrawingBuffer:true}} >

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

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'))