如何從Three.js畫布保存圖像？

我試圖使用Canvas2Image，但它不喜歡玩Threejs。由於畫布沒有被定義，直到它有一個將畫布對象附加到的div。

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

2013-03-21 rjd

我不知道你能。 2D畫布支持這一點，但我相信WebGL畫布不會。 – 2013-03-21 21:31:34

看看https://github.com/jeromeetienne/threejsboilerplate/blob/master/vendor/threex/THREEx.screenshot.js – gaitat 2013-03-21 21:49:41

由於toDataURL是帆布的HTML元素的方法，將三維環境中工作過。但你必須照顧好幾件事情。

確保當3D上下文初始化設置preserveDrawingBuffer標誌設置爲true，像這樣：
```
var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); 
```
然後用戶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，我只是按照他的評論中的鏈接來得到這個答案。

來源

2013-03-22 05:51:55

真棒解決方案。謝謝！ – rjd 2013-05-03 18:40:48

Dinesh，你知道這是否也可以在nodejs中工作嗎？ – Raha 2014-03-17 02:07:42

我閱讀了由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 :)

來源

2014-08-19 18:55:46 CapsE

基本上，事實證明，與threejs你需要2個電話一個接一個： renderer.render（scene，camera）; renderer.domElement.toDataURL（）; 在許多情況下，最簡單的方法可能只是將它們放在正常渲染循環之外的某個獨立函數中。 – dadasign 2015-04-29 09:42:52

如何從Three.js畫布保存圖像？

回答

相關問題