JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/mrdoob/three.js/cbb711950dab74bd8be6c8cf295296aa31f07e6c/build/three.min.js"></script>

CSS

canvas { width: 100%; height: 100% }

JavaScript

// -------------------------------------------------------------------
// Boilerplate
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({ });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );

var geometry = new THREE.BoxGeometry(10,20,20);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var obj = new THREE.Mesh(geometry, material);
obj.rotation.x += 0.5;
obj.rotation.y += 0.5;
scene.add(obj);
// -------------------------------------------------------------------


// fit camera to object
var bBox = new THREE.Box3().setFromObject(scene);
var height = bBox.size().y;
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;

// fudge factor so the object doesn't take up the whole view
camera.position.set(pos.x, pos.y, dist * 1.5); 
camera.lookAt(pos);


// -------------------------------------------------------------------
var render = function () {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};
render()
// -------------------------------------------------------------------