JSFiddle - React, Tailwind, and code Playground

by calvintennant

CSS

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

JavaScript

// Create the renderer.
var documentWidth = document.body.clientWidth,
    documentHeight = document.body.clientHeight,
    renderer = new THREE.WebGLRenderer();
renderer.setSize(documentWidth, documentHeight);
document.body.appendChild(renderer.domElement);

// Create the scene.
var scene = new THREE.Scene();

// Create the camera.
var viewAngle = 45,
    aspectRatio = documentWidth / documentHeight,
    drawNear = 0.1, 
    drawFar = 10000,
    camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, drawNear, drawFar);
camera.position = {x: 0, y: 450, z: 600};
camera.lookAt({x: 0, y: 0, z: 0});

// Create a material.
var material = new THREE.MeshNormalMaterial({side: THREE.DoubleSide});

// Create an object.
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 400, 50, 50, true), material);
scene.add(cylinder);

// Create another object.
var cube = new THREE.Mesh(new THREE.CubeGeometry(100, 100, 100, 1, 1, 1), material);
cube.position = {x: 120, y: -150, z: 120};
scene.add(cube);

// Create fancy controls.
controls = new THREE.TrackballControls(camera, renderer.dom_element);

// Animate our scene.
(function animate() {
    // Rotate our objects.
    cylinder.rotation.y += .01;
    cube.rotation.y -= .01;

    // Render the scene.
    renderer.render(scene, camera);

    // Call our animation function recursively.
    requestAnimationFrame(animate);
})();