three.js canvas内场景生成图片 canvas生成图片
第一种最简单的方法：
1 threeBox.render();//重点 解决拿到图片后为黑色 2 3 let src=threeBox.renderer.domElement.toDataURL();//将选中的canvas转换为base64编码 4 let a = document.createElement("a"); // 生成一个a元素 5 let event = new MouseEvent("click"); // 创建一个单击事件 6 a.download = "photo"; // 设置图片名称 7 a.href = src; // 将生成的URL设置为a.href属性 8 a.dispatchEvent(event); // 触发a的单击事件 将图片下载下来
threeBox.render();
对应 three.js：
renderer = new WebGLRenderer({ antialias: true, alpha: true})；
renderer.render();注：在截图之前先渲染一下场景和相机，就不会实时刷新屏幕，导致我们截屏下来的是空白了
threeBox.renderer.domElement.toDataURL();
对应canvas方法：canvas.toDataURL(); //得到base64编码格式图片地址
注：如果是普通canvas，可直接通过canvas.toDataURL()获取截图
第二种方法：
1 renderer = new WebGLRenderer({ 2 antialias: true, 3 alpha: true, 4 preserveDrawingBuffer :true 5 }) 6 7 renderer.domElement.toDataURL();
preserveDrawingBuffer ：
在渲染器开启preserveDrawingBuffer :true，即缓冲区保护-是否保存在缓冲区手动清除或覆盖，这个默认是false。
开启之后，缓冲区的图像就不会被更新清除，就可以截取下来想要的图案。
但问题也很明显，那就是在有动画或者后期渲染内容增加的时候，你的画面会变得很乱，内容被不断的叠加，
因此我是建议大家使用第一种方法，这个方法说出来，只是为了让大家更加了解一下。
得到的base64：
下载下来的截图：
