Use both autoclear and preserveDrawingBuffer in WebGLrenderer

Question

I have a Three.js scene, where I have set renderer's preserveDrawingBuffer:true because I want to use renderer.toDataURL to take a snapshot of what is on the canvas, and I also use renderer.autoClear = false because I am using 2 scenes with one camera each (one renderer of course).

The problem is that when I move the camera with orbitControls, the objects do not animate as they should, their previous states stay on the canvas and they are creating an ugly painting ( they are not erased) because of the preserveDrawingBuffer:true setting.

What can I do to have both the snapshot functionality the 2 scenes/cameras and the orbit controls?

Thank you.

Answer 1

If you are instantiating WebGLRenderer and preserving the drawing buffer like so:

var renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

And if you are setting

renderer.autoClear = false;

you will have to call renderer.clear() before rendering like so:

renderer.clear();
renderer.render( scene, camera );

three.js r.69