JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
	  margin: 0;
    overflow: hidden;
}

JavaScript

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

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 controls = new OrbitControls( camera, renderer.domElement );

// Raycaster and mouse
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()

// Add sphere
const sphereGeometry = new THREE.SphereGeometry(0.75, 32, 32)
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true })
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.name = "sphere"
sphere.position.x = -2.5
scene.add(sphere)

// Add cube
const cubeGeometry = new THREE.BoxGeometry()
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true })
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
cube.name = "cube"
scene.add(cube)

// Add capsule
const capsuleGeometry = new THREE.CapsuleGeometry(0.5, 1, 4, 8)
const capsuleMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true })
const capsule = new THREE.Mesh(capsuleGeometry, capsuleMaterial)
capsule.name = "capsule"
capsule.position.x = 2.5
scene.add(capsule)

// Set camera position
camera.position.z = 5

// Event listener for mouse movement
window.addEventListener('mousemove', onMouseMove, false);

let hoveredObject = null;
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

  raycaster.setFromCamera(mouse, camera)

  const intersects = raycaster.intersectObjects(scene.children)

  if (intersects.length > 0) {
  	document.body.style.cursor = "pointer";
    const object = intersects[0].object;

    if (hoveredObject !== object) {
			if(hoveredObject)...