Threejs - capture screen

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<p class="top-menu">
Press spacebar to reset the canvas size to window
</p>
<!-- you can still offscreen the canvas html and still guarantee that it can still display what it should display -->
<!-- the container size doesn't really constrain the canvas render size. canvs will still bleed out of ocntainer if need to -->
<div id="container">

</div>

<div class="bottom-menu">
  <button onClick="displaySnapShot()">Capture</button>
  <button onClick="resize(500, 156)">Force Resize</button>
  <button onClick="toggleCanvasHide()">Canvas Toggle Visbility</button>
  <button onClick="toggleCamera()">Camera Toggle</button>
  <button onClick="fitToScreen()">FTS</button>
</div>


<!-- for image captures -->
<div id="img-container">

</div>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}
#container {
  border: thick solid red;
  max-width: 200px;
}
.top-menu {
  position: absolute;
  z-index: 99;
  top: 1rem;
  left: 1rem;
  background-color: #ffffff;
}
.bottom-menu {
  padding: 1rem;
  position: absolute;
  z-index: 99;
  bottom: 1rem;
  left: 1rem;
  background-color: #ffffff;
}

JavaScript

var scene, renderer, camera, perspectiveCam, orthoCam;
var controls;
var forcedWidth, forcedHeight;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    // required for capturing snapshot
    preserveDrawingBuffer: true
  });
  
  var container = document.getElementById('container');
  if(!container) {
  	console.error('no container');
  } else {
  	console.error('all good to go');
  }
  const width = window.innerWidth;
  const height = window.innerHeight;
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);

  scene = new THREE.Scene();
   scene.rotation.x = -Math.PI / 2;
  
  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);
  //gridXZ.rotation.x = Math.PI / 2;
 

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

	var ortho = false;
	if(ortho) {
  	camera = orthoCam = createOrthoCamera(width, height);
  } else {
  	camera = perspectiveCam = createPerspectiveCamera(width, height);
  }
  createOrbitControl(camera, renderer.domElement);
 
  //controls = new THREE.OrbitControls(camera, renderer.domElement);
  //camera.updateProjectionMatrix();
  
  /* var points = [new THREE.Vector3(0, 30, 0)];
  
  for(var point of points) {
        createSphere(point, 0xffff00);
  } */
  
  document.addEventListener('keydown', (event) => {
  	const key = event.key;
    const code = event.code;
    if(code === 'Space') {
    	resize();
      console.log('resizing');
    }
    console.log('event: ', key, code);
  });
}

/**
OrbitControls is designed to create listeners on the container at creation time only.
Therefore, we cannot assign the container after creation of orbitalControl.
It's better to create and dispose old orbit controls should you create new camera
There might be a way to maintain the old orbit when switch camera, but probably
best to dump and recreate due to the fact that the controls have listeners bindded
and could cause conflicts where old...