JSFiddle - React, Tailwind, and code Playground

by arisser

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/three@0.136.0";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js";
import { Line2 } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/lines/Line2.js";
import { LineGeometry } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/lines/LineGeometry.js";
import { LineMaterial } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/lines/LineMaterial.js";
//import { LineDashedMaterial } from "https://cdn.skypack.dev/three@0.136.0/examples/jsm/lines/LineDashedMaterial.js";

let camera, scene, renderer, controls, material, geometry = null;
let time = 0, distance = 0;

const COLORS = {
  plum: 0x8F1752,
  corral: 0xFF8665
};

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 500);
  camera.position.set(0, 0, 100);
  scene = new THREE.Scene();
  const path = new THREE.Path();
	const vFOV = (camera.fov * Math.PI) / 180;
  const height = 2 * Math.tan(vFOV / 2) * Math.abs(camera.position.z);
  const width = height * camera.aspect;
  
  let r = getRand(0, 3);
	let startPos = [];
  let lastDir = 0; // 0 - up, 1 - right, 2 - down, 3 left
  
  const top = (height / 2) - 1;
  const bottom = (-height / 2) + 1;
  const left = (-width / 2) + 1;
  const right = (width / 2) - 1;
  
	if(r == 0) { 						// top
  	startPos[0] = getRand(left, right)
    startPos[1] = height / 2;
    lastDir = 2;
  } else if(r == 1) {			// right
  	startPos[0] = width / 2
    startPos[1] = getRand(bottom, top);
    lastDir = 3;
  } else if(r == 2) {			// bottom
  	startPos[0] = getRand(left, right)
    startPos[1] = -height / 2;
    lastDir = 0;
  } else {								// left
		startPos[0] = -width / 2
    startPos[1] = getRand(bottom, top);
    lastDir = 1;
	}

	drawCircle(startPos[0], startPos[1], "red");
  
  let x = startPos[0], y = startPos[1];

	const dx = 2
  const dy = 2

  function straight(len = 1) {
  
 ...