Jak zapisać obraz z trójki.js canvas?

Question

Jak zapisać obraz z trójki.js canvas?

Jak zapisać obrazek z trójki.js canvas?

Próbuję użyć Canvas2Image, ale nie lubi grać z trzema. Ponieważ obszar roboczy nie jest zdefiniowany, dopóki nie ma elementu div, do którego można dołączyć obiekt canvas.

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

35

javascript three.js

Author: rjd, 2013-03-22

Source

2 answers

Przeczytałem rozmowę napisaną przez Dinesh ( https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ) i wymyślił rozwiązanie, które nie spowolni Twojej aplikacji.

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

Dzięki temu możesz zostawić zachowaną flagę false i nadal uzyskać obraz z trzech.js. Po prostu ustaw getImageData na true i wywołaj render () i możesz zaczynać.

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

Mam nadzieję, że to pomoże ludziom takim jak ja, którzy potrzebują wysokich fps :)

22

Author: CapsE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-19 18:55:46

score 58 · Accepted Answer

Ponieważ toDataURL jest metodą elementu html canvas, która będzie działać również dla kontekstu 3d. Ale musisz zająć się kilkoma rzeczami.

Upewnij się, że po zainicjowaniu kontekstu 3D ustawisz flagępreserveDrawingBuffer na true, tak:
```
var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
```
Następnie użytkownik canvas.toDataURL(), aby uzyskać obraz

W threejs musisz wykonać następujące czynności, gdy Renderer jest utworzony:

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

Należy również pamiętać, że może to mieć wpływ na wydajność. (Czytaj: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 )

Jest to tylko dla webgl renderer , W przypadku threejs canvasRenderer można po prostu zrobić renderer.domElement.toDataURL(); bezpośrednio, bez parametru inicjalizacji.

Mój eksperyment webgl: http://jsfiddle.net/TxcTr/3 / naciśnij 'p', aby wyświetlić zrzut ekranu.

Rekwizyty do } gaitat, po prostu skorzystałem z linku w jego komentarzu, aby dostać się do tej odpowiedzi.