JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Three.js Test</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.2.4/dist/gsap.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r92/examples/js/loaders/GLTFLoader.js"></script>
  <script>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


const geometry = new THREE.BoxGeometry();

const green = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const blue = new THREE.MeshBasicMaterial( { color: 0x4F8EC1 } );
const pink = new THREE.MeshBasicMaterial( { color: 0xF2B6C1 } );
const light = new THREE.AmbientLight( 0x404040 );
const loader = new THREE.GLTFLoader();
loader.load( 'apollo.glb', function ( gltf ) {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.set(0 ,0, 5.66);
}, undefined, function ( error ) {

	console.error( error );

} );

const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 100, 1000, 100 );

spotLight.castShadow = true;

spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;

spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;

const cube = new THREE.Mesh( geometry, green );
const cube2 = new THREE.Mesh( geometry, blue );
const cube3 = new THREE.Mesh( geometry, pink );

//VALUES
cube.userData.click = "1";
cube2.click = "2";
cube3.click ="3";

const group = new THREE.Group();
group.add( cube );
group.add( cube2 );
group.add( cube3 );
scene.add( group );
scene.add( light );
scene.add( spotLight );

cube.position.set(0 ,0, 5.66);
cube2.position.set(5 ,0, 0);
cube3.position.set(-5 ,0, 0);
camera.position.z = 9;


function animate()...