实际错误是
所有的webGL以及three的容器截图都为黑色的背景,其他元素无恙
控制台输出.png截图日志的报错为:
在这个问题解决之前尝试的办法有:
-
疑似跨域问题:
修改`html2canvas` 的配置,使用`{useCORS:true}` --无效
-
意思元素样式问题
修改dom样式为绝对值,去除百分比以及相对定位 --无效
求人之前先百度找到了一个网上教程,解决方法如下
可以看到:preserveDrawingBuffer = false
在框架中使用的话比较麻烦,同时也不能成功,于是通过看官方文档
解决办法
解决这个问题只需要在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了。
网友评论