Exporting single object to image

Questions
, ,
1

Hello expert,

Is it possible to export a selected object or a group of objects to image, like a screenshoot ? I don’t want to export all objects on the scene. From this post #989 I saw a solution but it seems to export all scene.

var renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
window.open( renderer.domElement.toDataURL( 'image/png' ), 'screenshot' );

Thanks for your answer.

2

Yes this is possible. It’s easiest when you render the selected object with a separate scene and renderer like demonstrated in the following fiddle: https://jsfiddle.net/4agd5zfh/2/

The interesting code section is:

const exportLink = document.getElementById( 'exportLink' );
exportLink.addEventListener( 'click', () => {

	rendererExport.render( scene1, camera ); 
	const dataURL = rendererExport.domElement.toDataURL( 'image/png' );

	exportLink.href = dataURL;
	exportLink.download = 'export.png';

} );
1 Like
3

Nice ! Thank you for this answer.