如何在three.js中切换preserveDrawingBuffer？

问题描述

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

Basically, I want the setup where I could go to preserveDrawingBuffer=true, render the scene once, grab the screenshot, and go back. However, this poses two problems:

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



• 如果我做的话画布变黑了

• there is no method in renderer to dispose all the buffers,

• canvas goes black if I do

renderer = new THREE.WebGLRenderer（{canvas：renderer.domElement，preserveDrawingBuffer：true}）;

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

我该如何正确地做到这一点？

How do I do this properly?

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

I did not find the way to toggle this, so I had to clone scene and create second renderer instead to make the screenshot. See https://github.com/mrdoob/three.js/issues/189

推荐答案

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

You don't need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event.

所以例如这将始终有效

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

然而如果运气好，这只能随机使用

Whereas this will only work randomly if you're luck

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示例都有渲染功能请求你可以这样做

Most of the THREE.js examples have a render function if you need to take a screenshot when the user requests one you could do this

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

或者其他任何方式可以确保在渲染后立即截取屏幕截图。

Or any number of other ways to just make sure you take the screenshot immediately after rendering.

这篇关于如何在three.js中切换preserveDrawingBuffer？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！