Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

three.js canvas内场景生成图片 canvas生成图片

前端菜鸡儿 2021-01-13 16:29:27 阅读数:20 评论数:0 点赞数:0 收藏数:0

第一种最简单的方法:


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:

 


 

下载下来的截图:

 

 

 
版权声明
本文为[蔡徐坤学前端]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/yushihao/p/14272697.html