JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/TransformControls.js"></script>
<input type="checkbox" id="change-canvas"/ >
<label for="change-canvas">Click to render another canvas 👀</label>

CSS

body {
	  margin: 0;
}

JavaScript

var renderers = {};

initInput(document.querySelector('#change-canvas'));
initRenderer('a');
initRenderer('b')
update();

function initInput(inputElement) {
	/*
  	Make the input switch between canvases
  */
	inputElement.addEventListener('change', function () {
	  var value = inputElement.checked;

  	renderers.a.renderer.domElement.style.display = value ? 'none' : '';
	  renderers.b.renderer.domElement.style.display = value ? '' : 'none';
  });
}

function initRenderer(id) {
	/*
  	Initialize canvas / renderer / scene / everything needed
  */
  var renderer, scene, camera, geometry, material, mesh;

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
  camera.position.x = 5;
  camera.position.y = 5;
  camera.position.z = 5;

  scene = new THREE.Scene();

  geometry = [
  	new THREE.BoxBufferGeometry( 1, 1 ),
    new THREE.ConeBufferGeometry( 0.2, 1 ),
    new THREE.IcosahedronBufferGeometry(1, 2)
  ][Object.keys(renderers).length % 3];
  geometry.rotateX( Math.PI * 0.5 );
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );

  camera.lookAt(mesh.position.clone());

  document.body.appendChild( renderer.domElement );
  
  if (Object.keys(renderers).length > 0) {
  	renderer.domElement.style.display = 'none';
  }

  renderers[id] = { renderer, camera, scene, mesh };
}

function animate(mesh) {
	/*
    Animate scene
  */
	mesh.rotateY(THREE.MathUtils.degToRad(1));
}

function update() {
	/*
  	Update loop
  */
  requestAnimationFrame( update );

  Object.keys(renderers).forEach(id => {
  	var { renderer, scene, camera, mesh } = renderers[id];

		/*
  		Update all scenes
  	*/
  	animate(mesh);

    /*
			Render only the ones which canvases are visible
    */
  	if (renderer.domElement.style.display !== 'none') {
	    renderer.render( scene,...