JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>

CSS

canvas { width: 100%; height: 100% }

JavaScript

const SEGMENTS = 50;

var coneH = 3;
var coneR1 = 1;
var coneR2 = 2.5;
var coneColor = 0xff00aa;


var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var geometry = new THREE.CylinderGeometry( coneR1, coneR2, coneH, SEGMENTS );
var material = new THREE.MeshPhongMaterial( {color: coneColor} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

//lightning
var pointLight = new THREE.PointLight(0xFFFFFF);

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 100;

// add to the scene
scene.add(pointLight);

camera.position.z = 5;
camera.position.y = 2;
camera.lookAt(scene.position);


function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
  let rotSpd = 0.02;
  for (let cyl of cylinders) {
  	rotSpd = -rotSpd;
  	//cyl.rotation.y += rotSpd;
  }
}
animate();