如何从 Three.js 画布中保存图像? [英] How do you save an image from a Three.js canvas?

问题描述

如何从 Three.js 画布中保存图像?

How do you save an image from a Three.js canvas?

我正在尝试使用 Canvas2Image，但它不喜欢使用 Threejs.因为画布直到它有一个 div 才能定义画布对象.

I'm attempting to use Canvas2Image but it doesn't like to play with Threejs. Since the canvas isn't defined until it has a div to attach the canvas object to.

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

推荐答案

由于 toDataURL 是 canvas html 元素的一种方法，因此也适用于 3d 上下文.但是你必须照顾好几件事.

Since the toDataURL is a method of canvas html element, that will work for 3d context too. But you have to take care of couple of things.

1. 确保在初始化 3D 上下文时将 preserveDrawingBuffer 标志设置为 true，如下所示:

1. Make sure when the 3D context is initialized you set preserveDrawingBuffer flag to true, like so:

var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});

然后用户canvas.toDataURL()获取图片

在threejs中，当渲染器被实例化时，你必须执行以下操作:

In threejs you would have to do the following when the renderer is instantiated:

new THREE.WebGLRenderer({
    preserveDrawingBuffer: true 
});

另外，请记住这可能会对性能产生影响.(阅读:https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

Also, keep in mind this can have performance implications. (Read: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

这只适用于webgl渲染器，在threejs canvasRenderer的情况下，你可以直接做renderer.domElement.toDataURL();，不需要初始化参数.

This is only for webgl renderer, in case of threejs canvasRenderer though, you can simply do renderer.domElement.toDataURL(); directly, no initialization parameter needed.

我的 webgl 实验:http://jsfiddle.net/TxcTr/3/ 按 'p' 到屏幕截图.

My webgl experiment: http://jsfiddle.net/TxcTr/3/ press 'p' to screenshot.

对 gaitat 的支持，我只是按照他评论中的链接找到了这个答案.

Props to gaitat, I just followed the link in his comment to get to this answer.

这篇关于如何从 Three.js 画布中保存图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！