JSFiddle - React, Tailwind, and code Playground

CSS

html, body {
    width: 100%;
    height: 100%;
}

JavaScript

(function() {
    // Set basic some variables.
    var documentWidth = document.body.clientWidth,
        documentHeight = document.body.clientHeight,
        viewAngle = 45,
        drawNear = 0.1,
        drawFar = 10000,
        aspectRatio = documentWidth / documentHeight,
        renderer = new THREE.WebGLRenderer(),
        scene = new THREE.Scene();

    // Attach the renderer.
    renderer.setSize(documentWidth, documentHeight);
    document.body.appendChild(renderer.domElement);

    // Create the camera.
    var camera = new THREE.PerspectiveCamera(
        viewAngle,
        aspectRatio,
        drawNear,
        drawFar
    );
    camera.position = {x: 0, y: 0, z: 50};

    // Create a light.
    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(1, 1, 1);
    scene.add(light);
    
    var material = new THREE.MeshPhongMaterial({color: 0x0000ff, side:THREE.DoubleSide});
    var cylinder = new THREE.Mesh(
        new THREE.CylinderGeometry(100, 100, 400, 50, 50, true),
        material
    );

    scene.add(cylinder);
    
    (function animate() {
        requestAnimationFrame(animate);
        camera.lookAt({x: 0, y: 0, z: 0})
        renderer.render(scene, camera);
        camera.position.z++;
        camera.position.y++;
    })();

})();