关于使用three.js将3D模型转换成图片方法

在使用three.js加载3D模型之后,项目中遇到一个问题:需要将3D模型旋转之后的位姿转换成图片并保存下来,尝试了两种方法:

1.使用canvas直接转换成图片

问题:由于canvas中加载的是3D模型,导致转换出来的图片一片漆黑,方法失败

2.使用three.js直接进行图片的转换

经过尝试之后,成功将模型转换成图片(base64编码图片)

方法如下:

    this.renderer.render(this.scene, this.camera);                              //获取场景
        let imgData = this.renderer.domElement.toDataURL('image/jpg');              //进行转换


转换之后,imgData为base64编码的图片,可以直接进行显示

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,148评论 1 32
  • 线条样式 绘制直线,第五章知识简单回顾 lineWidth 设置或返回当前的线条宽度,单位为像素 lineCap ...
    Zd_silent阅读 500评论 0 0
  • 有时候会遇到后端需要前端获取的图片文件转换成base64,在传给后台 小程序有专门的选择图片接口, wx.choo...
    赵伟敏_19阅读 8,749评论 0 0
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...
    fastwe阅读 975评论 0 1
  • 一年多来,一直都是自己做早餐,然后中午自己带便当,似乎都忘记了外卖的味道。我原本以为,已经达到了完全的自律,也可以...
    陈晓依阅读 293评论 3 2