threejs canvas导出图片失败缘故起因与办理办法

程序员 · 2024-9-25 16:53:23

关于利用canvas导出图片代码，可参考我上篇博客 canvas 导出为图片兼容ie10+，谷歌，火狐等欣赏器，代码详解: https://www.jianshu.com/p/9b3ad5bc131c
上面的代码没有标题，对于其他2d结果是可以导出的。但是直接如许导出threejs大概webgl的结果会有标题，导出的将不是我们看到的结果。这个标题的出现是由于基于性能和兼容性的考量，默认环境下欣赏器会在绘制完成后扫除WebGL canvas的缓存。
下面先复现这个标题：

现有利用threejs写的如下结果：

直接导出：

可以看到导出的图片什么都没有办理办法一：在你捕获截图前调用一次渲染代码render：

导出结果：

办理办法二：在创建 WebGLRenderer的时间传入 preserveDrawingBuffer: true。

导出结果：

以上两种方式任取一种即可。
来都来了，点个赞再走吧！
本文地点：https://www.jianshu.com/p/30f11ba31bda，转载请注明出处，谢谢。

threejs canvas导出图片失败缘故起因与办理办法

所属分类: 问答交流

新帖推荐: 30日

推荐作品