JSFiddle - React, Tailwind, and code Playground

by Bretto

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.GridHelper());

const segX = 100;
const segY = 1;
let g = new THREE.PlaneGeometry(10, 10, segX, segY);
let idx = [];
let clrs = [];
let c1 = new THREE.Color(0x00ffff);
let c2 = new THREE.Color(0xff00ff);
let c = new THREE.Color();
let cs = [];
for(let x = 0; x < segX; x++){
  
  idx.push(x, segX + x + 1);
  
  c.lerpColors(c1, c2, x / segX);
  cs[x] = c.clone();
  cs[segX + x + 1] = c.clone();
  
}

cs.forEach( cl => {clrs.push(cl.r, cl.g, cl.b)});
g.setAttribute("color", new THREE.Float32BufferAttribute(clrs, 3));

g.setIndex(idx);
g.rotateX(Math.PI * -0.5);

let m = new THREE.LineBasicMaterial({vertexColors: true});

let l = new THREE.LineSegments(g, m);

scene.add(l);

let counter = 0;
renderer.setAnimationLoop( _ => {
	if (counter > segX) {
  	counter = 0;
    setSides();
  }
  g.setDrawRange(0, counter * 2);
	counter++;
	renderer.render(scene, camera);
})

function setSides(){

	let sp1 = new THREE.CatmullRomCurve3(
  	new Array(3).fill(0).map( a => {return new THREE.Vector3().random().subScalar(0.5).multiplyScalar(10)})
  );
  let sp2 = new THREE.CatmullRomCurve3(
  	new Array(3).fill(0).map( a => {return new THREE.Vector3().random().subScalar(0.5).multiplyScalar(10)})
  );
	
  sp1.getSpacedPoints(segX).forEach((p, idx) => {
  	g.attributes.position.setXYZ(idx, p.x, p.y, p.z);
  });
  sp2.getSpacedPoints(segX).forEach((p, idx) => {
 ...