JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var scene, camera, renderer, mesh1, mesh2, mesh3;

init();
animate();

function init(){
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	
	var geometry = new THREE.BoxGeometry(1,1,1); // identical geometry can be shared

	mesh1 = new THREE.Mesh(
		geometry,
		new THREE.MeshPhongMaterial({color:0xff0000, wireframe:false})
	);

	mesh2 = new THREE.Mesh(
		geometry,
		new THREE.MeshPhongMaterial({color:0x0000ff, wireframe:false}),
	);

	mesh3 = new THREE.Mesh(
		geometry,
		new THREE.MeshPhongMaterial({color:0x0000ff, wireframe:false}),
	);

	mesh2.position.set(1,0,0);
	mesh3.position.set(-1,0,0);

	scene.add(mesh1);
	scene.add(mesh2);
	scene.add(mesh3);

	mesh1.receiveShadow = true;

	ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
	scene.add(ambientLight);

	camera.position.set(0,2,-2);
	camera.lookAt(new THREE.Vector3(0,0,0));

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

	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.BasicShadowMap;

	document.body.appendChild(renderer.domElement);

}

function animate(){

	requestAnimationFrame(animate);

	mesh1.rotation.x += 0.02;
	mesh2.rotation.y += 0.02;
	mesh3.rotation.y += 0.02;

	renderer.render(scene, camera);

}