JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>

CSS

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

JavaScript

// Setting UVs so the same image appears on each face without distortion.

// (This example demonstrates the distortion.)

// Three.js (r.50)

// WestLangley
    
var mesh, renderer, scene, camera;
var controls;

init();
animate();

function init() {

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

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 120;
    camera.lookAt( scene.position );
    scene.add( camera );

    // controls
    controls = new THREE.OrbitControls( camera );
    
    // directional
    var light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 100, 100, 100 );
    scene.add( light );
    
    // ambient
    var ambient = new THREE.AmbientLight( 0x444444 );
    scene.add( ambient );

    // geometry
    var R = 25;
    var r = 10;
    // Set the height parameter so that the height of each face 
    // is equal to the width of the face at it's base.
    // This is only done to make the UV calculations easier; it is not required.
    var h = Math.sqrt( ( 2 * R * R ) - ( ( R - r ) * ( R - r ) / 2 ) );
    var geometry = new THREE.CylinderGeometry( r, R, h, 4, 1, true );
    
    // reset uvs
    // Reset the UVs so the texture image appears on each face -- without distortion.
    //var factor = ( 1 - ( r / R ) ) / 2;
    // Note that if factor is zero, then the UVs are reset to be the four corners 
    // of the texture, and the mapping to a trapezoidal face results in distortion.
    var factor = 0;
    for( var i = 0; i < geometry.faceVertexUvs[ 0 ].length; i++ ) {
        var uvs = geometry.faceVertexUvs[ 0 ][ i ];
        uvs[ 0 ].u = factor;
        uvs[ 0 ].v = 1;
        uvs[ 1 ].u = 0;
        uvs[ 1 ].v = 0;
        uvs[ 2 ].u = 1;
        uvs[ 2 ].v = 0;
       ...