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'

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop( animate );
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  var light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // geometry
  var geometry = new THREE.SphereGeometry(5);

  // material
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    flatShading: true
  });

  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  var rayOrigin = new THREE.Vector3(0, -10, 0);

  // Super Flashlight
  var cylinderGeo = new THREE.ConeGeometry(1, 2);
  var cylinderMat = new THREE.MeshPhongMaterial({
    color: 0x8080ff
  });

  const cylinder = new THREE.Mesh( cylinderGeo, cylinderMat );
  cylinder.position.copy( rayOrigin );
  scene.add(cylinder);

  // Cast a ray from the flashlight up onto the sphere
  var rayDirection = new THREE.Vector3(0, 1, 0).normalize();
  var rayCaster = new THREE.Raycaster(rayOrigin, rayDirection);

  var rayTarget = rayDirection.clone().multiplyScalar( 10 );
  var intersect = rayCaster.intersectObject(mesh);
  if (intersect.length > 0) {
      console.log( intersect[ 0 ] );
  }

  // ray visualized
  var geoRay = new THREE.BufferGeometry().setFromPoints( [ rayTarget, rayOrigin...