JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>Rotation</title>
		<style>
			body { margin: 0; position: fixed; }
			canvas { width: 100%; height: 100%; display: block; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
			
			var renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.physicallyCorrectLights = true;
      document.body.appendChild( renderer.domElement ); 
      
      var scene = new THREE.Scene();
      scene.background = new THREE.Color( 0xacacac )
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );
      
      camera.position.set( 55, 45, 16 );
      controls.target.set( 0, 0, 0 );
      
			var geometry = new THREE.BoxBufferGeometry( 12, 12, 12 );
			var material = new THREE.MeshStandardMaterial( { color: 0x32acd7 } );
			var cube = new THREE.Mesh( geometry, material );
      cube.position.set( 0, 12, 30 ); // offset from center
			
      var pivot = new THREE.Object3D();
      pivot.add( cube );
      scene.add( pivot );
      
      material = new THREE.MeshPhongMaterial( { color: 0x6c6c6c, side: THREE.FrontSide } );
      var floor = new THREE.Mesh( geometry, material );
      floor.scale.x = 20;
      floor.scale.y = 20;
      floor.rotation.x = -Math.PI / 2;
      scene.add( floor );
      
      geometry = new THREE.CylinderBufferGeometry( 0.2, 0.2, 60 );
      material = new THREE.MeshBasicMaterial( { color: 0xff2121 } );
      var cylinder = new THREE.Mesh( geometry, material );
      cylinder.position.set( 0, 15, 0 );
      scene.add( cylinder );
      
      var ambient = new THREE.AmbientLight( 0xffffff, 1.8 );
      scene.add( ambient );
      
      var spotLight = new THREE.SpotLight( 0xffffff, 90.4);
     ...