JSFiddle - React, Tailwind, and code Playground

by candiceLLL

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

<!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           body{
               margin: 0;
               overflow: hidden;
           }
       </style>
      <script src="three.js"></script>
   </head>
   <body>
   <script>


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff,1);//background color
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var p1 = new THREE.Vector3(2.4, 4.6, 2.9);
var p2 = new THREE.Vector3(1.1, 2.5, 3.8);
var p3 = new THREE.Vector3(3.0, 3.5, 4.0);
myPath = [p1, p2, p3];
var tubePath = new THREE.CatmullRomCurve3(myPath);
var geom = new THREE.TubeGeometry(tubePath,100,0.12,100,false);
  
var geom_2 = new THREE.TubeBufferGeometry(tubePath,10,0.12,10,false);     
console.log(geom_2.attributes.uv);   
var uv_y = [];
for (var k=1; k<geom_2.attributes.uv.count; k+=2) {
  uv_y.push(geom_2.attributes.uv[k]);
}     

var rev = false;

var cols = [{
  stop: 0,
  color: new THREE.Color(0x010000)
}, {
  stop: .25,
  color: new THREE.Color(0x00FF00)
}, {
  stop: .5,
  color: new THREE.Color(0x0000FF)
}, {
  stop: .75,
  color: new THREE.Color(0xFFFF00)
}, {
  stop: 1,
  color: new THREE.Color(0x00FFFF)
}];


////////////////////////  Set Colors   ////////////////////////////////// 

setGradient(geom, cols, 'x', true, geom_2);

function setGradient(geometry, colors, axis, reverse, geometry_2) 
{
  geometry.computeBoundingBox();

  var bbox = geometry.boundingBox;
  var size = new THREE.Vector3().subVectors(bbox.max, bbox.min);

  var vertexIndices = ['a', 'b', 'c'];
  var face, vertex, normalized = new THREE.Vector3(),
    normalizedAxis = 0;

  for (var c = 0; c < colors.length - 1; c++) {

    var colorDiff = colors[c + 1].stop - colors[c].stop;

 ...