Question

基本上，我想要设置我可以去保存绘图缓冲区=真，渲染场景一次，抓住屏幕截图，然后返回。然而，这带来了两个问题：

渲染器中没有方法可以处理所有缓冲区，
如果我做
，画布会变黑
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

我也遇到了这个问题。我的屏幕快照在threejs webgl画布中为空白，因为未设置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？

2 个答案: