JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<a href="#" onclick="reset()">Reset</a> ●
<a href="#" onclick="fit()">Fit</a> ●
<a href="#" onclick="rotate(0.0)">flat</a> ●
<a href="#" onclick="rotate(1.0)">rotate</a>

CSS

body {
  font-family: monospace;
  margin: 0;
}

JavaScript

let camera, scene, renderer;
let mesh

init();

function reset() {
  mesh.position.z = -30
}

function fit() {
  let fudge = 1.0
  let aspect = window.innerHeight / window.innerWidth;
  let width = mesh.geometry.parameters.height;
  width *= fudge;
  width *= aspect;
  let dist = width / (2 * Math.tan((camera.fov * (Math.PI / 180)) / 2));
  mesh.position.set(0.0, 0.0, -dist - mesh.geometry.parameters.depth / 2);
}

function rotate(angle) {
  mesh.rotation.y = angle
}

function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x444444);

  camera = new THREE.PerspectiveCamera(45.0, window.innerWidth / window.innerHeight, 0.01, 100.0);
  camera.position.set(0.0, 0.0, 0.0);

  let material = new THREE.MeshNormalMaterial();
  let geometry = new THREE.BoxGeometry(10.0, 20.0, 2.0);
  mesh = new THREE.Mesh(geometry, material);
  reset();
  scene.add(mesh);

  window.addEventListener(
    'resize',
    function() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    },
    false
  );

  renderer.setAnimationLoop(function() {
    renderer.render(scene, camera);
  });


}