JSFiddle - React, Tailwind, and code Playground

by chandings

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.js"></script>

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 3 / 2, 0.1, 1000 );
var doRotate = false;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( 600, 400 );
document.body.appendChild( renderer.domElement );


var theta = Math.PI/10;
var thetaIncrement = 0.05;
var totalTheta =  Math.PI * 2;
var cylinder;
var pointLight1 = new THREE.PointLight( 0xffffff, 1.5 );
				pointLight1.position.set( -5, 10, -5 );
				scene.add( pointLight1 );

var pointLight2 = new THREE.PointLight( 0xffffff, 1.5 );
				pointLight2.position.set( -5, -10, -5 );
				scene.add( pointLight2 );

var dir = new THREE.Vector3( 1, 0, 0 );
var origin = new THREE.Vector3( 0, 3, 0 );
var length = 1;
var hex = 0xffff00;

var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex, 1, 0.25 );
arrowHelper.rotation.y = 0;
scene.add( arrowHelper );



function updateCone(){
    
    if(cylinder){
    	scene.remove(cylinder);
    }
var geometry = new THREE.CylinderGeometry( 2, 0, 2, 32, 19, true, 0, theta );
    
var material = new THREE.MeshLambertMaterial( {
    color: 0x6666ff, 
	side: THREE.DoubleSide} );
    /*new THREE.MeshLambertMaterial( { 
    color: 0x0000aa, 
    specular: 0x0000ff,
    shininess: 100,side: THREE.DoubleSide
} )*/
cylinder = new THREE.Mesh( geometry, material );
cylinder.rotation.y = Math.PI/2;
cylinder.position.y = 1;
scene.add( cylinder );
}
updateCone();
camera.position.z = 5;
camera.position.x = 5;
camera.position.y = 5;
camera.lookAt(new THREE.Vector3(0, 0, 0));

function render() {
    if(doRotate == true && theta < totalTheta){
    	theta += thetaIncrement;
                   updateCone();
        
    }
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();

function setupCoordinate(){    
   	var axisHelper = new THREE.AxisHelper( 5 );
	scene.add( axisHelper );
    //renderer.render(scene, camera);
}
setupCoordinate()
$('button').on('mousedown', function(){
    if(theta >= totalTheta){
    	theta =...