假设有一个需求，需要获取 Three 场景的一张快照，然后再将其显示在屏幕上。

1. 获取快照

对于这个需求，一种方法是在创建 WebGLRenderer 时设置一个 preserveDrawingBuffer 参数为 true，然后再调用场景中的 canvas 的 toDataURL 方法来获取某一帧的 base64 格式的图像数据：

renderer = new WebGLRenderer({preserveDrawingBuffer :true
});const image = new Image();
image.src = renderer.domElement.toDataURL();

而 preserveDrawingBuffer 参数的含义是：是否保留缓直到手动清除或被覆盖。若设为 true，在任意时刻，前一帧的缓存图像不会被清除，因此可以获取到任意一刻的截图，若未设置的话，获取的截图可能就会是一张空白的图片。不过，这有一个明显的副作用，那就是会更加的消耗性能和占用内存。因此不推荐这种方式。

另一种方式就是在获取截图之前先再渲染一下场景，这样就不会因为缓存清空而导致截屏空白了：

renderer.clear();
renderer.render(scene, camera);
const image = new Image();
image.src = canvas.toDataURL("image/png");

2.在屏幕上显示出来

既然我们已经能够获取到正确的快照了，那么要将其显示在屏幕上，我们可以再创建一个新的 canvas，然后将获取的快照使用这个新的 canvas 加载出来就行了，代码如下：

const canvas = renderer.domElement;renderer.clear();
renderer.render(scene, camera);const image = new Image();
const base64 = canvas.toDataURL("image/png");
image.src = base64;const mycanvas = document.getElementById('myImageEditCanvas');
mycanvas.width = canvas.width;
mycanvas.height = canvas.height;
const ctx = mycanvas.getContext('2d');image.onload = () => {ctx.drawImage(image, 0, 0);
};

使用 canvas 载入图像使用了 drawImage 方法，它的第二第三个参数的意识是从源图像的哪个位置开始载入，要载入整张图像，填入 0 即可。

drawImage 详细一些的介绍可看：drawImage

ThreeJS获取快照相关推荐

reactjs组件的生命周期函数：getSnapshotBeforeUpdate更新之前获取快照
reactjs组件的生命周期函数:getSnapshotBeforeUpdate更新之前获取快照
wpf 对控件进行截图，获取快照
有时候我们项目,在执行某个操作后,会生成一些数据结果,如报表一类的东西,我们需要对结果进行保存,甚至是生成word文档. 那么首先获取到控件快照就最基本的条件. 生成快照的静态方法类 using Sy ...
threejs获取模型坐标_Threejs倒影实现解析
倒影是在自然界中非常常见的一种现象,例如水面倒影.镜子.我们都知道,眼睛之所以能够看到某个物体,是因为物体本身能够发光或者物体能够反射其它的物体所发的光,这些光进入到我们的眼里就形成了该物体影像.倒影 ...
THREEJS - 获取场景中模型数据
在一些场景中,我们需要展示场景内的模型数据,如模型的数量.面片数以及顶点数等,下面给大家提供的就是对应的统计函数,在场景加载结束后,传入对应的scene即可: /*** 获取场景内模型数量.顶点数及面 ...
threejs 绘制球体_javascript – 使用ThreeJS获取球体纹理上的点击位置
目前:我有一个球体,其上有一个围绕y轴旋转的纹理.我也有在3D空间中点击的位置,以及球体上的旋转位置(我认为). 目标:获取纹理上的位置,例如:我想获得我点击的图像的正方形. (参见下面的示例球体和图 ...
threejs获取物体的坐标的最大值和最小
let box = new THREE.Box(): box.setObjectFrom( '物体')途中标红色的方法都是等效的然后查看 box.max 和box.min属性: 2D的类似
cgo+gSoap+onvif学习总结：5、获取profileToken、rtsp流地址、快照地址及cgo程序signal SIGSEGV: segmentation violation解决方法
cgo+gSoap+onvif学习总结:5.获取profileToken.rtsp流地址.快照地址及cgo偶发signal SIGSEGV: segmentation violation分割违例解决方 ...
Postgresql源码（16）数据库快照数据结构与获取
相关: <Postgresql源码(18)PGPROC相关结构> <Postgresql源码(65)新快照体系Globalvis工作原理分析> <Postgresql快照 ...
虚拟化部署之灵活应用Hyper-V快照
在<虚拟化部署之Hyper-V虚拟机创建>和<虚拟化部署之Hyper-V快速迁移>两篇文章中我清楚了如何创建和迁移虚拟机,虚拟机成功创建以后我们便可以像正常系统一样安装必要的软 ...

ThreeJS获取快照

1. 获取快照

2.在屏幕上显示出来

ThreeJS获取快照相关推荐

最新文章

热门文章