web-dev-qa-db-fra.com

Comment enregistrer une image d'une toile Three.js?

Comment enregistrer une image d'une toile Three.js?

J'essaie d'utiliser Canvas2Image mais il n'aime pas jouer avec Threejs. Puisque le canevas n'est pas défini tant qu'il n'a pas de div auquel attacher l'objet canevas.

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

javascriptthree.js
43
rjd

Étant donné que le toDataURL est une méthode d'élément HTML canvas, cela fonctionnera également pour le contexte 3D. Mais vous devez vous occuper de deux ou trois choses.

  1. Assurez-vous que lorsque le contexte 3D est initialisé, définissez le drapeau preserveDrawingBuffer sur true, comme ceci:

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

  2. Ensuite, l'utilisateur canvas.toDataURL() pour obtenir l'image

Dans threejs, vous devrez effectuer les opérations suivantes lorsque le moteur de rendu est instancié:

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

Gardez également à l'esprit que cela peut avoir des conséquences sur les performances. (Lire: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 )

C'est uniquement pour le rendu webgl , dans le cas de threejs canvasRenderer, vous pouvez simplement faire renderer.domElement.toDataURL(); directement, aucun paramètre d'initialisation nécessaire.

Mon expérience webgl: http://jsfiddle.net/TxcTr/3/ appuyez sur ' p ' pour faire une capture d'écran.

Props à gaitat , je viens de suivre le lien dans son commentaire pour arriver à cette réponse.

67
Dinesh Saravanan

J'ai lu la conversation publiée par Dinesh ( https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ) et j'ai trouvé une solution qui ne ralentira pas votre application.

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

Avec cela, vous pouvez laisser le préserverDrawingBuffer-Flag à faux et toujours obtenir l'image de THREE.js. Définissez simplement getImageData sur true et appelez render () et vous êtes prêt à partir.

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

J'espère que cela aide les gens comme moi qui ont besoin des fps élevés :)

25
CapsE