How do you save an image from a Three.js canvas?

by

Since the toDataURL is a method of canvas html element, that will work for 3d context too. But you have to take care of couple of things.

  1. Make sure when the 3D context is initialized you set preserveDrawingBuffer flag to true, like so:

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

  2. Then user canvas.toDataURL() to get the image

In threejs you would have to do the following when the renderer is instantiated:

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

Also, keep in mind this can have performance implications. (Read: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

This is only for webgl renderer, in case of threejs canvasRenderer though, you can simply do renderer.domElement.toDataURL(); directly, no initialization parameter needed.

My webgl experiment: http://jsfiddle.net/TxcTr/3/ press ‘p‘ to screenshot.

Props to gaitat, I just followed the link in his comment to get to this answer.

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  3. How to Fit Camera to Object
  4. THREE.js Ray Intersect fails by adding div
  5. Three.js – Orthographic camera
  6. Three.js – Width of view
  7. THREE.js : 2xMeshes using same vector as position
  8. How to rotate a 3D object on axis three.js?
  9. How to find the unicode of the subscript alphabet?
  10. Converting World coordinates to Screen coordinates in Three.js using Projection
  11. Transparent background with three.js
  12. Multiple transparent textures on the same mesh face in Three.js
  13. How to get the absolute position of a vertex in three.js?
  14. Three.js / WebGL – transparent planes hiding other planes behind them
  15. Rendering a transparent shell
  16. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  17. Three JS Pivot point
  18. three.js transparent object occlusion
  19. How to change face color in Three.js
  20. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  21. How to get the global/world position of a child object?
  22. Orthographic camera and selecting objects with raycast
  23. catch the click event on a specific mesh in the renderer
  24. Three.JS wireframe material – all polygons vs. just edges
  25. Antialiasing not working in Three.js
  26. Three.js add an object to a group but keep global position/rotation/scale as it was
  27. Threejs: assign different colors to each vertex in a geometry
  28. Three.js multiple materials on object loaded via OBJMTLLoader
  29. Why do shaders have to be in html file for webgl program?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment