CODEWITHSUNDEEP
three.jssavepngrenderscene
Alessandro
Alessandro

Reputation: 1

render and save scen with three.js int png or canvas BitMap

I'm interesting to know if and how three.js can be applied to rendered 2d Sprites and use in my web page

my aim is to render a scene (in a div for example) and save it as a png (similar to a 3d programme); no need to save a frame of my animation (as I see, examples are provided in forums)

can anyone provide a simple example of a top to end creation and save of a static scene?

Upvotes: 0

Views: 2990

Answers (1)

Jos Dirksen
Jos Dirksen

Reputation: 1903

Yes you can save it as a png. Following function takes the currently rendered output, creates a new image and adds it to the page (you can also download the image if you want, see commented section). 

   function copyCanvas() {
        imgData = renderer.domElement.toDataURL();

        // create a new image and add to the document
        imgNode = document.createElement("img");
        imgNode.src = imgData;
        document.body.appendChild(imgNode);

//        alternative way, which downloads the image 
//        var link = document.createElement("a");
//        link.download = 'capture.png';
//        link.href = imgData;
//        link.click();
    }

A complete example can be found here: https://github.com/josdirksen/threejs-cookbook/blob/master/06-particles-postprocessing/06.09-save-webgl-output.html

Upvotes: 2

Related Questions