threejs canvas导出图片失败原因与解决办法

关于使用canvas导出图片代码，可参考我上篇博客 canvas 导出为图片兼容ie10+，谷歌，火狐等浏览器，代码详解: https://www.jianshu.com/p/9b3ad5bc131c

上面的代码没有问题，对于其他2d效果是可以导出的。但是直接这样导出threejs或者webgl的效果会有问题，导出的将不是我们看到的效果。这个问题的出现是因为基于性能和兼容性的考量，默认情况下浏览器会在绘制完成后清除WebGL canvas的缓存。

下面先复现这个问题：

现有使用threejs写的如下效果：

animate2.gif

直接导出：

image.png
可以看到导出的图片什么都没有

解决办法一：在你捕获截图前调用一次渲染代码render：

image.png

导出效果：

image.png

解决办法二：在创建 WebGLRenderer的时候传入 preserveDrawingBuffer: true。

image.png

导出效果：

image.png

以上两种方式任取一种即可。

来都来了，点个赞再走吧！

本文地址：https://www.jianshu.com/p/30f11ba31bda，转载请注明出处，谢谢。