JSFiddle - React, Tailwind, and code Playground

by Qu4rks

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  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 THREE.OrbitControls(camera);

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

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

  // axes
  scene.add(new THREE.AxisHelper(20));

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

  // material
  var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    shading: THREE.FlatShading,
    transparent: true,
    opacity: 0.7,
  });

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

  // Try to find a bad point
  //findIntersection(mesh);

  // Flashlight Position
  // IF set to (1.28, -10, 1.28), the ray would traverse the mesh
  // IF set to ... (1, -10, 2) for instance, the ray stops at the mesh
  var flPos = new THREE.Vector3(1.28, -10, 1.28); // EDIT ME

  // Super Flashlight
  var geoFl1 = new THREE.CylinderGeometry(1, 1, 2);
  geoFl1.translate(flPos.x, flPos.y, flPos.z);
  var matFl = new THREE.MeshPhongMaterial({
    color: 0x8080ff
  });

  scene.add(new THREE.Mesh(geoFl1, matFl));

  // Cast a ray from the flashlight up onto the sphere
  var DOWN = new THREE.Vector3(0, -1, 0);
  var UP = new THREE.Vector3(0, 1, 0);
  var rayCaster = new THREE.Raycaster(flPos, UP);

  var rayTarget = new THREE.Vector3(flPos.x, flPos.y + 20, flPos.z);
  var intersect = rayCaster.intersectObject(mesh);
  if (intersect.length > 0) {
    rayTarget = intersect[0].point;
  }

  // Flashlight Ray
  var geoRay = new...