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 geometry = new THREE.SphereBufferGeometry(1, 64, 32).toNonIndexed();
  geometry.computeBoundingSphere();
  const radius = geometry.boundingSphere.radius;

  const positionAttribute = geometry.getAttribute('position');
  const uvAttribute = geometry.getAttribute('uv');
  const vertex = new THREE.Vector3();

  for (let i = 0; i < positionAttribute.count; i++) {

    vertex.fromBufferAttribute(positionAttribute, i);

    const u = (vertex.x + radius) / (2 * radius);
    const v = (vertex.y + radius) / (2 * radius);

    uvAttribute.setXY(i, u, v);

  }

  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(geometry, 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);

}