欢迎转载，转载需带着文章出处链接~~，希望我的经验能帮到你，有问题可以点我头像加我微信 本文章仅对遇到的问题提供一个解决思路，对于迫切想要实现功能效果的人来说，希望能稍微沉下心观看，或者直接观看思路部分，或者直接观看完整代码 本文章的代码并不能直接拿来使用，完整代码只是本篇文章解决的问题需要用到的代码，如果直接使用可能会有报错，只要修改一下代码既可使用~~~

potree实现截图过程

potree截取当前图片，保存成base64格式

-参考-

CSDN threejs截屏 CSDN THREE.JS获取截图个人博客 js截屏以及three.js场景截屏

-主要版本-

potreejs 1.6

-思路-

1、查看webgl和three.js截图的方法 2、查看potree.js的源码，使用potree实现

-过程-

1、查看webgl和three.js截图的方法

1.1、截图（会截取不到东西）

在网上搜索后，发现大部分方法用的是html2canvas.js这中方法，这种方法需要额外下载一个插件，因此推荐另一种方法：

① html2canvas.js截图

// 方法一
html2canvas(document.getElementsByTagName("canvas"),{
  allowTaint: true,
  tainTest: false,
  onrendered: function(canvas){
    // base64直接放到img标签的src中就可以使用
    var dataUrlBase64 = canvas.toDataURL();
  }
});

② renderer直接截图

// 方法二
var dataUrlBase64 = renderer.domElement.toDataURL();

1.2、正常截取

这里会发现截图的base64图片有问题，jpg应该是黑色的（这里没有截取过），png是透明的，场景scene后期渲染的比如灯光，加载的模型都没有截图截下来（别人说的），这里有两种方法：

① 在渲染器开启preserveDrawingBuffer :true，即缓冲区保护-是否保存在缓冲区手动清除或覆盖，这个默认是false。

// 方法一
renderer = new WebGLRenderer({
 preserveDrawingBuffer :true 
});

② 在截图之前先渲染一下场景和相机，就不会实时刷新屏幕

// 方法二
rederer.render(scene, camera)

2、查看potree.js的源码，使用potree实现

2.1、通过第一种截图方案定位potree渲染位置

最后定位到这个代码，查找代码所在的类名，然后找到代码渲染的位置

potree使用threejs代码位置

potree对应的类名

potree渲染的代码

2.2、实现不黑屏

①直接修改potreejs源码

this.renderer = new THREE.WebGLRenderer({alpha: true, premultipliedAlpha: false, preserveDrawingBuffer :true });

修改代码如下：修改potree源码，添加初始化属性

②通过render

改造代码如下：

viewer.renderer.render(viewer.overlay,viewer.overlayCamera);

发现并没有生效，可能potree使用的其他东西，在这里直接调用方法就可以，截图成功：

viewer.render();

-完整代码-

// 这句是potree案例中就有的一句，可以不加
window.viewer = new Potree.Viewer(document.getElementById("potree_render_area"));
// 截图代码
viewer.render();
var dataUrlBase64 =viewer.renderer.domElement.toDataURL();

potree截图功能开发