JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;

init();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 4;

  scene = new THREE.Scene();

  const sphere = new THREE.SphereGeometry( 1, 64, 32 );
  sphere.computeBoundingSphere();
  const {
    vertices,
    faces,
    faceVertexUvs
  } = sphere;
  const radius = sphere.boundingSphere.radius;
  faces.forEach((face, i) => {
    const {
      a,
      b,
      c
    } = face;
    faceVertexUvs[0][i] = [a, b, c].map((id) => {
      const {
        x,
        y,
        z
      } = vertices[id];
      return new THREE.Vector2(
        (x + radius) / (2 * radius),
        (y + radius) / (2 * radius));
    });
  });
  
  const loader = new THREE.TextureLoader();
  const texture = loader.load( 'https://threejs.org/examples/textures/uv_grid_opengl.jpg', render );
  material = new THREE.MeshBasicMaterial( { map: texture } );

  mesh = new THREE.Mesh(sphere, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.addEventListener( 'change', render );

}

function render() {

  renderer.render(scene, camera);

}