美文网首页
threeJS 使用 html2canvas截图为黑色的问题

threeJS 使用 html2canvas截图为黑色的问题

作者: 一支桨 | 来源:发表于2022-03-16 15:46 被阅读0次

    实际错误是

    所有的webGL以及three的容器截图都为黑色的背景,其他元素无恙

    截图日志的报错为:

    控制台输出.png

    在这个问题解决之前尝试的办法有:

    1. 疑似跨域问题:

      修改`html2canvas` 的配置,使用`{useCORS:true}`     --无效
      
    2. 意思元素样式问题

       修改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了。

    相关文章

      网友评论

          本文标题:threeJS 使用 html2canvas截图为黑色的问题

          本文链接:https://www.haomeiwen.com/subject/plypdrtx.html