threejs renderer stop when I new a new WebGLRenderer

Question

I want to create a snapshot of the scene,but when I enable the preserveDrawingBuffer=true,the perfermance is to low,so I make a button,when I click the button I create a new renderer as follows:

          $("#shot").click(function() {
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        preserveDrawingBuffer: true
    })
    new TWEEN.Tween(camera.position).to({
        x: 0,
        y: 400,
        z: 1700
    }, 1000).start();
    setTimeout(function() {
        var pic = renderer.domElement.toDataURL('image/jpeg');
        console.log(pic);
    }, 1100)
});

but this caused a new problem, the render and the animation is stoped,what's the matter about the code? why can't I create a new renderer?

Answer 1

You need to append the renderer.domeElement to your document somewhere for it to be visible.

Answer 2

you don't need to set preserveDrawingBuffer: true to be able to take a snapshot. You just need to take the snapshot after rendering and before exiting the current event.

 renderer.render(scene, camera);
 const pic = renderer.domElement.toDataURL('image/jpeg');

See this answer: https://stackoverflow.com/a/30647502/128511