React render GLB, save a png from the model rendered

Questions
1

I need some help with three.js examples

using that example, how can I save a PNG image after a few interactions with that rendered model on a react web page?

2
  1. Set preserveDrawingBuffer to true on the renderer.
  2. Render frame.
  3. Use toBlob to get a blob of the image - from there you can convert it to base64 png/jpg or binary array buffer - depending on your needs.
3

Thanks but I can’t make it work!!

Do you mind to provide the code that does that please? Thanks

4

Here is some code, R3F sorry,

5

Thanks, but I still can’t make it work with the example I sent! Can make it work with that one you sent but not with this one below.

https://threejs.org/examples/#webgl_decals

6

A working example of downloading a screenshot of the official decal example.

7

Ahh, got it, I understand what I was doing wrong now. Thanks Sean, appreciated mate.

I am new to this, so my next challenge is to actually take a screenshot of only the 3d model + margin of xx, at the moment the screenshot is from the entire canvas, wanna help?

image
image1822×911 117 KB

8

Managed to do it, if you have a better and cleaner option please share

        const widthInput = '1280';
        const heightInput = '1280';

        document.getElementById('button').addEventListener('click', function () {
            renderer.preserveDrawingBuffer = true
             // set camera and renderer to desired screenshot dimension
            camera.aspect = widthInput / heightInput;
            camera.updateProjectionMatrix();
            renderer.setSize(  widthInput, heightInput );

            renderer.render(scene, camera)
            const image = renderer.domElement.toDataURL('image/png')
            renderer.preserveDrawingBuffer = false
            const a = document.createElement('a')
            a.setAttribute('download', 'screenshot.png')
            a.setAttribute('href', image)
            a.click()
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight)
        })