JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var cyl1, mat1, mesh1;
var cyl2, mat2, mesh2;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 1000 );
    camera.position.z = 10;
    
    scene = new THREE.Scene();

    cyl1 = new THREE.CylinderGeometry(1, 1, 5, 16, 1)
    mat1 = new THREE.MeshNormalMaterial();
    mesh1 = new THREE.Mesh(cyl1, [mat1, mat1, mat1])
    mesh1.position.x = -2
    scene.add(mesh1)

    cyl2 = new THREE.CylinderBufferGeometry(1, 1, 5, 16, 1)
    mat2 = new THREE.MeshNormalMaterial();
    mesh2 = new THREE.Mesh(cyl2, [mat2, mat2, mat2])
    mesh2.position.x = 2
    scene.add(mesh2)

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    controls = new THREE.OrbitControls( camera, renderer.domElement );
}

function animate() {

    requestAnimationFrame( animate );

    mesh1.rotation.x += 0.01;
    mesh1.rotation.y += 0.02;
    mesh1.rotation.z += 0.02;

    mesh2.rotation.x += 0.01;
    mesh2.rotation.y += 0.02;
    mesh2.rotation.z += 0.02;

    renderer.render( scene, camera );

}