How to toggle preserveDrawingBuffer in three.js?

by

You don’t need preserveDrawingBuffer: true to take a screenshot. What you need is to take the screenshot immediately after rendering. A screenshot is guaranteed to work as long as you take it after rendering but before exiting the current event.

So for example this will always work

renderer.render( scene, camera );
var screenshot = renderer.domElement.toDataURL();

Whereas this will only work randomly if you’re luck

someElement.addEventListener('click', function() {
   // this is not immediately after rendering. you have no
   // idea when it is relative to rendering.
   var screenshot = renderer.domElement.toDataURL();
});

Most of the THREE.js examples have a render function if you need to take a screenshot when the user requests one you could do this

someElement.addEventListener('click', function() {
   render();
   var screenshot = renderer.domElement.toDataURL();
});

Or you could do this

var takeScreenshot;

function render() {
   ...
   if (takeScreenshot) {
     takeScreenshot = false;
     var screenshot = renderer.domElement.toDataURL();
   }
}

someElement.addEventListener('click', function() {
   takeScreenshot = true;
});

Or any number of other ways to just make sure you take the screenshot immediately after rendering.

More Related Contents:

  1. How to get camera position with mouse move event and transform into screen coordinates in three.js? [closed]
  2. “Cross origin requests are only supported for HTTP.” error when loading a local file
  3. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  4. How to Fit Camera to Object
  5. THREE.js Ray Intersect fails by adding div
  6. Three.js – Width of view
  7. THREE.js : 2xMeshes using same vector as position
  8. How to find the unicode of the subscript alphabet?
  9. Converting World coordinates to Screen coordinates in Three.js using Projection
  10. Transparent background with three.js
  11. Multiple transparent textures on the same mesh face in Three.js
  12. How to get the absolute position of a vertex in three.js?
  13. Three.js / WebGL – transparent planes hiding other planes behind them
  14. Is it possible to enable unbounded number of renderers in THREE.js?
  15. Rendering a transparent shell
  16. How do you save an image from a Three.js canvas?
  17. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  18. Three JS Pivot point
  19. three.js transparent object occlusion
  20. How to change face color in Three.js
  21. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  22. How to get the global/world position of a child object?
  23. Orthographic camera and selecting objects with raycast
  24. catch the click event on a specific mesh in the renderer
  25. Three.JS wireframe material – all polygons vs. just edges
  26. Determine if a mesh is visible on the viewport according to current camera
  27. Three.js add an object to a group but keep global position/rotation/scale as it was
  28. Threejs: assign different colors to each vertex in a geometry
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Switch threejs controls ( from TrackBall to FlyControls and vice versa)

Leave a Comment