Question

我想创建一个场景的快照，但是当我启用preserveDrawingBuffer = 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

当我新建一个WebGLRenderer时，threejs渲染器停止

2 个答案: