JSFiddle - React, Tailwind, and code Playground

CSS

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

JavaScript

var camera, scene, renderer, geometry, material, mesh, 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;
 //var gridHelper = new THREE.GridHelper( size, divisions );
//scene.add( gridHelper );



		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);
 
  	mesh.position.set(-12,0,0);
  	mesh2.position.set(12,0,0);
   	scene.add(mesh);
   	scene.add(mesh2);


    
   	//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);

}