JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.131.3/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

let camera, scene, renderer;
let mesh;
let light1, light2, light3, light4;

init();
animate();

function init() {

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

  scene = new THREE.Scene();
  
  light1 = new THREE.PointLight(0xff0040);
  scene.add(light1);

  light2 = new THREE.PointLight(0x0040ff);
  scene.add(light2);

  light3 = new THREE.PointLight(0x80ff80);
  scene.add(light3);

  light4 = new THREE.PointLight(0xffaa00);
  scene.add(light4);
  
  const loader = new THREE.TextureLoader();
  const texture = loader.load( 'https://threejs.org/examples/textures/water/Water_1_M_Normal.jpg' );

  const geometry = new THREE.SphereGeometry();
  const material = new THREE.MeshStandardMaterial( { normalMap: 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);

}

function animate() {

  requestAnimationFrame(animate);

  mesh.rotation.y += 0.01;

  const time = Date.now() * 0.0005;

  light1.position.x = Math.sin(time * 0.7) * 3;
  light1.position.y = Math.cos(time * 0.5) * 4;
  light1.position.z = Math.cos(time * 0.3) * 3;

  light2.position.x = Math.cos(time * 0.3) * 3;
  light2.position.y = Math.sin(time * 0.5) * 4;
  light2.position.z = Math.sin(time * 0.7) * 3;

  light3.position.x = Math.sin(time * 0.7) * 3;
  light3.position.y = Math.cos(time * 0.3) * 4;
  light3.position.z = Math.sin(time * 0.5) * 3;

  light4.position.x = Math.sin(time * 0.3) * 3;
  light4.position.y = Math.cos(time * 0.7) * 4;
  light4.position.z = Math.sin(time * 0.5) * 3;

  renderer.render(scene, camera);

}