Is it possible to get the image of the 3D mesh in the canvas as a picture

Questions
1

I am really curious, Threejs models are displayed in a canvas, but is it possible to grab what ever is displayed on the threejs canvas as a picture for later use by anyone ?

2

Similar discussion here

1 Like
3

I saw your post, but i dont understand the onWindowResize();

4

Here’s the onWindowResize function:

function onWindowResize() {

  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( container.clientWidth, container.clientHeight );

}

It’s used to set the camera and renderer to the new sizes whenever the window changes size. Since we need to do that after taking our screenshot, we are “cheating” by calling this function instead of writing those lines again. Really, we should rename the function to something else, but I was lazy.

Here’s the full function without onWindowResize:

function takeScreenshot( width, height ) {
    
    // set camera and renderer to desired screenshot dimension
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(  width, height );
  
    renderer.render( scene, camera, null, false );

    const dataURL = renderer.domElement.toDataURL( 'image/png' );

    const iframe = `
      <iframe
        src="${dataURL}"
        frameborder="0"
        style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;"
        allowfullscreen>
      </iframe>`

    const win = window.open();
    win.document.open();
    win.document.write( iframe );
    win.document.close();

    // reset to old dimensions 
   camera.aspect = container.clientWidth / container.clientHeight;
   camera.updateProjectionMatrix();
   renderer.setSize( container.clientWidth, container.clientHeight );
  
 }
3 Likes