आप एक छवि को तीन.जेएस कैनवास से कैसे सहेजते हैं?

Question

आप एक छवि को तीन.जेएस कैनवास से कैसे सहेजते हैं?

मैं कैनवास 2 इमेज का उपयोग करने का प्रयास कर रहा हूं लेकिन यह थ्रीज के साथ खेलना पसंद नहीं करता है। चूंकि कैनवास परिभाषित नहीं किया जाता है जब तक कि इसमें कैनवास ऑब्जेक्ट को संलग्न करने के लिए div नहीं होता है।

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

Answer 1

toDataURL के बाद से कैनवास HTML तत्व की एक विधि है कि 3 डी संदर्भ के लिए भी काम करेगा। लेकिन आपको कुछ चीजों का ख्याल रखना होगा।

1. सुनिश्चित करें कि जब 3 डी संदर्भ आरंभ नहीं हो जाता कि आप सही पर preserveDrawingBuffer ध्वज सेट, जैसे इतना:

   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)

यह हालांकि threejs canvasRenderer के मामले में केवल WebGL रेंडरर के लिए है, तो आप बस कर सकते हैं renderer.domElement.toDataURL(); सीधे, कोई आरंभीकरण पैरामीटर की जरूरत है।

मेरा वेबल प्रयोग: http://jsfiddle.net/TxcTr/3/ प्रेस 'पी' स्क्रीनशॉट पर दबाएं।

gaitat पर प्रॉप्स, मैंने अभी इस जवाब को पाने के लिए अपनी टिप्पणी में दिए गए लिंक का पालन किया।

Answer 2

मैंने दिनेश (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-ध्वज छोड़ सकते हैं और अभी भी Three.js से छवि प्राप्त के साथ

। बस इमेजडेटा को सत्य पर सेट करें और रेंडर कॉल करें() और आप जाने के लिए अच्छे हैं।

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

आशा इस मदद करता है मेरे जैसे लोग हैं, जो की जरूरत है उच्च एफपीएस :)