Take screenshot of three.js

Take screenshot of three.js

by Thanos Saringelos

HTML

<script src="https://rawgit.com/mrdoob/three.js/r73/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<button id="shot">Screenshot</button>
<div style='position:absolute'>
dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds 
dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds 
dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds 
dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds dsds 
</div>

CSS

body {
    padding: 0;
    margin: 0;
}
canvas {
  position:absolute;
  top:0px;
  left:0px;
  display: block;
}
#shot {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 5px;
}

JavaScript

var texture;
var imageElement = document.createElement('img');
imageElement.onload = function(e) {
  texture = new THREE.Texture(this);
  texture.needsUpdate = true;
  init();
  animate();
};
//imageElement.src = "http://blog.2pha.com/sites/default/files/me2.png";
// Used dataurl variable because of CORS. If on production site and image served from same server, just use the image.src as abov 

var camera, scene, renderer, mesh, material;

function init() {
  // Renderer.
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
    //preserveDrawingBuffer: true
  });
  //renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x000000, 0.8); // the default
  // Add renderer to page
  document.body.appendChild(renderer.domElement);

  // add Screenshot listener
  document.getElementById("shot").addEventListener('click', takeScreenshot);

  // Create camera.
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;

  // Create scene.
  scene = new THREE.Scene();
	var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
  // Create material
  material = new THREE.MeshPhongMaterial({
    color: '#000000'
  });

  // Create cube and add to scene.
  var geometry = new THREE.BoxGeometry(200, 200, 200);
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  // Create ambient light and add to scene.
  var light = new THREE.AmbientLight(0x404040); // soft white light
  scene.add(light);

  // Create directional light and add to scene.
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  // Add listener for window resize.
  window.addEventListener('resize', onWindowResize, false);

  // Add stats to page.
  stats = new Stats();
  document.body.appendChild(stats.dom);

  const...