javascript - 如何在 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;
});

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