JSFiddle - React, Tailwind, and code Playground

HTML

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

  <head>
    <title>Hello!</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="main"></div>
  </body>

</html>

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {
  OrbitControls
} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import {
  TransformControls
} from "https://threejs.org/examples/jsm/controls/TransformControls.js";
import {
  Line2
} from "https://threejs.org/examples/jsm/lines/Line2.js";
import {
  LineMaterial
} from "https://threejs.org/examples/jsm/lines/LineMaterial.js";
import {
  LineGeometry
} from "https://threejs.org/examples/jsm/lines/LineGeometry.js";

var line, renderer, scene, camera, controls;
var matLine, matLineBasic, matLineDashed;

var main = document.getElementById("main");

// viewport
var insetWidth;
var insetHeight;
var linepositions = [];
var linecolors = [];

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(0x333333, 1.0);
  renderer.setSize(window.innerWidth, window.innerHeight);
  main.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  var axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
  var size = 1;
  var divisions = 1;
  var gridHelper = new THREE.GridHelper(size, divisions);
  scene.add(gridHelper);

  camera = new THREE.OrthographicCamera(
    window.innerWidth / -2,
    window.innerWidth / 2,
    window.innerHeight / 2,
    window.innerHeight / -2,
    1,
    90
  );
  camera.position.set(0, 0, 2);
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 1;
  controls.maxDistance = 3;
  camera.zoom = 100;

  var positions = [];
  var colors = [];
  // Position and THREE.Color Data
  positions.push(0, 0, 0);
  positions.push(5, 5, 5);
  colors.push(255, 0, 0);
  colors.push(255, 0, 0);

  // Line2 ( LineGeometry, LineMaterial )
  var geometry = new LineGeometry();
  geometry.setPositions(positions);
  geometry.setColors(colors);
  matLine = new...