JSFiddle - React, Tailwind, and code Playground

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';

const width = window.innerWidth,
  height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 100);
camera.position.set(-5, 5, 5);

const scene = new THREE.Scene();

const material = new THREE.MeshPhongMaterial();

const planeGeometry = new THREE.PlaneGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);

const sphereGeometry = new THREE.SphereGeometry(1);
const sphere = new THREE.Mesh(sphereGeometry, material);
sphere.position.y = 1;
sphere.castShadow = true;
scene.add(sphere);

const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.castShadow = true;
dirLight.target = sphere;
dirLight.position.set(10, 10, 10);

const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 5);
scene.add(dirLightHelper);

scene.add(dirLight)

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(width, height);
renderer.setAnimationLoop(animation);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

const orbit = new OrbitControls(camera, renderer.domElement);
// animation

function animation(time) {
  renderer.render(scene, camera);

}

window.onresize = () => {
const { innerWidth, innerHeight } = window;
	renderer.setSize(innerWidth, innerHeight);
	camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  orbit.update();
}