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

Question

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

我正在尝试使用Canvas2Image,但它不喜欢玩Threejs.由于画布没有定义,直到它有一个div来附加画布对象.

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

Answer 1

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

1. 确保在初始化3D上下文时将preserveDrawingBufferflag 设置为true,如下所示:

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

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

在threejs中,在实例化渲染器时,您必须执行以下操作:

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

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

这仅适用于webgl渲染器,如果是threejs canvasRenderer,则可以直接执行renderer.domElement.toDataURL();,不需要初始化参数.

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

关于gaitat的道具,我只是按照他评论中的链接来得到这个答案.

Answer 2

我阅读了Dinesh发布的对话(https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008),并提出了一个不会减慢应用程序速度的解决方案.

    function render() { 
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        if(getImageData == true){
            imgData = renderer.domElement.toDataURL();
            getImageData = false;
        }
    } 

有了这个,您可以将preserveDrawingBuffer-Flag保留为false,并仍然从THREE.js获取图像.只需将getImageData设置为true并调用render()就可以了.

getImageData = true;
render();
console.debug(imgData);

希望这能帮助像我这样需要高fps的人:)