JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

const FACES = 20;
var cylinderHeights = [3,2,1, 4];
var cylinderRs = [0.5,1,2, 0.2];
var cylinderColors = [0xff0000,
											0xff00ff,
											0xffff00,
                      0x00ffff
                      ];


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 cylinders = [];
for (let i=0; i<cylinderHeights.length; i++) {
	let h = cylinderHeights[i];
	let r = cylinderRs[i];
  let color = cylinderColors[i];
 	let geom = new THREE.CylinderGeometry(r,r,h, FACES);
  let mater = new THREE.MeshPhongMaterial({color: color});
  let cyl = new THREE.Mesh(geom, mater);
  cyl.rotation.x = 0.45;
  cylinders.push(cyl);
  scene.add(cyl);
}

//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;


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