How to toggle preserveDrawingBuffer in three.js?

问题:

Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems:

• there is no method in renderer to dispose all the buffers,

• canvas goes black if I do

  renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});

How do I do this properly?

EDIT: I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the screenshot. See https://github.com/mrdoob/three.js/issues/189

回答1:

You don't need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event.

So for example this will always work

renderer.render( scene, camera ); var screenshot = renderer.domElement.toDataURL(); 

Whereas this will only work randomly if you're luck

someElement.addEventListener('click', function() {    // this is not immediately after rendering. you have no    // idea when it is relative to rendering.    var screenshot = renderer.domElement.toDataURL(); }); 

Most of the THREE.js examples have a render function if you need to take a screenshot when the user requests one you could do this

someElement.addEventListener('click', function() {    render();    var screenshot = renderer.domElement.toDataURL(); }); 

Or you could do this

var takeScreenshot;  function render() {    ...    if (takeScreenshot) {      takeScreenshot = false;      var screenshot = renderer.domElement.toDataURL();    } }  someElement.addEventListener('click', function() {    takeScreenshot = true; }); 

Or any number of other ways to just make sure you take the screenshot immediately after rendering.

文章来源: How to toggle preserveDrawingBuffer in three.js?