three.js 屏幕截取变成图片 截图

问题提出

截取three.js 渲染的图，如果直接将输出的canvas变成图片是无法获取的，因为在获取之前渲染界面是清空的状态，所以需要在渲染之后清空之前将渲染的内容转换为图片，即将场景的内容渲染一遍并将渲染的内容转为图片数据。

关于WebGL的截图

WebGL渲染内容的截图空白/全黑算是一个常常被问到的问题,在爆栈上面也被问到过，这里给一个稍微比较综合一些的答案链接
为什么WebGL渲染的canvas截图是空白的？

解决方案

capture(){
          var image = new Image();
          renderer.render(scene, camera);//此处renderer为three.js里的渲染器，scene为场景 camera为相机

          let imgData = renderer.domElement.toDataURL("image/jpeg");//这里可以选择png格式jpeg格式
          image.src = imgData;
          document.body.appendChild(image);//这样就可以查看截出来的图片了
}

其实就是相当于渲染一帧，并把这一帧输出
而如果需要截某个部分的图片，只需要将相机变一下，换成自己想要范围，并渲染一帧再截屏出来。
优点常明显， 这样相当于重新渲染一帧，即便是截取某个很小的部分，截取的图片也是很清晰的。

如果加上扩展的话可以实现某个区域的放大。

另外我看到有人推荐将renderer的 preserveDrawingBuffer设置为true。这样的确可以在任意时间获得截图，但是这样是更消耗性能以及占用内存的，不推荐使用。