实际错误是
所有的webGL以及three的容器截图都为黑色的背景，其他元素无恙
截图日志的报错为：
控制台输出.png
在这个问题解决之前尝试的办法有：
-
疑似跨域问题：
修改`html2canvas` 的配置，使用`{useCORS:true}` --无效 -
意思元素样式问题
修改dom样式为绝对值，去除百分比以及相对定位 --无效
求人之前先百度找到了一个网上教程，解决方法如下
可以看到：preserveDrawingBuffer = false
image.png
在框架中使用的话比较麻烦，同时也不能成功，于是通过看官方文档
解决办法
解决这个问题只需要在three 的renderer的配置中的preserveDrawingBuffer设置为true就好
initRender() {
this.renderer = new THREE.WebGLRenderer({
//增加下面两个属性，可以抗锯齿
antialias: true,
//将这个属性改为True可以解决截图为黑色的问题
preserveDrawingBuffer: true
});
let width = this.$refs["canvas"].clientWidth;
let height = this.$refs["canvas"].clientHeight;
this.renderer.setSize(width, height); //设置渲染区域尺寸
this.renderer.setClearColor(0xe5e5e5, 1); //设置背景颜色
this.$refs["canvas"].appendChild(this.renderer.domElement); //body元素中插入canvas对象
},
But
在博客 中看到下面内容，还需要你们自己测试一下
只是为了截图设置preserveDrawingBuffer为true，会导致性能下降。
大概就是preserveDrawingBuffer为true的时候，需要从A缓冲区复制到B缓冲。
为false的时候是，交换双缓冲，比较快。
方法就是获取截图的时候调用renderer.render()，不让canvas清空就可以不用设置preserveDrawingBuffer为true了。
