JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - cloth simulation</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #000;
				color: #000;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>

		<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
		<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/renderers/CSS3DRenderer.js"></script>
		<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/libs/stats.min.js"></script>

		<script>
			
			
		</script>
	</body>
</html>

JavaScript

var MapElement = function ( id, x, y, z, rx ) {
				var div = document.createElement( 'div' );
				div.id = id;
				div.style.width = '1200px';
				div.style.height = '950px';
				div.style.backgroundColor = 'red';


				var object = new THREE.CSS3DObject( div );
				object.position.set( x, y, z );
				object.rotation.x = rx;
				return object;
			};



			var container, stats;
			var camera, scene, renderer, renderer1, controls;

			var sphere;
			var object;

			init();
			animate();

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );

				// scene

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xcce0ff );
				scene.fog = new THREE.Fog( 0xcce0ff, 500, 10000 );

				// camera

				camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
				// 
				camera.position.set( -1630.5660632506256, 338.2706222303878, -692.3346730528838);

				group = new THREE.Group();

				// lights

				var light, materials;

				scene.add( new THREE.AmbientLight( 0x666666 ) );

				light = new THREE.DirectionalLight( 0xdfebff, 1 );
				light.position.set( 50, 200, 100 );
				light.position.multiplyScalar( 1.3 );

				light.castShadow = true;

				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;

				var d = 300;

				light.shadow.camera.left = - d;
				light.shadow.camera.right = d;
				light.shadow.camera.top = d;
				light.shadow.camera.bottom = - d;

				light.shadow.camera.far = 1000;

				scene.add( light );

				// sphere

				var ballGeo = new THREE.SphereBufferGeometry( 100, 32, 16 );
				var ballMaterial = new THREE.MeshLambertMaterial();

				sphere = new THREE.Mesh( ballGeo, ballMaterial );
				sphere.castShadow = true;
				sphere.receiveShadow = true;
				sphere.position.copy( new THREE.Vector3( 0, - 45, 0 ) );
				scene.add( sphere );

				// ground
				var loader = new THREE.TextureLoader();
				var groundTexture =...