JSFiddle - React, Tailwind, and code Playground

by atulmourya

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/geometries/ParametricGeometries.js"></script>

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

// Simple three.js example

var mesh, renderer, scene, camera, controls;
var twoPi = Math.PI * 2;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x303037)
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 600, 0 );

    controls = new THREE.OrbitControls( camera );
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20, 20, 0 );
    scene.add( light );

			var gutterGeometry = new THREE.BufferGeometry();
			gutterGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [], 3 ) );
			var gutterMaterial = new THREE.MeshBasicMaterial( { color: 0x404045 } );
      var gutter = new THREE.Mesh( gutterGeometry, gutterMaterial)

			var options = chooseFromHash( gutter );

      var indicatorData = {
        radiusTop: 50,
        radiusBottom: 50,
        height: 1,
        radialSegments: 100,
        heightSegments: 1,
        openEnded: false,
        thetaStart: -THREE.Math.degToRad(135),
        thetaLength: THREE.Math.degToRad(90)
      };
      var indicatorGeometry = new THREE.BufferGeometry();
			indicatorGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( [], 3 ) );
			var indicatorMaterial = new THREE.MeshBasicMaterial( { color: 0xd0e0f3 } );
      var indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial);
      indicator.position.y = 1;
      indicator.rotateX(THREE.Math.degToRad(180));
     
      updateGroupGeometry( indicator,
				new...