JSFiddle - React, Tailwind, and code Playground

by candiceLLL

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>
  </head>

  <body>
    <script>
      var scene = new THREE.Scene();
      //   scene.scale.set(2,2,2);

      /////////////////////////////////////////////////////////////////////////
      var points = [];

      /* Handle the csv input file */
      function readTextFile(file) {
        var lines = [];
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = function() {
          if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
              var allText = rawFile.responseText;
              var allTextLines = allText.split('\n');
              for (var line = 0; line < allTextLines.length; line++) {
                elements = allTextLines[line].split(',');
                points.push(elements);
                //  console.log(elements);
              }
            }
          }
        }
        rawFile.send(null);
      }

      readTextFile("XYZ_tubes.txt");

      var renderer = new THREE.WebGLRenderer();
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

      var point = new THREE.PointLight(0xffffff, 1, 0);
      point.position.set(430, 400, 120);
      point.castShadow = true;

      point.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(50, 1, 10, 2500));
      point.shadow.bias = 0.0001;
      //Set up shadow properties for the light
      point.shadow.mapSize.width = 2048; // default
      point.shadow.mapSize.height = 1024; // default
      point.shadow.camera.near = 0.5; // default
      point.shadow.camera.far = 500 // default

      scene.add(point);

      //environment...