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 = angle3=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,curve2,curve3, point1, curveObject, geometryCurve, materialCurve;
var Raidus=3,Pi=2;
var pointlist=[],rotateplane;

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


   var params2 = {
   P0x: -2*Raidus, P0y:0 ,P0z:0,
   P1x:-0.5*Raidus*Math.sqrt(2)-Raidus, P1y: 0,P1z: 0.5*Raidus*Math.sqrt(2),
   P2x:  -Raidus, P2y: 0,P2z: Raidus,
   P3x:  0.5*Raidus*Math.sqrt(2)-Raidus, P3y: 0,P3z:0.5*Raidus*Math.sqrt(2),
   P4x: 0, P4y: 0 ,P4z:0,
   P5x: -0.5*Raidus*Math.sqrt(2)+Raidus, P5y: 0,P5z:-0.5*Raidus*Math.sqrt(2),
   P6x: Raidus, P6y: 0,P6z: -Raidus,   
   P7x: 0.5*Raidus*Math.sqrt(2)+Raidus, P7y: 0,P7z: -0.5*Raidus*Math.sqrt(2),      
   P8x: 2*Raidus , P8y:0 ,P8z:0,
   P9x: 0.5*Raidus*Math.sqrt(2)+Raidus, P9y: 0,P9z: 0.5*Raidus*Math.sqrt(2),
   P10x: Raidus, P10y: 0,P10z:Raidus,
   P11x: -0.5*Raidus*Math.sqrt(2)+Raidus, P11y: 0,P11z:0.5*Raidus*Math.sqrt(2),
  ...