CODEWITHSUNDEEP
three.js
dukeispie
dukeispie

Reputation: 83

How to convert render from three.js to .png file?

How would I convert a render to a .png image?

I've been looking around for awhile but nothing has worked.

Upvotes: 5

Views: 6802

Answers (1)

2pha
2pha

Reputation: 10165

Here is a function I use and a fiddle that shows it working.

function takeScreenshot() {
    // For screenshots to work with WebGL renderer, preserveDrawingBuffer should be set to true.
    // open in new window like this
    var w = window.open('', '');
    w.document.title = "Screenshot";
    //w.document.body.style.backgroundColor = "red";
    var img = new Image();
    img.src = renderer.domElement.toDataURL();
    w.document.body.appendChild(img);
    
    // download file like this.
    //var a = document.createElement('a');
    //a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
    //a.download = 'canvas.png'
    //a.click();
}

EDIT 2024:
The three.js manual now has a page showing how to take a screenshot with much more detail. You are better off looking there.
Three.js: Taking A Screenshot of the Canvas

Upvotes: 10

Related Questions