JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
  margin: 0;
}

JavaScript

import * as three from "three"
import {
  OrbitControls
} from "https://unpkg.com/[email protected]/examples/jsm/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({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const directionalLight = new three.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);
directionalLight.position.y = (5 + 5)
directionalLight.position.x = -(5 + 5)
directionalLight.position.z = -(5 + 5)

camera.position.y = 5 + 5
camera.position.x = 5 + 5
camera.position.z = 5 + 5

const target1 = new three.Mesh(new three.BoxGeometry(1, 1, 1), new three.MeshStandardMaterial({
  color: "red"
}))
scene.add(target1)
target1.position.y = 20
directionalLight.target = target1

const controls = new OrbitControls(camera, renderer.domElement);
const helper = new three.DirectionalLightHelper(directionalLight, 5);
scene.add(helper);

const animate = () => {
  requestAnimationFrame(animate);
  controls.update()
  helper.update();
  renderer.render(scene, camera);
};

animate();