如何在 three.js 中切换 preserveDrawingBuffer？

Question

基本上，我想要可以转到 preserveDrawingBuffer=true 的设置，渲染场景一次，抓取屏幕截图，然后返回。然而，这带来了两个问题：

渲染器中没有处理所有缓冲区的方法，
canvas 如果我这样做就变黑

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;
});

或任何其他方法来确保您在渲染后立即截取屏幕截图。

Answer 2

我也遇到过这个problem.my screenshot is blank in threejs webgl canvas, because not set renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});, 这是我切换 preserveDrawingBuffer 的方法。

let canvas = this.renderer.domElement;
    canvas.getContext('webgl' , {preserveDrawingBuffer: true});
this.render();
var data = {
  image: canvas.toDataURL(),
};
canvas.getContext('webgl' , {preserveDrawingBuffer: false});

如何在 three.js 中切换 preserveDrawingBuffer？

How to toggle preserveDrawingBuffer in three.js?

javascript

three.js