JSFiddle - React, Tailwind, and code Playground

HTML

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; overflow: hidden;}
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
		<script>
			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 );
			document.body.appendChild( renderer.domElement );
      var controls = new THREE.OrbitControls( camera, renderer.domElement );

      sphere = new THREE.SphereGeometry(10, 4, 4, Math.PI/4, Math.PI/2, Math.PI/4, Math.PI/2 );
      texture = new THREE.TextureLoader().load( "https://threejs.org//examples/textures/UV_Grid_Sm.jpg");
      material = new THREE.MeshBasicMaterial( { map: texture } );
      mesh = new THREE.Mesh(sphere, material);
      scene.add(mesh);

			camera.position.z = 30;

			var animate = function () {
				requestAnimationFrame( animate );

        controls.update();

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>