JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body { margin: 0; }
			canvas { display: block; }

JavaScript

var camera, scene, renderer, geometry, material, mesh,controls, axesHelper;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 30;
    scene.add(camera);

		renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    var size = 10;
		var divisions = 10;

		geometry = new THREE.SphereGeometry( 5, 32, 32 );
   geometry2 = new THREE.SphereGeometry( 5, 32, 164 );

   
    material = new THREE.MeshNormalMaterial();
		// material.position.set(20, 0, 0);
     mesh = new THREE.Mesh(geometry, material);
      mesh2 = new THREE.Mesh(geometry2, material);
 
  	mesh2.position.set(12,0,0);
   	scene.add(mesh);
   	scene.add(mesh2);

 	
      /* CONTROLS */
     // let controls = new OrbitControls(camera, renderer.domElement);
     // controls.addEventListener('change', render);
     // controls.enableZoom = true;
      
   	//var cubeAxis = new THREE.AxesHelper(20);
  	//geometry.add(cubeAxis);

    document.body.appendChild(renderer.domElement);
    
    

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

  mesh2.rotation.x += 0.01;
    mesh2.rotation.y += 0.02;
    
    renderer.render(scene, camera);

}