JSFiddle - React, Tailwind, and code Playground

by Yoshiki Vazquez-Baeza

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.js"></script>

JavaScript

THREE.Linear3 = THREE.Curve.create(

  function ( points, label /* array of Vector3 */) {

    this.points = (points == undefined) ? [] : points;
    this.label = label;

  },

  function ( t ) {    
    var v = new THREE.Vector3();
    var c = [];
    var points = this.points, point, intPoint, weight;
    point = ( points.length - 1 ) * t;

    intPoint = Math.floor( point );
    weight = point - intPoint;

    c[ 1 ] = intPoint;
    c[ 2 ] = intPoint  > points.length - 2 ? points.length - 1 : intPoint + 1;

    var pt1 = points[ c[1] ],
      pt2 = points[ c[2] ];

    v.copy( pt1 ).lerp( pt2, weight );

    return v;

  }

);

var camera, scene, renderer, geometry, material, mesh, points, index = 1;

// curve attrs
var c_material, c_path, c_tube, c_mesh;

points = [new THREE.Vector3(0, 0, 0),
         new THREE.Vector3(25, 25, 25),
         new THREE.Vector3(50, 50, 50),
         new THREE.Vector3(75, 75, 75),
         new THREE.Vector3(100, 100, 100),
         new THREE.Vector3(75, 100, 100),
         new THREE.Vector3(50, 100, 100),
         new THREE.Vector3(25, 100, 100),
         new THREE.Vector3(0, 100, 100),
         new THREE.Vector3(0, 75, 100),
         new THREE.Vector3(0, 50, 100),
         new THREE.Vector3(0, 25, 100),
         new THREE.Vector3(0, 0, 100)];

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    c_material = new THREE.MeshLambertMaterial({color:0xFF0000});
	c_material.matrixAutoUpdate = true;
	c_material.transparent = false;
    
    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    if (index > 12){
        index = 0;
    }
    index = index + 1;
    
    
 ...