当我新一个新的WebGlrenderer新介绍时，三js渲染器停止

Question

我想创建一个场景快照，但是当我启用保留rawingbuffer = true时，perfermance是低的，所以我会制作一个按钮，当我单击按钮时，我创建一个我创建一个新渲染器如下：

          $("#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)
});

但这引起了一个新问题，渲染和动画被停止了，代码有什么问题？为什么我不能创建一个新的渲染器？

Answer 1

您需要将renderer.domeElement附加到您的文档中，以便可见。

Answer 2

您无需设置preserveDrawingBuffer: true即可获得快照。您只需要在渲染之后拍摄快照和退出当前事件。

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

请参阅此答案：https：//stackoverflow.com/a/30647502/128511