JSFiddle - React, Tailwind, and code Playground

by Leoooo

HTML

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/107/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

JavaScript

var camera, scene, renderer;
var angle1 = angle2 = 0;

 /* curve1 = new THREE.CatmullRomCurve3( [
  new THREE.Vector3( 0, 5, 0 ),
  new THREE.Vector3( -r*Math.sqrt(2)+2*r, 5, r*Math.sqrt(2) ),
  new THREE.Vector3( 2*r, 5, 2*r ),
  new THREE.Vector3( r*Math.sqrt(2)+2*r, 5, r*Math.sqrt(2) ),
  new THREE.Vector3( 4*r, 5, 0 ),
  new THREE.Vector3( r*Math.sqrt(2)+2*r, 5, -r*Math.sqrt(2) ),
  new THREE.Vector3( 2*r, 5, -2*r ),
  new THREE.Vector3( -r*Math.sqrt(2)+2*r, 5, -r*Math.sqrt(2) ),
  ],true );

  var points = curve1.getPoints( 50 );*/

var curve1, point1, curveObject, geometryCurve, materialCurve;
var Raidus=3




var params1 = {P0x: 0, P0y: 5 ,P0z:0,
            P1x: -0.5*Raidus*Math.sqrt(2)+Raidus, P1y: 5 ,P1z:Raidus*0.5*Math.sqrt(2),
            P2x: Raidus, P2y: 5,P2z:Raidus,
            P3x: 0.5*Raidus*Math.sqrt(2)+Raidus, P3y: 5,P3z:Raidus*0.5*Math.sqrt(2),
            P4x: 2*Raidus, P4y: 5 ,P4z:0,
            P5x: 0.5*Raidus*Math.sqrt(2)+Raidus, P5y: 5 ,P5z:-Raidus*0.5*Math.sqrt(2),
            P6x: Raidus, P6y: 5,P6z:-Raidus,
            P7x: -0.5*Raidus*Math.sqrt(2)+Raidus, P7y: 5,P7z:-Raidus*0.5*Math.sqrt(2),      
            steps: 50,close:true};
            
   var params2 = {P0x: 0-Raidus, P0y: 5 ,P0z:0,
            P1x: -0.5*Raidus*Math.sqrt(2)+Raidus-Raidus, P1y: 5 ,P1z:Raidus*0.5*Math.sqrt(2),
            P2x: Raidus-Raidus, P2y: 5,P2z:Raidus,
            P3x: 0.5*Raidus*Math.sqrt(2)+Raidus+Raidus, P3y: 5,P3z:Raidus*0.5*Math.sqrt(2),
            P4x: 2*Raidus+Raidus, P4y: 5 ,P4z:0,
            P5x: 0.5*Raidus*Math.sqrt(2)+Raidus+Raidus, P5y: 5 ,P5z:-Raidus*0.5*Math.sqrt(2),
            P6x: Raidus-Raidus, P6y: 5,P6z:-Raidus,
            P7x: -0.5*Raidus*Math.sqrt(2)+Raidus-Raidus, P7y: 5,P7z:-Raidus*0.5*Math.sqrt(2),      
            steps: 50,close:true};

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