JSFiddle - React, Tailwind, and code Playground

by natchiketa

HTML

<div id="viewport"></div>

CSS

body{
            color: grey;
            margin: 0px 0px;
            padding: 0px 0px;
            }

            #header {
            width: 800px;
            margin: 5px auto;
            }

            .button {
            border: 2px solid lightgrey;
            border-radius: 5px;
            background-color: grey;
            color: white;
            padding: 5px;
            cursor: pointer;
            -webkit-transition: all 1s ease-in-out;
            -moz-transition: all 1s ease-in-out;
            }
            .button:hover {
            color: black;
            background-color: darkorange;
            border-color: grey;
            }

            #viewport {
            border: 2px solid grey;
            border-radius: 2px;
            background-color: cornflowerblue;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            padding: 0;
            }

JavaScript

//----Variables----//
            //DOM element to attach the renderer to
            var viewport, controls;
            
            //viewport size
            var viewportWidth = 400;
            var viewportHeight = 400;

            //camera attributes
            var view_angle = 45,
                aspect = viewportWidth / viewportHeight,
                near = 0.1,//near clip-plane
                far = 10000;//far clip-plane

            //sphere specifications
            var radius = 50, segments = 32, rings = 32;

            //sphere material
            var sphereMaterial = new THREE.MeshLambertMaterial(
            {
                color: 0xCC0000
            });

        //----Constructors----//
            var renderer = new THREE.WebGLRenderer({antialias: true});
            var scene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(
            view_angle,
            aspect,
            near,
            far
            );

            //constructs and empty object and attach controls to it
            var dummy = new THREE.Object3D();

            //constructs an instance of a white light
            var pointLight = new THREE.PointLight( 0xFFFFFF );

            //constructs an instance of a sphere
            var sphere = new THREE.Mesh(
                new THREE.SphereGeometry(radius, segments, rings),
                sphereMaterial);

            //pyramid
            var geometry = new THREE.Geometry();
            geometry.vertices.push( new THREE.Vector3( -10, 10, 0 ) );
            geometry.vertices.push( new THREE.Vector3( -10, -10, 0 ) );
            geometry.vertices.push( new THREE.Vector3( 10, -10, 0 ) );
            //geometry.vertices.push( new THREE.Vector3( 10, -10, 0 ) );
            
            geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
            geometry.computeBoundingSphere();
    
            //constructs an instance of a sphere
            var foo = new THREE.Mesh( geometry,...