JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

TypeScript

const PLAYER_SIZE = 1
const PLAYER_HEIGHT = 2


function createPlayer() {
	const obj = new THREE.Group()

	const body = new THREE.Mesh(
		new THREE.CylinderGeometry(PLAYER_SIZE/2, PLAYER_SIZE/2, PLAYER_HEIGHT, 30),
		new THREE.MeshPhongMaterial({color: 0xffffff, flatShading: true})
	)
  
	obj.add(body)

	const helper = new THREE.ArrowHelper( new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, 0 ), 3, 0xff0000 );
	obj.add(helper);

	return obj
}
const intersectPoint = new THREE.Vector3();
const mousePosition = new THREE.Vector2();

function getWorldPosFromScreenPos(): THREE.Vector3 {
	const rayCaster = new THREE.Raycaster()
	rayCaster.setFromCamera(mousePosition, camera)
	const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)

	return rayCaster.ray.intersectPlane(plane, intersectPoint)
}


const start = new Date().getTime()

function tick(renderer: any): void {
	const mouseWorldPos = getWorldPosFromScreenPos()

	if (new Date().getTime() - start > 1000) {  // start looking at the mouse after 1 second
		player.lookAt(mouseWorldPos)
	}

	renderer.render(scene, camera)
}

var renderer = new THREE.WebGLRenderer({alpha: true, antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

var canvas = renderer.domElement

var mousePosition = new THREE.Vector2(0, 0)
var scene = new THREE.Scene()

var camera = camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

camera.position.set( 0, 20, 20 );
camera.lookAt( scene.position );

var player = createPlayer()
scene.add(player)

var dirLight = new THREE.DirectionalLight(0xffffff, 0.6)
dirLight.position.set(-100, -100, 200)
dirLight.castShadow = true
dirLight.target = player
scene.add(dirLight)

dirLight.shadow.mapSize.width = 2048
dirLight.shadow.mapSize.height = 2048
var d = 500
dirLight.shadow.camera.left = - d
dirLight.shadow.camera.right = d
dirLight.shadow.camera.top = d
dirLight.shadow.camera.bottom = - d

const...