JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var geometry, material, mesh;

init();
animate();

// programatically update camera position
setTimeout(function(){
  var bbox = new THREE.Box3().setFromObject(scene);
  var center = bbox.getCenter();
  var size = bbox.getSize();
 
  // update some controls properties
  controls.target.set(center.x, center.y, center.z);
 
  // position the camera  on the y axis
  camera.position.set(center.x, center.y - size.y, center.z);
  camera.up.set(0, 0, 1);
  
  // fit FOV
  var dist = size.y / 2;
  var fov = 2 * Math.atan( size.z / ( 2 * dist ) ) * ( 180 / Math.PI );
  
  camera.fov = fov;
  
  camera.updateProjectionMatrix();
}, 2000);

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

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

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    controls = new THREE.TrackballControls(camera, document.body);
    controls.rotateSpeed = 20;
    controls.target.set(0, 0, 0);

}

function animate() {

    requestAnimationFrame(animate);

    
    controls.update();

    renderer.render(scene, camera);

}