JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

body {
				padding:0;
				margin:0;
				font-weight: bold;
				overflow:hidden;
			}

JavaScript

var camera, scene, renderer;
var angle1 = angle2 = 0;
var curve1, point1, curveObject, geometryCurve, materialCurve;

var params1 = {P0x: 0, P0y: 0,
            P1x: 2, P1y: 2,
            P2x: -2, P2y: 1,
            P3x: 0, P3y: 3,
            steps: 30};

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 10;
scene.add(camera);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x16112b, 1 );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

createBezierCurveNEW = function (cpList, steps) {

  var N = Math.round(steps)+1 || 20;

  var geometry = new THREE.Geometry();
  var curve = new THREE.CubicBezierCurve3();

  var cp = cpList[0];
  curve.v0 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[1];
  curve.v1 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[2];
  curve.v2 = new THREE.Vector3(cp[0], cp[1], cp[2]);
  cp = cpList[3];
  curve.v3 = new THREE.Vector3(cp[0], cp[1], cp[2]);

  var j, stepSize = 1/(N-1);
  for (j = 0; j < N; j++) {
      geometry.vertices.push( curve.getPoint(j * stepSize) );
  return geometry;
};}


  function CreateCurve(){
    scene.remove(curve1);
    var controlPoints1 = [
      [params1.P0x, params1.P0y, 0],
      [params1.P1x, params1.P1y, 0],
      [params1.P2x, params1.P2y, 0],
      [params1.P3x, params1.P3y, 0] ];
  var curveGeom1 = createBezierCurveNEW(controlPoints1, params1.steps);
  var mat = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 5 } );
  curve1 = new THREE.Line( curveGeom1, mat );
  scene.add(curve1);
};
CreateCurve();


  function animate() {
    CreateCurve();
    render();
    angle1 -= .007;
    angle2 += .003;
    params1.P1x = Math.cos(angle1)+2;
    params1.P1y = Math.sin(angle1)+3;
    params1.P2x = -Math.cos(angle2)-2;
    params1.P2y = Math.cos(angle2)+1;
    requestAnimationFrame(animate);
  };
 ...