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

Question

我想创建一个场景的快照，但是当我启用preserveDrawingBuffer = true时，表现为低，所以我做一个按钮，当我点击我创建的按钮一个新的渲染如下：

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