如何在three.js中切换preserveDrawingBuffer？

Question

基本上,我想要设置我可以去saveDrawingBuffer = true,渲染场景一次,抓住截图,然后返回.但是,这会带来两个问题:

• 渲染器中没有方法可以处理所有缓冲区,

• 如果我这样做,画布会变黑

  renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});

我该怎么做呢？

编辑:我没有找到切换这个的方法,所以我不得不克隆场景并创建第二个渲染器来制作屏幕截图.请参阅https://github.com/mrdoob/three.js/issues/189

Answer 1

您不需要preserveDrawingBuffer: true截屏.您需要的是在渲染后立即拍摄屏幕截图.只要您在渲染后但在退出当前事件之前拍摄,屏幕截图就可以正常工作.

因此,例如,这将始终有效

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

然而,如果运气好的话,这只能随机使用

someElement.addEventListener('click', function() {
   // this is not immediately after rendering. you have no
   // idea when it is relative to rendering.
   var screenshot = renderer.domElement.toDataURL();
});

大多数THREE.js示例都有渲染功能,如果您需要在用户请求时执行此操作时截取屏幕截图

someElement.addEventListener('click', function() {
   render();
   var screenshot = renderer.domElement.toDataURL();
});

或者你可以这样做

var takeScreenshot;

function render() {
   ...
   if (takeScreenshot) {
     takeScreenshot = false;
     var screenshot = renderer.domElement.toDataURL();
   }
}

someElement.addEventListener('click', function() {
   takeScreenshot = true;
});

或者任何其他方式,以确保您在渲染后立即获取屏幕截图.