web-dev-qa-db-ja.com

Three.jsキャンバスから画像を保存するにはどうすればよいですか？

Three.jsキャンバスから画像を保存するにはどうすればよいですか？

Canvas2Imageを使用しようとしていますが、Threejsで遊ぶのは好きではありません。キャンバスは、キャンバスオブジェクトをアタッチするdivを持つまで定義されないため。

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

javascriptthree.js
43
rjd

ToDataURLはキャンバスhtml要素のメソッドであるため、3Dコンテキストでも機能します。ただし、いくつかの点に注意する必要があります。

  1. 3Dコンテキストが初期化されたら、次のようにpreserveDrawingBufferフラグを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 の小道具、私は彼のコメントのリンクをたどってこの答えを見つけました。

67
Dinesh Saravanan

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を必要とする人々に役立つことを願っています:)

25
CapsE